1.2 HTML5的基本结构和语法规则

每个网页都有其基本的结构，包括HTML的语法结构、文档结构、标签的格式以及代码的编写规范等。

1.2.1 HTML5文档的基本结构

HTML 5文档的基本结构如下：

HTML文档可分为文档头（Head）和文档体（Body）两部分。文档头的内容包括网页语言、关键字和字符集的定义等；文档体中的内容就是页面要显示的信息。

HTML文档的基本结构由3对标签负责组织，即﹤html﹥、﹤head﹥和﹤body﹥。其中﹤html﹥标签标识HTML文档，﹤head﹥标签标识头部区域，﹤body﹥标签标识主体区域。

图1-1所示是一个可视化的HTML页面结构，只有﹤body﹥与﹤/body﹥之间的白色区域才会在浏览器中显示。

1.﹤！DOCTYPE html﹥标签

﹤！DOCTYPE﹥标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范。只有开头处使用﹤！DOCTYPE﹥声明，浏览器才能将该页面作为有效的HTML文档，并按指定的文档类型进行解析。文档类型声明的语法格式如下：

﹤!DOCTYPE html﹥

这行代码称为DOCTYPE（DOCument Type，文档类型）声明。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。﹤！DOCTYPE html﹥声明必须放在每一个HTML文档的最顶部，在所有代码和标签之前。

2.﹤html﹥…﹤/html﹥标签

﹤html﹥标签位于﹤！DOCTYPE html﹥标签之后，称为HTML文档标签，也被称为根标签，用于告诉浏览器其自身是一个HTML文档。HTML文档标签的语法格式为：

﹤html﹥处于文档的最前面，表示HTML文档的开始，即浏览器从﹤html﹥开始解释，直到遇到﹤/html﹥为止。每个HTML文档均以﹤html﹥开始，以﹤/html﹥结束。lang属性为文档设置语言，对于简体中文，设置为“zh-CN”。

3.﹤head﹥…﹤/head﹥标签

HTML文档包括文档头和文档体。﹤head﹥标签用于定义HTML文档的头部信息，也称为头部标签，紧跟在﹤html﹥标签之后，主要用来封装其他位于文档头部的标签。HTML文档头标签的语法格式为：

文档头部内容在开始标签﹤html﹥和结束标签﹤/html﹥之间定义，一个HTML文档只能含有一对﹤head﹥…﹤/head﹥标签。网页中经常设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标签，这些标签通常都写在﹤head﹥标签内，因此被称为头部相关标签。绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

4.﹤meta charset﹥标签

﹤head﹥…﹤/head﹥标签中的﹤meta charset﹥指定网页文档中的字符集，称为HTML文档编码，HTML5文档直接使用meta元素的charset属性指定文档编码，语法格式如下：

﹤meta charset="UTF-8"﹥

为了被浏览器正确解释和通过W3C代码校验，所有的HTML文档都必须声明所使用的编码语言。文档声明的编码应该与实际的编码一致，否则就会呈现为乱码。对于中文网页的设计者来说，指定代码的字符集为“UTF-8”。

5.﹤title﹥…﹤/title﹥标签

HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。标题文字位于﹤title﹥和﹤/title﹥标签之间，其语法格式如下：

﹤title﹥网页标题﹤/title﹥

每个HTML文档都应该有标题，在HTML文档中，﹤title﹥和﹤/title﹥标签位于HTML文档的头部，即﹤head﹥和﹤/head﹥标签之间。例如，﹤title﹥哔哩哔哩（゜-゜）つロ干杯～-bilibili﹤/title﹥，如图1-2所示（在Google Chrome浏览器中，单击地址栏右端的“更多”按钮，在弹出的下拉列表中选择“更多工具”→“开发者工具”，单击“Elements”标签，再单击元素前的箭头，展开该元素）。

6.﹤body﹥…﹤/body﹥标签

﹤body﹥标签定义HTML文档要显示的内容，也称为主体标签。浏览器中显示的所有文本、图像、表单与多媒体元素等信息都必须位于﹤body﹥…﹤/body﹥标签内，﹤body﹥标签内的信息才是最终展示给用户看的。HTML文档主体标签的语法格式为：

文档体位于文档头之后，以﹤body﹥为开始标签，﹤/body﹥为结束标签。一个HTML文档只能含有一对﹤body﹥…﹤/body﹥标签，且﹤body﹥…﹤/body﹥标签必须在﹤html﹥…﹤/html﹥标签内，位于﹤head﹥头部标签之后，与﹤head﹥标签是并列关系。﹤body﹥标签定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

