第2章 HTML5的文档结构元素
学前提示
HTML文档可分为文档头和文档体两部分。文档头的内容包括网页语言、关键字和字符集的定义等；文档体中的内容就是页面要显示的信息。文档结构描述使用html、head、body等基本元素。div也是一种结构元素，在HTML5对HTML4的改进中，一个比较重大的变化就是增加了很多新的结构元素，如article、section、aside等。这些元素和div元素有类似的功能，但有更强的语义表示，从而使文档结构更加清晰。
知识要点
• HTML的元素和属性
• HTML文档的基本结构元素
• HTML5新增的结构元素
2.1 HTML的元素和属性
一个HTML文件是由一系列元素组成的，元素的特征通过属性来描述，属性是由属性名和属性值组成的。
2-1 HTML5元素、属性和格式化
1. HTML元素
HTML文档中的元素指的是从开始标记（start tag）到结束标记（end tag）的所有代码。元素的内容是开始标记与结束标记之间的内容，具体如表2-1所示。
表2-1 HTML元素示例
HTML用标记来规定元素的属性和它在文档中的功能，标记最基本的格式如下。
<tag>…</tag>
标记使用时必须用尖括号“<>”括起来，通常成对出现，以开头无斜杠的标记开始，以有斜杠的标记结束。这种标记称为双标记。例如，<p>表示段落的开始，</p>表示段落的结束。还有一些标记被称为单标记，即只需单独使用就能完整地表达意思，例如最常用的<br/>就是单标记，表示文本格式中的换行。
标记还可以嵌套使用，即标记中还可以包含标记，如表格中包含表格、行、单元格或其他标记。
2. HTML元素的属性
属性用来说明元素的特征，每个属性总是对应一个属性值，称为“属性/值”对，语法格式如下。
<tag properity1 ="value1" properity2 = "value2"…>…</tag>
一个标记中可以定义多个“属性/值”对，属性对之间通过空格分隔，可以以任何顺序出现。属性名不区分大小写，但不能在一个标记中定义同名的属性。
标记中的属性值需要用半角的双引号或半角的单引号括起来，也可以不使用引号，但属性值中只能包含ASCII字符（a～z以及A～Z）、数字（0～9）、连字符（-）、圆点句号（.）、下画线（_）以及冒号（:）。
HTML5已经不再支持<font>、<center>等传统的格式标记。这些标记的功能可以通过style属性来描述。这种style属性也称为内部样式表，style属性的作用是定义样式，如文字的大小、色彩、背景颜色等。style属性的书写格式如下。
<tag style = "properity1:value1;properity2:value2;">…</tag>
一个style属性中可以放置多个样式的属性名称，每个属性名称对应相应的属性值，属性之间用分号隔开。下面这段代码用style属性定义了红色的文字段落。
<p style="color:#ff0000;">该段落用style定义为红色</p>
W3C提倡在定义属性值时使用引号，这样可以使代码更加规范，也可以顺利地与未来的新标准衔接，style标记及其属性将在第13章中详细介绍。
3. HTML的字符实体
一些字符在HTML中拥有特殊的含义，比如小于号（<）用于定义HTML标记的开始。如果用户希望浏览器正确地显示这些字符，需要在HTML源码中插入字符实体。
字符实体有三部分：一个符号（&），一个实体名称，以及一个分号（;）。例如，要在HTML文档中显示小于号，可以输入“<”。
有时，也使用实体编号来输入特殊字符，“<”也表示小于号，但实体名称相对来说更容易记忆。需要强调的是，实体书写对大小写是敏感的。表2-2列出了常见的实体名称。
表2-2 常见的字符实体
在字符实体中，空格是HTML中最普通的字符实体。通常情况下，HTML会删除文档中的空格。假如你在文档中连续输入10个空格，那么HTML会去掉其中的9个。如果使用 ，就可以在文档中增加空格。
4. HTML的颜色表示
在HTML中，颜色有两种表示方式。一种是用颜色的英文名称表示，比如blue表示蓝色，red表示红色；另外一种是用16进制的数值表示RGB的颜色值。
RGB颜色的表示方式为#rrggbb。其中，rr、gg、bb三色对应的取值范围都是00到FF，如白色的RGB值（255,255,255）用#ffffff表示，黑色的RGB值（0,0,0）用#000000表示。
关于颜色的详细介绍见本书的第14.2.1节。
5. HTML标记的书写规范
• 所有标记都要用尖括号（<>）括起来，浏览器将尖括号内的标记解析为HTML命令。
• 标记和属性名不区分大小写，例如，将<head>写成<Head>或<HEAD>都可以。
• 空格或回车在代码中是无效的，插入空格、引号特殊字符需要使用HTML实体。
• 标记中不能有空格，否则浏览器可能无法识别，例如不能将<title>写成<t itle>。
• 采用标记嵌套方式可以为同一个内容应用多个标记。
• 标记中的属性值建议使用双引号或单引号括起来。
2.2 HTML文档的基本结构元素
HTML文档的主要结构如下。
<!DOCTYPE html> <html> <head> … </head> <body> … </body> </html>
在上面的HTML文件结构描述中，第一行是文档类型声明，表明该文档符合HTML5规范，按HTML5标准来解析该文档。
<html>和</html>标记表示该文档是HTML文档。有时也会看到一些省略<html>标记的文档，这是因为.html或.htm文件被Web浏览器默认为是HTML文档。
<head>和</head>标记表示的是文档头部信息，一般包括标题和主题信息，该部分信息不会显示在页面正文中。也可以在其中嵌入其他标记，如文件标题/编码方式等属性。一些CSS样式定义、JavaScript脚本也可以放到文档的头部。
<body>和</body>标记是网页的主体信息，是显示在页面上的内容，各种网页元素，包括文字、表格和图片等信息都将放入这个标记内。如果为body元素设置CSS样式，还可以实现背景、边距、字体等样式的变化。
2.3 HTML5新增的结构元素
前面介绍的html、head、body等元素都是基本的HTML结构元素。一些复杂的网页布局，往往需要使用DIV+CSS实现。为了使文档结构更加清晰明确，容易阅读，HTML5增加了几个与页眉、页脚、内容等文档结构相关联的结构元素。
2-2 理解Section的定义
2.3.1 用DIV描述的网页布局
div元素可以用于页面布局。一个典型的用div描述的页面布局如图2-1所示。下面的代码清单给出了页面的结构定义，CSS样式定义部分将在后面章节中介绍。
图2-1 div描述的页面布局
<body> <div id="header">……</div> <div id="nav">……</div> <div id="article">……</div> <div id="aside">……</div> <div id="footer">……</div> </body>
div元素本身是一个容器，其中承载着需要表示的内容，在上面的布局代码中，不同的div块通过后面的id属性来表明其含义，div本身不含任何语义特性，HTML5在这方面做了完善。如果用HTML5来描述，代码清单如下。在2.3.2节将会对新增元素进行详细解释。
<body> <header></header> <nav></nav> <article></article> <aside></aside> <footer></footer> </body>
2.3.2 HTML5增加的结构元素
HTML5增加了article、section、nav、aside、header、footer等布局元素，以实现更好的语义解释。但这些结构元素定义的是增强了语义的div块，是HTML页面按逻辑进行分割后的单位，并没有显示效果。和div一样，如果没有对其使用CSS样式定义，即使删除这些结构元素，也不影响页面的显示效果。
2-3 HTML5新增的主体结构元素
1. article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。例如，一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，页面中主体部分或其他任何独立的内容都可以用article来描述。
除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。如果article描述的结构中还有不同层次的独立内容，article元素是可以嵌套使用的，嵌套时，内层的内容在原则上应当与外层的内容相关联。
示例2-1是一个使用article元素描述的页面结构，显示结果如图2-2所示，其中的header元素、footer元素将在后面介绍。如果删除这几个结构元素，页面显示效果是没有变化的。
图2-2 使用article元素描述的页面
<!-- demo0201.html -->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>article元素</title>
</head>
<body>
<article>
<header>
<h1>旅游产品</h1>
<p>发布机构: 大连市旅游局</p>
</header>
<p><b>市内旅游</b> ，包括广场游、滨海游、公园游、老建筑游和特色景点游等。</p>
<p><b>海岛旅游</b> ，包括海王九、旅顺蛇岛、棒槌岛、海猫岛、獐子岛等。</p>
<footer>
<p>
<small>著作权归***公司所有。</small>
</p>
</footer>
</article>
</body>
2. section元素
section元素用于定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。但section元素不是一个普通的容器元素，如果一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
section元素可以这样理解：section元素中的内容可以单独存储到数据库中或输出到Word文档中。section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，但要避免与“有完整、独立的内容”的article元素混淆。实际应用时，section元素和article元素有时很难区分。事实上，在HTML5中，article元素可以看成是一种特殊类型的section元素。section元素强调分段或分块，article强调独立性和整体性。示例2-2是关于section元素的一个应用，这个案例也包括了与article元素的比较，显示结果如图2-3所示。
图2-3 使用article和section元素描述的页面
<!-- demo0202.html -->
<!DOCTYPE html>
<head>
<meta charset="utf-8 ">
<title>article元素与section元素</title>
</head>
<body>
<article>
<header>
<h1>旅游产品</h1>
<p>发布机构: 大连市旅游局</p>
</header>
<section>
<h2>市内旅游</h2>
<p>包括广场游、滨海游、公园游、老建筑游和特色景点游等。</p>
</section>
<section>
<h2>海岛旅游</h2>
<p>包括海王九、旅顺蛇岛、棒槌岛、海猫岛、獐子岛等</p>
</section>
<footer>
<p>
<small>著作权归***公司所有。</small>
</p>
</footer>
</article>
</body>
在这个例子中，article元素包含了section元素，这不是固定模式。实际上，经常有section元素包含article元素的情况，主要看是强调分块还是强调独立性。关于section元素的使用可以参考下面的规则。
• section元素不是用作设置样式的页面容器，如果需要承载内容并需要设置样式，div元素是一个更好的选择。
• 如果article元素、aside元素或nav元素更符合使用场景或语义描述，就不要使用section元素。
• section元素内部应当包括有标题的定义。
3. nav元素
nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分，nav元素使html代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。但并不是所有的链接组都要被放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。例如，页脚中的服务条款、首页、版权声明等也可以是一组链接，将其放入footer元素中更为合适。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。
示例2-3是一个nav元素的使用示例，在这个示例中，一个页面由几部分组成，每个部分都带有链接，但只将最主要的链接放入了nav元素中。显示结果如图2-4所示。
图2-4 使用了article、section和nav等元素描述的页面
<!-- demo0203.html -->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>nav元素示例</title>
</head>
<body>
<h1>大连旅游</h1>
<nav>
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#">问题反馈</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>旅游产品</h1>
<nav>
<ul>
<li><a href="snly">市内旅游</a></li>
<li><a href="hdly">海岛旅游</a></li>
...more...
</ul>
</nav>
</header>
<article id="snly">
<section>
<h1>人民广场</h1>
<p>位于大连市中心……</p>
</section>
...more...
</article>
<article id="hdly">
<section>
<h1>棒槌岛</h1>
<p>位于滨海东路……</p>
</section>
...more...
<footer>
<p>
<a href="edit">编辑</a> |
<a href="delete">删除</a> |
<a href="rename">重命名</a>
</p>
</footer>
</article>
<footer>
<p>
<small>版权所有：XX公司</small>
</p>
</footer>
</body>
在上述代码中，第一个nav元素用于页面导航，将页面跳转到其他页面上去（跳转到网站主页或开发文档目录页面）；第二个nav元素放置在article元素中，用作这篇文章中两个组成部分的页内导航。
nav元素的使用可以参考下面的规则。
• 传统导航条。主流网站页面上都有不同层级的导航条，其作用是将当前画面跳转到网站的其他页面上去。
• 侧边栏导航。主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去。
• 页内导航。页内导航的作用是在本页面几个主要的组成部分之间进行跳转。
• 翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。
4. aside元素
aside元素用来承载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告、成组的链接、侧边栏等。
aside元素主要有以下两种使用方法。
• 被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章相关的参考资料、名词解释等。
• 在article元素之外使用，作为页面或站点全局的附属信息，典型的形式是侧边栏，其中的内容可以是友情链接、文章列表、帖子等。
5. header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区域的标题，但也可以包括表格、logo图片等内容。整个页面的标题应该放在页面的开头，用如下所示的形式书写页面的标题更有助于理解文档的结构。
<header><hl>页面标题</hl></header>
需要强调，一个页面内并未限制header元素的个数，可以拥有多个，可以为每个内容区域添加一个header元素。
6. footer元素
footer元素一般作为其上层容器元素的脚注。footer包括的是脚注信息，如作者、相关阅读链接及版权信息等。在HTML5出现之前，编写页脚元素的代码如下。
<div id="footer"> <ul> <li>版权信息</li> <li>站点地图</li> <li>联系方式</li> </ul> </div>
但是到了HTML5之后，使用更加语义化的footer元素来替代，代码如下。
<footer> <ul> <li>版权信息</li> <li>站点地图</li> <li>联系方式</li> </ul> </footer>
与header元素一样，一个页面中也未限制footer元素的个数。同时，可以为article元素或section元素添加footer元素。
7. time元素
time元素是HTML5的一个语义化元素，主要目的是使页面语义描述更清晰，使网络搜索引擎（百度、谷歌）能很好地理解网页页面。使用time元素，可以插入计算机能够识别的日期和时间，同时又能以一种可读的方式显示给用户。使用time元素，可以为内容添加如发布时间、事件发生时间等信息，还可以为使用其他的技术（比如说日历系统）提供支持。time元素有两个可选属性。
• datetime：终端用户浏览的内容写在time标记之间，而计算机可以识别datetime值，例如，datetime="2015-04-09T16:00Z"。“T”是日期与时间的分隔；“Z”代表的是对机器编码时，使用UTC标准时间。
• pubdate：布尔属性。它代表的是其最近的父article元素内容的发布日期和时间，如没找到任何父article元素，则指向整个文档。每个article元素只能拥有一个带pubdate的time元素。
time元素的使用频率低，可以定义很多格式的日期和时间。下面是用time元素表示的各种格式的时间。
<body> <time datetime="2018-3-6">2018年3月6日</time> <!-- datetime属性中日期与时间之间要用"T" 分隔，"T'表示时间 --> <time datetime="2018-3-6T20:00">2018年3月6日20:00</time> <!-- 时间加上"Z"表示给机器编码时使用UTC标准时间 --> <time datetime="2018-3-6T20:00Z">2018年3月6日20:00</time> </body>
示例2-4使用了time元素和pubdate属性。
<!-- demo0204.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>time</title>
</head>
<body>
<article>
<footer>
<p>This article was published on
<time pubdate datetime="2018-03-01T16:00Z">lst March 2018 at 4pm</time>
</p>
</footer>
</article>
<section>
<h1>Welcome to FS2016</h1>
<p>The International Conference on Fuzzy System is scheduled to be held on
<time datetime="2018-12-1">lst December 2018</time>
</p>
<p>Publish Date:
<time pubdate datetime="2018-12-3">3rd December 2018</time>
</p>
</section>
</body>
</html>
8. hgroup元素
hgroup元素从语义化上看为标题组，一般作为header标签的子元素，一个内容区域中包括了主标题和至少一个子标题才使用hgroup。观察下面的代码。
<article> <header> <hgroup> <h1>about HTML5</h1> <h2>about Webworker</h2> <h3>about Websocket</h3> </hgroup> </header> <p>Html5中的新功能很多……</p> </article>
9. address元素
address元素从语义上看为地址，主要用于在文档中呈现联系信息，通常内容为作者、网站链接、电子邮箱、地址、电话号码等。address元素只是一个语义元素，使用频率低。
<address> <a href="">作者：张三丰</a> <a href="">地址：武当山</a> <a href="">联系方式：1247</a> </address>
10. main元素
main元素表示网页中的主要内容。主要内容区域指与网页主题或Web应用主要功能直接相关的内容。main定义的内容应该为每一个网页中所特有的内容，不可以包含整个网站的导航条、版权信息、网站LOGO、公共搜索表单等整个网站内部的共同内容。
需要注意，每个网页只能放置一个main元素。不能将main元素放置在任何article、aside、footer、header或nav元素内部。
示例2-5使用了main元素描述网页的主要内容。
<!-- demo0205.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Using main</title>
</head>
<body>
<header><h1>main Test</h1></header>
<nav>
<ul>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</nav>
<main>
<article>
<h1>main元素</h1>
每个网页内部只能放置一个main元素。不能将main元素放置在任何article、aside、footer、
header或nay元素内部。
</article>
<aside>
More information
</aside>
</main>
<footer>Copyright 2015</footer>
</body>
</html>
思考与练习
1. 简答题
（1）简述HTML文档的基本结构元素的功能。
（2）HTML5增加的article、section、nav、aside等结构元素功能。
（3）HTML为什么要使用字符实体？列举出5个常用的字符实体名称。
2. 操作题
（1）参照示例2-2设计一个网页，比较article元素与section元素的区别。
（2）设计一个网页，在其中显示HTML的部分字符实体。
（3）下载并安装IE浏览器、Chrome浏览器、Firefox浏览器，在http://html5test.com上测试不同类型的浏览器对HTML5的支持度。