HTML常用标签：

HTML文档格式：

首先，HTML是一种超文本标签语言，它是制作网页的基础。

其次，HTML文档中至少包含基本的和成对的 、、、 双标签。

最后，在HTML文档中必不可少的还有属性标签，描述HTML网页得一些属性以及转换字符编码，一般选择使用国际编码utf-8。

 1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 html xmlns="http://www.w3.org/1999/xhtml">
 3 head>
 4     meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     title>我是网页标题title>
 6 head>
 7     body>
 8         我是网页内容。  
 9     body>
10 html>

HTML文档解析：

1. 根标签，它是HTML文档的根标签，页面中所有内容都必须包含在其中。

2. 头部标签，其中的文档不会在网页中显示，目的是供浏览器解析其中的属性。

3. 标题标签，要求精炼简洁，能够概括一个网页的主要内容，即作为个网页的标题。

4. 内容标签，其中也是呈现在网页上的内容。

一、最常用的标签：

1、

...

标题标签 ▷ 设置网页中的标题文字，设置后黑色粗体显示。代码及效果如下：

 1 html>
 2 head>
 3     meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 4     title>PB_6大标题类型title>
 5 head>
 6 body>
 7     h1>我是标题h1h1>
 8     h2>我是标题h1h2>
 9     h3>我是标题h1h3>
10     h4>我是标题h1h4>
11     h5>我是标题h1h5>
12     h6>我是标题h1h6> 
13 body>
14 html>

2、

段落标签 ▷ 设置网页中的段落，其中可以嵌套列表、表格等，多行文字时将随浏览器大小自动换行。代码如下：

1 body>
2     p>我是一个段落。p>
3 body>

3、
换行标签 ▷ 设置网页中文字文本的换行。【注意】这个是单标签，没有结束标签。代码及效果如下：

1 body>
2 　　欢迎来到pengbo518博客园！br /> 我是强制换行标签喔！

3 body>

4、

---

分割线标签 　　 ▷ 设置网页中内容的分割界线。【注意】这个也是单标签，没有结束标签。代码及效果如下：

1 body>
2     　你是我的月亮
3     hr />
4     　我是地球

5 body>

5、

居中标签 ▷ 设置网页中内容的位置，使文档在整个页面上居中显示。

1 body>
2     center>
3     　　我就在网页中间显示，你能怎么滴我？嗯哼
4     center>  
5 body>

6、

有序列表标签【注意】要套

列表项 使用。 ▷ 设置网页中的内容，使文档有序排列。代码及效果如下：

1 body>
2     ol>
3         li>我是第1列li>
4         li>我是第2列li>
5         li>我是第3列li>
6     ol>

7 body>

7、

无序列表标签【注意】要套

列表项 使用。 ▷ 设置网页中的内容，使文档无序排列。代码及效果如下：

1 body>
2     ul>
3         li>我是第1列li>
4         li>我是第2列li>
5         li>我是第3列li>
6     ul>

7 body>

8、

自定义列表标签【注意】要套

列表项使用。 ▷ 设置网页中的内容，使文档无序排列。代码及效果如下：

1 body>
2     dl>
3         dt>我是自定义标题1dt>

4         dd>我是自定义描述1dd>
5         dt>我是自定义标题2dt>
6         dd>我是自定义描述2dd>
7     dl>
8 body>

9、

自定义格式标签 ▷ 自定义设置网页中的内容格式。代码及效果如下：

1 body>
2    pre>
3            您好！
4            欢迎您来到 pengbo518 博客园

5            感谢您对我的关注支持！
6            让我们共同学习探讨吧！      
7    pre>
8 body>

10、 字体形状标签 [加粗] ▷ 设置字体加粗显示。代码及效果如下：

11、 字体形状标签 [斜体] ▷ 设置字体斜体显示。代码及效果如下：

12、 字体形状标签 [下划线] ▷ 设置字体带有下划线显示。代码及效果如下：

13、字体形状标签 [下标] ▷ 设置文字作为下标显示。代码及效果如下：

14、字体形状标签 [上标] ▷ 设置文字作为上标显示。代码及效果如下：

** 10、11、12、13、14 ** ▷ 代码及效果集合如下：

1 body>
2     b>《静夜思》b> 
3     sub>李白sub>
4     p>
5            i>床前明月光，疑是地上霜。i>　

6     　　    u>举头望明月，低头思故乡。u> 

7         sup>pengbo518sup>
8     p>
9 body>

15、 字体标签 ▷ 设置字体、字号、颜色等。代码语法及效果如下：

语法：文本

 1 body>
 2    font size="+2" face="Arial, Helvetica, sans-serif" color="#FF0000">
 3        HTML I love you !
 4    font>

 5        br />
 6    font size="+3" face="隶书" color="#0000FF">
 7        热爱生活，热爱博客园
 8    font>     
 9 body>

16、 图像标签 ▷ 设置字体、字号、颜色等。代码语法及效果如下：

　　 语法：

1 body>
2    img src="images.png" title="小鱼" width="70px" height="70px" alt="鱼干" />

3       我的小鱼干呢
4 body>

17、超链接标签 ▷ 创建超链接，href属性来设置页面的链接地址。代码语法及效果如下：

1 body>
2     a href="http://www.baidu.com">百度a>||

3     a href="http://www.taobao.com">淘宝a>||
4     a href="http://www.cnblogs.com">博客园a>
5 body>

【补充】一.文件路径：1. 绝对路径： ▷ 绝对路径是指带域名或盘符的完整路径。

　　　　　　　　　　 2. 相对路径： ▷ 相对路径是指这个文件所在的路径引起的跟其他文件（或文件夹）的路径关系。例如：

　　　　　　　　　　　　　　① 如果两个在同一个文件夹中，在index.html中链接pengbo518.html则可以在index.html中如下方式链接：

　　　　　　　　　　　　　　 href="pengbo518.html">pengbo518博客园

　　　　　　　　　　　　　　② 如果pengbo518.html文件是index.html文件的上级路径，则可以在index.html中如下方式链接：

　　　　　　　　　　　　　pengbo518.html">pengbo518博客园