HTML常用标签：

HTML文档格式：

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

其次，HTML文档中至少包含基本的和成对的<html> </html>、<head> </head>、<title> </title>、<body> </body>双标签。

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>我是网页标题</title>

 </head>

     <body>

         我是网页内容。

     </body>

 </html>

HTML文档解析：

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

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

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

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

一、最常用的标签：

1、<h1></h1>...<h6></h6> 标题标签 ▷ 设置网页中的标题文字，设置后黑色粗体显示。代码及效果如下：

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>PB_6大标题类型</title>

 </head>

 <body>

     <h1>我是标题h1</h1>

     <h2>我是标题h1</h2>

     <h3>我是标题h1</h3>

     <h4>我是标题h1</h4>

     <h5>我是标题h1</h5>

     <h6>我是标题h1</h6>

 </body>

 </html>

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

 <body>

     <p>我是一个段落。</p>

 </body>

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

 <body>

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

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

 <body>

     　你是我的月亮

     <hr />

     　我是地球
 </body>

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

 <body>

     <center>

     　　我就在网页中间显示，你能怎么滴我？嗯哼

     </center>

 </body>

6、<ol></ol> 有序列表标签【注意】要套<li></li>列表项使用。 ▷ 设置网页中的内容，使文档有序排列。代码及效果如下：

 <body>

     <ol>

         <li>我是第1列</li>

         <li>我是第2列</li>

         <li>我是第3列</li>

     </ol>
 </body>

7、<ul></ul> 无序列表标签【注意】要套<li></li>列表项使用。 ▷ 设置网页中的内容，使文档无序排列。代码及效果如下：

 <body>

     <ul>

         <li>我是第1列</li>

         <li>我是第2列</li>

         <li>我是第3列</li>

     </ul>
 </body>

8、<dl></dl> 自定义列表标签【注意】要套<dt></dt><dd></dd>列表项使用。 ▷ 设置网页中的内容，使文档无序排列。代码及效果如下：

 <body>

     <dl>

         <dt>我是自定义标题1</dt>
         <dd>我是自定义描述1</dd>

         <dt>我是自定义标题2</dt>

         <dd>我是自定义描述2</dd>

     </dl>

 </body>

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

 <body>

    <pre>

            您好！

       欢迎您来到 pengbo518 博客园
       感谢您对我的关注支持！

       让我们共同学习探讨吧！

    </pre>

 </body>

10、<b></b> 字体形状标签 [加粗]

11、<i></i> 字体形状标签 [斜体]

12、<u></u> 字体形状标签 [下划线]

13、<sub></sub> 字体形状标签 [下标]

14、<sup></sup> 字体形状标签 [上标]

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

 <body>

     <b>《静夜思》</b>

     <sub>李白</sub>

     <p>

     　　<i>床前明月光，疑是地上霜。</i>　
     　　<u>举头望明月，低头思故乡。</u> 
     　　<sup>pengbo518</sup>

     </p>

 </body>

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

语法：<font size="字号" face="字体" color="颜色">文本</font>

 <body>

    <font size="+2" face="Arial, Helvetica, sans-serif" color="#FF0000">

        HTML I love you !

    </font>
        <br />

    <font size="+3" face="隶书" color="#0000FF">

        热爱生活，热爱博客园

    </font>

 </body>

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

　　语法：<img src="图片路径" title="标题" width="宽度" height="高度" align="对齐方式" alt="图片名" />

 <body>

    <img src="data:images.png" title="小鱼" width="70px" height="70px" alt="鱼干" />
       我的小鱼干呢

 </body>

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

 <body>

     <a href="http://www.baidu.com">百度</a>||
     <a href="http://www.taobao.com">淘宝</a>||

     <a href="http://www.cnblogs.com">博客园</a>

 </body>

【补充】

一.文件路径：

1. 绝对路径： ▷ 绝对路径是指带域名或盘符的完整路径。

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

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

　　　　 <a href="pengbo518.html">pengbo518博客园</a>

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

　　　 <a href="../pengbo518.html">pengbo518博客园</a>　

二. 锚点：

▷ 设置锚点通常是放在文档的特定主题或顶部。然后创建锚点链接，通过链接可以快速定位到指定位置。

链接到当前文档中的锚点：<a href="#锚点名称">链接文本</a>

　　链接到其他文档中的锚点：<a href="文件名#锚点名称">链接文本</a>