HTML 基础概念及规则

HTML 基本结构

HTML 文件后缀名为“.htm”或“.html”，是一种包含了 HTML 标记的文本文件，我们通常所说的网页实质上就是 HTML 文件，HTML 的编辑非常简单，学习成本很低，而且所有网页的源代码都可通过浏览器直接查看。正如蒂姆·伯纳斯－李所说：“（互联网）起飞原因在于，全球的人可随意融入参与。”

创建网页的方式有很多，我们可以新建一个空白的文本文件，编辑之后保存为后缀名为“.html”的文件即可。如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>文档标题</title>
</head>
<body>
</body>
</html>

在上面的 HTML 文件中我们可以看出，HTML 文档可以分为文档声明、网页头部分和网页主体部分三部分。

网页头部分指的是<head>和</head>部分，在这个区域一般放置网页相关的内容，比如网页编码方式、关键词、网页内容描述和网页相关联的文件等等。这些包含在<head>和</head>之间的内容一般不会显示在用户的浏览器中。

网页主体部分指的是包含在<body>和</body>之间的部分，这部分内容是显示在浏览器中的内容，大部分 HTML 的编辑工作都是在主体部分中完成，如图片、文字、超链接等等。

头部分和主体部分又包含在<html>和</html>之中。浏览器会把<html>和</html>之中的内容视为网页。

元素及标签

元素是构成网页内容的基础单位，元素由起始标签、内容和结束标签构成，如：

<h1>一级标题</h1>

其中<h1>是h1元素的起始标签，标签以“<”开始，以“>”结束，</h1>是结束标签，结束标签中含有“/”，位于起始标签和结束标签之间的“一级标题”是h1元素标记的内容。

元素可以嵌套，比如在段落 p 中插入图片img。这时，img元素作为整体构成段落元素p的内容。

<p>
  <img src="http://img1.gtimg.com/63530531.jpg" />
</p>

并非所有元素都包含起始标签和结束标签。如上例中，img元素就只有一个起始标签，没有结束标签，这一类元素被称为自闭和元素。除img元素之外，常见的自闭和元素还有：<br>、<embed>、<hr>、<input>、<link>、<meta>、<source>、<wbr>。

属性及属性值

属性（Attributes）及其值（Values）对于某些元素而言是必不可少的，比如新闻网页中经常使用图片来传递信息，图片在 HTML 中使用img元素来标记，但必须使用相应的属性及其值，告诉浏览器图片存放的位置、图片的大小等信息，其中图片存放的位置用src属性来表示，而图片的大小用 width 和 height 属性来表示，属性的值为字符串。如：

<img src="63530531.jpg" alt="一周图片精选">

上例中，img元素拥有src属性，表示图片来源，src属性的值为63530531.jpg，表示图片存放的具体位置。

以下属性是全局属性，即几乎所有 HTML 元素都支持的属性：

accesskey 为元素指定快捷键
class 为元素指定类型
contenteditable 指定元素内容的可编辑性
dir 指定元素内容的文字方向
hidden 指定元素的可见性
id 为元素指定唯一名称
lang 指定元素内容的语言
spellcheck 为元素指定拼写检查
style 为元素指定样式
tabindex 为元素指定 tab 顺序
title 为元素指定提示文字
translate 为元素内容提供指定语言的翻译内容

特殊字符

HTML 中，大于号>、小于号<、引号"等一些字符，是有特殊意义的，比如 HTML 的标签就是以<开始，以>结束，如果直接使用，容易引起歧义。因此，HTML 中提供了输出特殊字符的机制，使用&字符开始，以;结束，可以用来输出特殊字符，在&字符和;之间，可以是名词或者数字编码。例如："ˇ 表示引号。完整的 HTML 转义字符列表参见 http://tool.oschina.net/commons?type=2。

扩展阅读资料

HTML DOM