浏览器在解释HTML文档时是按照层次顺序进行解释的，其顺序为：document→html→body→div父元素→input子元素。document是最上层祖先元素，input是最下层后代元素。

1.2.2 HTML5的基本语法

HTML文档由元素构成，元素由开始标签、结束标签、属性及元素的内容4部分组成。

1.标签（Tag）

HTML用标签来规定网页元素在文档中的功能。标签是用一对尖括号“﹤﹥”括起来的单词或单词缩写。标签有两种形式：双标签和单标签。

（1）双标签

双标签包括开始标签和结束标签，其格式为：

﹤标签﹥受标签影响的内容﹤/标签﹥

开始标签标志一段内容的开始，结束标签是指与开始标签相对的标签。结束标签比开始标签多一个斜杠“/”。双标签也称闭合标签。

例如，HTML文档从﹤html﹥开始，到﹤/html﹥结束。﹤head﹥和﹤/head﹥标签描述HTML文档的相关信息，之间的内容不会在浏览器窗口上显示出来。﹤body﹥和﹤/body﹥标签包含所有要在浏览器窗口上显示的内容，也就是HTML文档的主体部分。

（2）单标签

单标签没有相应的结束标签的标签，也称空标签。其格式为：

﹤标签﹥ 或 ﹤标签/﹥

例如，换行标签﹤br﹥或﹤br/﹥。

其他没有相应结束标签的标签有﹤area﹥、﹤base﹥、﹤basefont﹥、﹤br﹥、﹤col﹥、﹤hr﹥、﹤img﹥、﹤input﹥、﹤param﹥、﹤link﹥、﹤meta﹥等。

（3）标签的嵌套

标签可以放在另外一个标签所能影响的片段中，以实现对某一段文档的多重标签效果，但是要注意必须要正确嵌套。例如，下面的嵌套是错误的：

﹤p﹥﹤em﹥Hello Word!﹤/p﹥﹤/em﹥

改正如下：

﹤p﹥﹤em﹥Hello World!﹤/em﹥﹤/p﹥

需要注意以下两点。

1）每个标签都要用一对尖括号“﹤ ﹥”括起来，如﹤p﹥、﹤table﹥，以表示这是HTML代码而非普通文本。注意，“﹤”“﹥”与标签名之间不能留有空格或其他字符。

2）在标签名前加上符号“/”便是其结束标签，表示该标签内容的结束，如﹤/h1﹥。标签也有不用﹤/标签﹥结尾的，称之为单标签。例如，换行标签﹤br/﹥。

2.元素（Element）

HTML文档中的元素是指从开始标签到结束标签的所有代码。HTML元素分为有内容的元素和空元素两种。

（1）有内容的元素

有内容的元素是由开始标签、结束标签以及两者之间的元素内容组成的，其中元素内容既可以是需要显示在网页中的文字内容，也可以是其他元素。例如，﹤title﹥和﹤/title﹥是标签，下面的代码是一个title元素：

﹤title﹥淘宝网-淘！我喜欢﹤/title﹥

（2）空元素

空元素只有开始标签而没有结束标签，也没有元素内容。例如，br、hr（横线）元素就是空元素。

（3）元素的嵌套

除了HTML文档元素﹤html﹥外，其他的HTML元素都是被嵌套在另一个元素之内的。在HTML文档中，html是最外层元素，也称为根元素。head、body元素是嵌套在html元素内的。body元素内又嵌套许多元素。HTML中的元素可以多级嵌套，但是不能互相交叉。例如，下面的代码对于﹤head﹥和﹤/head﹥标签来说，是一个head元素：

﹤head﹥﹤title﹥淘宝网-淘！我喜欢﹤/title﹥﹤/head﹥

同时，这个title元素又是嵌套在head元素中的另一个元素。

例如，下面是不正确的嵌套写法，p元素的开始标签在b元素的外层，但它的结束标签却放在了b元素结束标签内。

﹤p﹥这是﹤b﹥第一段﹤/p﹥文字﹤/b﹥

正确的HTML写法如下：

﹤p﹥这是﹤b﹥第一段﹤/b﹥文字﹤/p﹥

为了防止出现错误的HTML元素嵌套，在编写HTML文档时，建议先写外层的一对标签，然后逐渐往里写，这样既不容易忘记写HTML元素的结束标签，也可以减少HTML元素的嵌套错误。例如，在编写HTML文档时，可以像下面这样写。

第1步：

第2步：

第3步：

3.属性

属性用来说明元素的特征，借助于元素属性，HTML网页才会展现丰富多彩且格式美观的内容。

