
2.1.1 HTML 5的基本结构
虽然HTML的标准正在不断地发展完善,每个版本都会出现一些新的内容,废弃一些过时的内容,但它的基本格式始终没有变化。所有HTML版本都是以“标记”的方式表示页面内容的。标记可以用来划分页面的不同区域(如页眉、页脚、导航栏、正文区等)、规定段落或表格的起始、显示HTML控件(如按钮、文本框和下拉列表框等)及其属性等。通常将“标记”表示的HTML页面内容称为“HTML元素”,也可以将HTML页面理解成各种“元素”按特定规则组成的集合。
HTML文件中的标记符必须用“<”和“>”括起来,一般情况下标记符都以“<标记>”开始,以“</标记>”结束(若标记为块标记,则结束标记可以省略)。
其最基本的格式如下。


举例如下。

可以看出HTML标记语言是通过各种标记及标记附带的属性值,通知浏览器应如何显示网页中的内容的。
1.文档结构
一个相对完整的HTML 5文件的基本格式如下。

上述代码的第一行“<!DOCTYPE html>”是文档类型(Document Type)的缩写,用来标识文档的版本为HTML 5。
XHTML 1.0 Transitional的版本声明标记如下。

HTML 4.01 Transitional的版本声明标记如下。

2.HTML 5与早期版本的不同
HTML 5相对XHTML和HTML 4.01发生了一些改变,其规范显得更加宽松,对早期版本也体现了最大可能的“兼容性”。以下是HTML 5与其他版本之间的一些差异。
(1)标记不区分大小写
在HTML 5中允许开始标记与结束标记的大小写不一致。举例如下。

需要说明的是,允许“不一致”是为了提高“容错”和“兼容”度,书写格式混乱在任何时候都不会被提倡。在编写代码时应养成格式规范、层次清晰、可读性高的良好习惯。
(2)结束标记可以省略
在HTML 5中允许省略“块”状元素的结束标记。例如,下列代码在页面中显示一个下拉列表框和一个按钮控件,下拉列表框中有“教务处”“学生处”和“科研处”3个选项。其中,用于表示下拉列表框选项的<option>标记就省略了结束标记</option>。用于显示按钮的语句“<input epub:type="Button" value="确定" />”将开始标记和结束标记合二为一了。

(3)boolean类属性的设置
常用的boolean类属性有readonly(只读)、disabled(不可用)、checked(选中状态)、selected(设置默认选项)和multiple(是否允许选择多个项)等,设置这些属性时应注意以下3种情况。
1)只写属性名而不指定属性值时,属性值默认为true。例如,下列语句表示设置一个按钮控件,但按钮处于不可用状态(灰色显示,用户不能操作它)。

2)当属性值与属性名相同或属性值为空字符串时,该属性值为true。举例如下。

或者

3)省略boolean类属性名时,属性值默认为false。例如,下列语句表示设置一个按钮控件,按钮处于可用状态,可以响应用户的单击操作。

(4)属性引号允许省略
HTML 5规定,当属性值中不包含空格、<、>、=或单双引号等特殊字符时,属性值可不用引号括起来。举例如下。
