首先，我们要来了解一下一个简单的HTML页面架构是什么样子的：

 

　　HTML头部元素：

 

　　head元素

 

　　· 是所有头部元素的容器

 

　　· < title >,< base >,< link >,< meta >,< script >和< style >可以添加到< head >部分

 

　　title元素

 

　　· 用来定义文档的标题

 

　　· 能够定义浏览器工具栏里的标题

 

　　· 能够提供页面被添加到收藏夹时显示的标题

 

　　· 能够显示搜索引擎结果中的页面标题

 

　　meta元素

 

　　· 可提供有关页面的元数据（metadata,是关于数据的信息），比如针对搜索引擎和更新频度的描述和关键字。元数据不会显示在页面上，但对于机器是可读的。

 

　　· < meta >标签始终位于 head 元素中。

 

　　· 下面的 meta 元素定义页面的描述：

 

　　· 下面的 meta 元素定义页面的关键字：

 

　　link元素

 

　　· 定义文档与外部资源之间的关系

 

　　· 最常用于连接样式表：

 

　　· rel属性：规定链接类型，指当前文档与被链接文档之间的关系

 

　　· type属性：指定所连接文档的MIME类型，css的MIME是type/css，一般使用type=“text/css”

 

　　· href属性：定义资源的链接URL，内容为一个绝对URL链接或一个相对URL链接（同一目录下名为mystyle.css的文件）

 

　　绝对路径

 

　　非常明确的指向目标地址，常用于指向另一个网站，如""

 

　　相对路径

 

　　方便于网站内部某些文件之间的移放，如"/…"

 

　　script元素

 

　　· 用于定义客户端脚本，比如JavaScript

 

　　HTML常用标签：

 

　　< !-- … -->和< p >…< /p >标签

 

　　· < !- -这是一段注释。注释不会在浏览器中显示。-- >

 

　　· < p>这是一段普通的段落。< /p>

 

　　< h1> —— < h6>标签

 

　　· 这是标题标签，从 h1 到 h6 及为从大到小

 

　　< br>标签

 

　　· 是换行标签，只是简单地开始新的一行，与< p>有区别

 

　　< hr>标签

 

　　· 是换行线标签，在HTML页面中创建一条水平线

 

　　< strong>,< b>,< i>,< u>标签

 

　　· < strong>标签显示加粗文本效果

 

　　· < b>标签显示加粗文本效果

 

　　· < i>标签显示斜体文本效果

 

　　· < u>标签显示下划线文本效果（如果文本不是超链接，就不要对其使用下划线）

 

　　< sup>,< sub>,< del>,< font>标签

 

　　· < sup>标签可定义上标文本

 

　　· < sub>标签可定义下标文本

 

　　· < del>标签显示删除线文本效果

 

　　· < font>标签规定字体属性，face – 规定文本的字体，size – 规定文本的大小，color – 规定文本的颜色

 

　　< pre>标签

 

　　· < pre>标签的一个常见应用就是用来表示计算机的源代码，可以将代码样式原样输出