元素的属性放置在元素的开始标签内，每个属性对应一个属性值，通常以“属性名="值"”的形式来表示，出现在元素开始标签的“﹥”之前，用空格隔开后，可以指定多个属性，并且在指定多个属性时不用区分顺序。属性的使用格式如下：

﹤标签 属性1="属性值1" 属性2="属性值2"…﹥受标签影响的内容﹤/标签﹥

例如，下面代码中的“style="color:#ff0000;font-size:30px"”就是p元素的属性：

﹤p style="color:#ff0000;font-size:30px"﹥第一段内容﹤/p﹥

定义属性值时注意以下几点。

1）不定义属性值。HTML规定属性也可以没有值，例如：

﹤dl compact﹥

浏览器会使用compact属性的默认值。但对于没有默认值的属性，不能省略属性值。

2）属性中的属性值可以包含空格，但是这种情况下必须使用引号。例如，下面的代码正确定义了方法：

﹤img src="C:/Documents and Settings/test.jpg"width=1024 height=36/﹥

下面的代码则是错误的：

﹤img src=C:/Documents and Settings/test.jpg width=1024 height=36/﹥

也就是说，属性值一定是连续字符序列，如果不是连续序列，则要加引号标注。

3）单引号和双引号都可以作为属性值。当属性值中含有单引号时，不能再用单引号来包括属性值，要用双引号来包括属性值。但是，当属性值中有双引号时，属性值中的双引号就要用数字字符引用（＆＃39）或者字符实体引用（＆quot；）来代替双引号。例如，下面的代码是错误的：

﹤p title="欢迎游览"迪士尼""﹥乐园﹤/p﹥

4）HTML要求属性和属性值使用小写，虽然属性和属性值对大小写不敏感。

1.2.3 HTML的全局属性

1.HTML的全局标准属性

全局属性是指可用于大多数HTML元素的属性。在HTML和HTML5规范中规定的全局标准属性，见表1-2。后续章节将介绍这些属性。

2.HTML的全局事件属性

事件是针对某个元素的可识别的动作。例如，针对“确定”按钮的单击事件，文本框内容变化事件、复选框的选中或取消选中事件等。

HTML有使事件在浏览器中触发动作的能力，例如，当用户单击某个元素时执行JavaScript程序。在HTML中，事件既可以通过JavaScript直接触发，也可以通过全局事件属性触发。所谓全局事件属性是指可用于大多数HTML元素的事件属性。有关事件编程的知识，将在第9章 JavaScript事件处理中介绍。

1.2.4 元素的分类

依据元素的作用不同，可将元素分为元信息元素、语义元素和无语义元素。

1.元信息元素

元信息（Meta-information）或称元数据（Metadata）类元素是指用于描述文档自身信息的一类元素。meta元素定义元信息，包含页面的描述、关键字、最后的修改日期、作者及其他元信息。﹤meta﹥标签写在﹤head﹥…﹤/head﹥标签中。元信息元素提供给浏览器、搜索引擎（关键字）以及其他Web服务调用，一般不会显示给用户。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。

meta元素是元信息元素，在HTML中是一个单标签的空元素。该元素可重复出现在头部元素中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。

meta元素的常用属性如下。

1）charset：定义文档的字符编码，常用的是UTF-8。

2）content：定义与name和http-equiv相关的元信息。

3）name：关联content的名称（常用的有keywords关键字、author作者名、description页面描述）。

不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要介绍name属性，用于设置搜索关键字和描述。meta元素的name属性的语法格式为：

﹤meta name="参数"content="参数值"﹥

name属性主要用于描述网页摘要信息，与之对应的属性值为content。content中的内容主要用于搜索引擎查找信息和分类信息。

name属性主要有以下两个参数：keywords和description。其中，keywords用来告诉搜索引擎网页使用的关键字；description用来告诉搜索引擎网站主要的内容。

例如，哔哩哔哩网站主页的关键字信息如图1-3所示。打开方法是单击Google Chrome浏览器地址栏右端的“更多”按钮，选择“更多工具”→“开发者工具”选项。选择“Elements”选项卡，再单击选项卡前的箭头展开该元素。当浏览者通过百度搜索引擎搜索“哔哩哔哩”时，就可以看到搜索结果中显示出网站主页的标题、关键字和内容描述，如图1-4所示。

2.语义元素

语义元素是指清楚地向浏览器和开发者描述其意义的元素，如标题元素、段落元素、列表元素等。有些语义元素在网页中可以呈现显示效果，有些没有显示效果。

