一、html文本格式化标签（这些标签都不换行）

立即学习“前端免费学习笔记（深入）”；

eg：

 1  2  3  4  5  6  7  8  9     定义粗体文字
10     定义大号字
11     定义着重文字
12     定义斜体字
13     定义小号字
14     定义加重语气
15     定义下标字
16     定义上标字
17     定义插入字
18     定义删除字
19 20 

登录后复制

效果：

立即学习“前端免费学习笔记（深入）”；

二、HTML图像

1、图像标签：

立即学习“前端免费学习笔记（深入）”；

2、源属性（Src）、替换文本属性（Alt）

　　src： 指 “source”，源属性的值是图像的 URL 地址。

　　alt：在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

3、图片应用实例

　　（1）将图片当做背景

 1  2  3  4  5  6  7  8  9     
图像背景
10     
gif 和 jpg 文件均可用作 HTML 背景。
11     
如果图像小于页面，图像会进行重复。
12 13 

登录后复制

　　效果：

　　（2）排列图片：使用align属性(align=”bottom”;align=”middle”;align=”top”)

　　（3）图像的浮动：使图片浮动至段落的左边或右边：使用align属性（align=”left”或align=”left”）

　　（4）调整图像尺寸：通过改变 img 标签的 “height” 和 “width” 属性的值，可以放大或缩小图像

1 2     @@##@@3     @@##@@4 

登录后复制

立即学习“前端免费学习笔记（深入）”；

　　（5）可以将图像作为链接使用

　　（6）创建图像映射：即使用

三、HTML表格

1、表格标签

立即学习“前端免费学习笔记（深入）”；

 2、表格中的空单元格

　　如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。（

 ）

3、设置表格边框：

，无边框则border=”0”

4、跨行或者跨咧的单元格：使用colspan来合并单元格

 1  2     

登录后复制登录后复制 3 4

5

6 7 8 Bill Gates 9 555 77 85410 555 77 85511 12 13

　　效果：

5、单元格边距：cellpadding与单元格间距：cellspacing

 1  2     

登录后复制登录后复制 3 4

5 6 7

8 9
10 11 12

13 14 15

16 17
18 19 20

21 22 23

24 25 26

　　效果：

立即学习“前端免费学习笔记（深入）”；

四、HTML 块元素、HTML 内联元素

　　1、块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：

,

,

,

　　2、内联元素在显示时通常不会以新行开始。例子：,

, ,

　　3、HTML

元素是块级元素，它是可用于组合其他 HTML 元素的容器，如果与 CSS 一同使用， 元素可用于对大的内容块设置样式属性。 元素是内联元素，可用作文本的容器，当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。

五、HTML颜色

1、颜色值：

　　颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

2、颜色名：

　　仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。如果使用其它颜色的话，就应该使用十六进制的颜色值。

3、部分颜色如下：

立即学习“前端免费学习笔记（深入）”；

六、HTML布局

1、使用

元素布局

　　每一对

标签代表一个块，对块的属性进行定义后，在标签里输入块的内容。

　　（1）先将整体分块

1 2     
3         
这是头部
4         
这是左半部分
5         
这是右半部分
6         
这是底部
7     
8 

登录后复制

　　效果：

立即学习“前端免费学习笔记（深入）”；

　　（2）对每一块进行样式定义

 1  2     *{         //使整体充满，不留一点空白边距 3         margin:0px; 4         padding:0px; 5     } 6     body{margin:0px;} 7     .container{ 8         height:500px; 9         width:100%;10     }11     .header{12         height:10%;13         background-color:#FF80C0;14     }15     .left{16         height:80%;17         width:30%;18         background-color:#0F9;19         float:left;    20     }21     .right{22         height:80%;23         width:70%;24         background-color:#90F;25         float:left;   26     }27     .footer{28         height:10%;29         background-color:#999;30         clear:both;   31     }32 

登录后复制

　　最后完成效果：

立即学习“前端免费学习笔记（深入）”；

 2、使用

布局

 1  2  3  4  5  6  7  8  9     

登录后复制10 11 12 13 14 15 16 17 18 19 20 21 22

　　效果：

七、框架

　　框架也可以用来布局，通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

1、标签：

　　(1)框架集标签：

　　　　*框架集标签定义如何将窗口分割为框架

　　　　*每一个

定义一系列行或列

　　　　*rows和cols的值规定了每行或每列占据屏幕的面积

　　（2）框架标签：

　　（3）内联框架：

　　（4） 标签：固定框架大小，使用户不可以拖动边框来改变它的大小

　　注意：不能将

标签与 标签同时使用！不过，假如你添加包含一段文本的 标签，就必须将这段文字嵌套于 标签内

2、使用实例

　　（1）垂直框架：

　　　　*先创建三个基础框架，以其中一个为例：

 1  2  3  4  5  6  7  8  9 10 

登录后复制

　　　　*最后创建一个框架，将前面三个导入：

 1  2  3  4  5  6  7  8  9     10     11     12 13 14 

登录后复制

　　　　效果：

（水平框架只需将cols改为rows）

　　（2）混合型框架：

 1  2  3  4  5  6  7  8  9     10 11     12         13         14     15 16 

登录后复制

　　效果：

立即学习“前端免费学习笔记（深入）”；

　　（3）内联框架

 1  2  3  4  5  6  7  8  9     10 11 

登录后复制

　　效果：

立即学习“前端免费学习笔记（深入）”；

　　内联框架可以用frameborder=”0″来取消边框效果，还可以用width、height来设置大小

　　（4）导航框架

　　　　*设计好框架集页面，并为框架窗口定义名称

 1  2  3  4  5  6  7  8  9     10     11 12 

登录后复制

　　　　*设置导航栏中的超链接的target目标窗口属性，使其值为框架窗口的名字

 1  2  3  4  5  6  7  8  9     frame_a
10     frame_b
11     frame_c
12 13 

登录后复制

　　效果：

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；