元素的语义化能够呈现出很好的内容结构，语义化使得代码更具有可读性，让其他开发人员更加理解HTML结构，减少差异化；方便其他设备解析，如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。爬虫依赖标签来确定关键字的权重，帮助爬虫抓取更多的有效信息。

大约有100多个HTML语义元素可供选择。语义元素分为块级元素、行内（内联）元素、行内块元素等。

（1）块级元素（block）

块级元素是指本身属性为display：block的元素。因为它自身的特点，通常使用块级元素进行大布局（大结构）的搭建。块级元素的特性如下。

1）每个块级元素总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。

2）块级元素可以直接控制宽度（width）、高度（height）以及盒子模型的相关CSS属性，内边距（padding）和外边距（margin）等都可控制。

3）在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度。

4）在不设置高度的情况下，块级元素的高度是它本身内容的高度。

常用的块级元素主要有p、div、ul、ol、li、dl、dt、dd、h1～h6、hr、form、address、pre、table、blockquote、center、dir、fieldset、isindex、menu、noframes、noscript等。

（2）行内元素（inline）

行内元素也称内联元素，是指本身属性为display：inline的元素，行内元素可以和相邻的行内元素在同一行，对宽、高属性值不生效，完全靠内容撑开宽、高。因为它自身的特点，通常使用块级元素来进行文字、小图标（小结构）的搭建。行内元素的特性如下。

1）行内元素会与其他内联元素从左到右在一行显示。

2）行内元素不能直接控制宽度、高度以及盒子模型的相关CSS属性，例如内边距的top、bottom（padding-top、padding-bottom）和外边距的top、bottom（margin-top、margin-bottom）都不可改变。但是可以设置内外边距水平方向的值。也就是说，对于行内元素的margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的，但是竖直方向的margin和padding无效。

3）行内元素的宽高是由本身内容的大小决定（文字、图片等）。

4）行内元素只能容纳文本或者其他内联元素（不能在行内元素中嵌套块级元素）。

常用的行内元素主要有a、span、em、strong、b、i、u、label、br、abbr、acronym、bdo、big、br、cite、code、dfn、em、font、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、var等。

利用CSS可以摆脱上面HTML标签归类的限制，自由地在不同标签或元素上应用需要的属性。常用的CSS样式有以下三个。

display：block：显示为块级元素。

display：inline：显示为内联元素。

display：inline-block：显示为内联块元素。表现为同行显示并可修改宽、高、内外边距等属性。例如，将﹤ul﹥元素加上display：inline-block样式，原本垂直的列表就可以水平显示了。

（3）行内块元素

还有一种元素结合行内元素和块级元素，不仅可以对宽和高的属性值生效，还可以多个元素在一行显示，这种元素被称为行内块元素。行内块元素能和其他元素待在一行，能设置宽和高。常用的行内块元素有img、input、textarea等。行内块元素的特点是结合行内元素和块级元素的优点，不仅可以对宽和高的属性值生效，还可以多个标签在一行显示。

块级元素可以嵌套行内元素，行内元素不可以嵌套块级元素。

（4）可变元素

可变元素根据上下文关系确定该元素是块元素还是内联元素。常用的可变元素有applet、button、del、iframe、ins、map、object、script等。

（5）HTML5中新增的结构语义元素

在HTML5之前，页面只能用div元素作为结构元素来分隔不同的区域，由于div元素无任何语义，给代码设计者和阅读者带来困扰，所以在HTML5中增加了结构语义元素。HTML5增加的结构语义元素明确了一个Web页面的不同部分，如图1-5所示。

HTML5常用的结构语义元素如下。

1）header元素。用于定义文档的头部区域，为文档或节规定页眉，常被用作介绍性内容的容器，可以包含标题元素、Logo、搜索框等。一个文档中可以有多个header元素。

2）nav元素用于定义页面的导航链接部分区域，导航有顶部导航、底部导航和侧边导航等。

3）article元素用于定义文档内独立的文章，可以是新闻、条件、用户评论等。

4）section元素用于定义文档中的一个区域或节。节是指有主题的内容组，通常有标题。可以将网站首页划分为简介、内容、联系信息等节。

5）aside元素用于定义页面主区域内容之外的内容（比如侧边栏）。﹤aside﹥标签的内容是独立的，与主区域的内容无关。

6）footer元素用于定义文档的底部区域。一个页脚通常包含文档的作者、著作权信息、链接的使用条款链接、联系信息等，文档中可以使用多个footer元素。

7）figure元素用于定义一段独立的引用内容，经常与figcaption元素配合使用，通常用在主文本的图片、代码、表格等中。如果这部分内容被转移或删掉，不会影响到主体。

8）figcaption元素用于表示与其相关联的引用的说明或标题，描述其父节点figure元素中的其他内容。figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置。

9）main元素用于规定文档的主内容。

10）mark元素用于定义重要的或强调的文本。

11）details元素用于定义用户能够查看或隐藏的额外细节。12）summary元素用于定义details元素的可见标题。

13）time元素用于定义日期或时间。

以上的元素除了figcaption外，都是块级元素。

3.无语义元素

无语义元素无须考虑其内容，有div和span两个无语义元素。div是块级元素，span是行内元素。

常用div元素划分区域或者节，div元素可以用作组织工具，而不使用任何格式。所谓Div+CSS的网页布局，就是用div元素组织要显示的数据（文字、图、表等）结构，用CSS显示数据的样式，从而做到结构与样式的分离，这种布局代码简单，易于维护。

1.2.5 HTML的字符实体和颜色表示

1.字符实体

一些字符在HTML中拥有特殊的含义，例如，尖括号“﹥”“﹤”已作为HTML的语法符号。因此，如果希望在浏览器显示这些特殊字符，就需要在HTML源代码中插入相应的HTML代码，这些特殊符号对应的HTML代码被称为字符实体。

字符实体由三部分组成：以一个符号（＆）开头，中间是一个实体名称，以一个分号（；）结束。例如，要在HTML文档中显示小于号，输入“＆lt；”。需要强调的是，实体书写对大小写是敏感的。常用的特殊符号及对应的字符实体见表1-3。

空格是HTML中最常用的字符实体。通常情况下，在HTML源代码中，如果通过按〈Space〉键输入了多个连续空格，浏览器会只保留一个空格，删除其他空格。在需要添加多个空格的位置，使用多个“＆nbsp；”就可以在文档中增加空格。

2.HTML的颜色表示

在HTML中，颜色有两种表示方式。一种是用颜色的英文名称表示，比如blue表示蓝色，red表示红色；另外一种是用十六进制的数值表示RGB的颜色值。

RGB颜色的表示方式为＃rrggbb。其中，rr、gg、bb三色对应的取值范围都是00～FF，如白色的RGB值是（255，255，255），用＃ffffff表示；黑色的RGB值是（0，0，0），用＃000000表示。

1.2.6 HTML5开发人员编码规范

HTML5作为前端网页结构的超文本标记语言，网页的HTML代码必须符合HTML5书写规范。规范目的是提高团队协作效率，使HTML5代码风格保持一致，容易被理解、维护和升级。

1.HTML书写规范

1）文档第一行添加HTML5的声明类型﹤！DOCTYPE html﹥。

2）建议为﹤html﹥根标签指定lang属性，从而为文档设置正确的语言lang="zh-CN"。

3）编码统一为﹤meta charset="utf-8"/﹥。

4）﹤title﹥标签必须设置为﹤head﹥的直接子元素，并紧随﹤meta charset﹥声明之后。

5）文档中除了开头的DOCTYPE、utf-8（或UTF-8）和zh-CN或者﹤head﹥几种特殊情况可以大写外，其他HTML标签名必须使用小写字母。

6）标签的闭合要符合HTML5的规定。

7）必须遵守标签的嵌套规则，例如，div不得置于p中，tbody必须置于table中。

8）属性名必须使用小写字母，其属性值必须用双引号包围。布尔类型的属性建议不添加属性值。自定义属性推荐使用data-。

2.标签的规范

1）标签分单标签和双标签，双标签往往是成对出现，所有标签（包括空标签）都必须关闭，如﹤br/﹥、﹤img/﹥、﹤p﹥…﹤/p﹥等。

2）标签名和属性建议都用小写字母。

3）多数HTML标签可以嵌套，但不允许交叉。

4）HTML文档中一行可以写多个标签，但标签中的一个单词不能分两行写。

3.属性的规范

1）根据需要可以使用该标签的所有属性，也可以只用其中的几个属性。在使用时，属性之间没有顺序。

2）属性值都要用双引号括起来。

3）并不是所有的标签都有属性，如换行标签就没有。

4.元素的嵌套

1）块级元素可以包含行内元素或其他块级元素，但行内元素却不能包含块级元素，它只能包含其他的行内元素。

2）有几个特殊的块级元素只能包含内行元素，不能再包含块级元素，这几个特殊的块级元素是h1、h2、h3、h4、h5、h6、p、dt。

5.代码的缩进

HTML5代码并不要求在书写时缩进，但为了文档的结构性和层次性，建议代码缩进设置为4个空格，即使用4个空格作为一个缩进层级，标签首尾对齐，每层的内容向右缩进4个空格。