- Div+CSS网页样式与布局从入门到精通
- 刘西杰 夏晨
- 519字
- 2020-06-27 12:03:27
第2章HTML入门基础
在当今社会，网络已成为人们生活的一部分，网页设计技术已成为学习计算机的重要内容之一。目前大部分网页都是采用可视化网页编辑软件来制作的，但是无论采用哪一种网页编辑软件，最后都是将所设计的网页转化为HTML。HTML是搭建网页的基础语言，如果不了解HTML，就不能灵活地实现想要的网页效果。本章就来介绍HTML的基本概念和编写方法以及浏览HTML文件的方法，使读者对HTML有个初步的了解，从而为后面的学习打下基础。
学习目标
HTML标签
HTML5简介
HTML5新增的主体结构元素
HTML5新增的非主体结构元素
2.1 HTML标签
由于HTML是网页制作的标准语言，所以无论什么样的网页制作软件都提供直接以HTML的方式来制作网页的功能。即使用所见即所得的编辑软件来制作网页，最后生成的也都是HTML文件。HTML语言有时可以实现所见即所得工具所不能实现的功能。
2.1.1 段落标签
为了文本排列的整齐和清晰，文字段落之间经常用<P>和</P>来做标签。段落的开始由<P>来标记，段落的结束由</P>来标记，</P>是可以省略的，因为下一个<P>的开始就意味着上一个<P>的结束。<P>标签还有一个属性align，它用来指明字符显示时的对齐方式，一般值有center、left和right三种。下面是一个段落标签<P>的实例，在浏览器中的预览效果如图2-1所示。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>段落</title>
</head>
<body>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="240" align="center">
<p>五台山位于山西省忻州市五台县境内，位列中国佛教四大名山之首。五台山位于山西省东北部，与浙江
普陀山、安徽九华山、四川峨眉山共称“中国佛教四大名山”。</p>
<p>五台山所在的山西处于黄土高原，其中五座高峰，山势雄伟，连绵环抱，方圆达250公里，总面积592.88
平方公里。</p>
<p>五台山最低处海拔仅624米，最高处海拔达3061.1米，为山西省最高峰。台顶雄旷，层峦叠嶂，峰
岭交错，挺拔壮丽，大自然为其造就了许多独特的景观。<BR>
</p>
</p>
</td>
</tr>
</table>
</body>
</html>
图2-1 段落效果
2.1.2 文本标签
<font></font>是一对很有用的标签，它可以对输出文本的字号大小、颜色进行随意改变，这些改变主要是通过对它的两个属性size和color的控制来实现的。size属性用来改变字体的大小，color属性则用来改变文本的颜色。
用于文字大小设置的标签是font，font有一个属性size，通过指定size属性可以设置字号大小。可以在size属性值之前加上“+”、“−”字符，来指定相对于字号初始值的增量或减量。其属性及属性值如表2-1所示。
表2-1 文字标签
下面是一个文字标签<font>的实例，在浏览器中的预览效果如图2-2所示。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文本</title>
</head>
<body>
<table width="90%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td><font color="#CC3300" size="+3" face="宋体"><b>18号字体</b></font></td>
</tr>
<tr>
<td><font color="#669900" size="+4" face="宋体"><i>24号字体</i></font></td>
</tr>
<tr>
<td><font color="#00CCFF" size="+5" face="宋体"><b>36号字体</b></font></td>
</tr>
</table>
</body>
</html>
图2-2 文本效果
2.1.3 超链接标签
HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，Web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其他页面。超文本具有的链接能力，可层层链接相关文件，这种具有超级链接能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，通过它们可享受丰富多彩的多媒体世界。
<a href=""></a>
本标签对应的属性“href”无论如何都是不可缺少的，可在标签对之间加入需要链接的文本或图像。href的值可以是URL形式，即网址或相对路径，也可以是Mailto形式，即发送E-mail形式。
对于第一种情况，其语法为<a href="URL"></a>，这就能创建一个超文本链接了，例如，<a href="123.html">大家好！</a>。对于第二种情况，其语法为<a href="Mailto: Email"></a>，这就创建了一个自动发送电子邮件的链接，Mailto:后边紧跟想要发送的电子邮件的地址（即E-mail地址），例如，<a href="Mailto:ll@163.com">发电子邮件给我吧！</a>。
此外，<a href=""></a>还具有target属性，此属性用来指明浏览的目标帧。如果不使用target属性，当浏览者单击了链接之后将在原来的浏览器窗口中浏览新的HTML文档。若target的值等于_blank，单击链接后将会打开一个新的浏览器窗口来浏览新的HTML文档，例如，<a href="123.html" target="_blank">大家好！</a>。超链接标签的属性说明如表2-2所示。
表2-2 超链接标签
下面是一个超链接标签< href>的实例，在浏览器中的预览效果如图2-3所示。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接</title>
</head>
<body>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing= "0">
<tr>
<td height="40">
<p><a href="123.html" target="_blank">大家好！</a></p>
<p><a href="Mailto:28607100@QQ.com">发电子邮件给我吧！</a></p>
</td>
</tr>
</table>
</body>
</html>
图2-3 超链接效果
2.1.4 图像标签
<img>标签并不是真正地把图像加入到HTML文档中，而是将标签对的src属性赋值，这个值是图像文件的文件名，当然包括路径，这个路径可以是相对地址，也可以是绝对地址。实际上，<img>标签就是通过路径将图像文件嵌入到文档中。所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的相对位置所形成的路径。假如HTML文件与图像文件（文件名假设是tu.gif）在同一个目录下，则可以将代码写成<img src="tu.gif">；如图像文件放在当前的HTML文档所在目录的一个子目录（子目录名假设是images）下，则代码应为<img src="images/ tu.gif">。
src属性在<img>标签中是必须赋值的，是标签中不可缺少的一部分。除此之外，<img>标签还有alt、align、border、width和height属性。
align属性是图像的对齐方式。
border属性是图像的边框，可以取大于或者等于0的整数，默认单位是像素。
width和Height属性是图像的宽和高，默认单位也是像素。
alt属性是当鼠标移动到图像上时显示的文本。
下面是一个图像标签<img>的实例，在浏览器中的预览效果如图2-4所示。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图像</title>
</head>
<body>
<img src="images/tu.gif" alt=" 图 像 " width="400" height="304" border="0"
align="middle">
</body>
</html>
图2-4 图像效果图
2.1.5 表格标签
表格标签对于制作网页是很重要的，现在很多网页都使用多重表格。利用表格可以实现各种不同的布局方式，而且可以保证当浏览者改变页面字号大小的时候保持页面布局，还可以任意地进行背景和前景颜色的设置。<table></table>标签用来创建表格，表格标签的属性和用途如表2-3所示。
表2-3 表格标签
下面是一个表格标签<table>的实例，在浏览器中的预览效果如图2-5所示。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格</title>
</head>
<body>
<table width="400" border="1" align="center" cellpadding="4" cellspacing="1"
bordercolor="#996600">
<tr>
<td height="30" align="center" bgcolor="#FFFF66">省份</td>
<td align="center" bgcolor="#66CCFF">山东</td>
<td align="center" bgcolor="#66CCFF">广东</td>
<td align="center" bgcolor="#66CCFF">浙江</td>
<td align="center" bgcolor="#66CCFF">江苏</td>
</tr>
<tr>
<td height="30" align="center" valign="middle" bgcolor="#FFFF66">城市</td>
<td align="center" bgcolor="#FFCCFF">济南</td>
<td align="center" bgcolor="#FFCCFF">广州</td>
<td align="center" bgcolor="#FFCCFF">杭州</td>
<td align="center" bgcolor="#FFCCFF">南京</td>
</tr>
</table>
</body>
</html>
图2-5 表格效果图
2.2 HTML5简介
HTML5自诞生以来，作为新一代的Web标准，越来越受开发人员及设计师的欢迎。HTML5有强大的兼容性，可以一次开发、到处使用，因此大大减少了跨平台开发人员的数量及成本，特别是在如今日新月异的移动时代。
2.2.1 HTML5基础
HTML5是2010年正式推出的，引起了世界上各大浏览器开发商的极大热情，如Fire Fox、Chrome、IE9等。那HTML5为什么会如此受欢迎呢？
在新的HTML5语法规则当中，部分JavaScript代码将被HTML5的新属性所替代，部分Div的布局代码也将被HTML5变为更加语义化的结构标签，这使得网站前段的代码变得更加的精炼、简洁和清晰，让代码所要表达的意思也更一目了然。
HTML5是一种设计来组织Web内容的语言，其目的是通过创建一种标准的和直观的标记语言来把Web设计和开发变得容易起来。HTML5提供了各种切割和划分页面的手段，允许创建的切割组件不仅能用来逻辑地组织站点，而且能够赋予网站聚合的能力。这是HTML5富于表现力的语义和实用性美学的基础，HTML5赋予设计者和开发者各种层面的能力来向外发布各式各样的内容，从简单的文本内容到丰富的、交互式的多媒体无不包括在内。如图2-6所示，HTML5技术用来实现动画特效。
图2-6 HTML5技术用来实现动画特效
HTML5提供了高效的数据管理、绘制、视频和音频工具，促进了Web上和便携式设备的跨浏览器应用的开发。HTML5具有更大的灵活性，支持开发非常精彩的交互式网站。其还引入了新的标签和增强性的功能，其中包括了优雅的结构、表单的控制、API、多媒体、数据库支持和显著提升的处理速度等。
HTML5中的新标签都是高度关联的，标签封装了它们的作用和用法。HTML的过去版本更多的是使用非描述性的标签，然而，HTML5拥有高度描述性、直观的标签，其提供了丰富的能够立刻让人识别出内容的内容标签。例如，被频繁使用的<Div>标签已经有了两个增补进来的<section>和<article>标签。<video>、<audio>、<canvas>和<figure>标签的增加也提供了对特定类型内容的更加精确的描述。
2.2.2 向后兼容
我们之所以学习HTML5，最主要的原因之一是现今的绝大多数浏览器都支持它。即使在IE6上，你也可以使用HTML5并慢慢转换旧的标记。你甚至可以通过W3C验证服务来验证HTML5代码的标准化程度（当然，这也是有条件的，因为标准仍在不断演进）。
如果你用过HTML或XML，肯定会知道文档类型（doctype）声明。其用途在于告知验证器和编辑器可以使用哪些标签和属性，以及文档将如何组织。此外，众多Web浏览器会通过它来决定如何渲染页面。一个有效的文档类型常常通知浏览器用“标准模式”来渲染页面。
以下是许多网站使用的相当冗长的XHTML 1.0 Transitional文档类型。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
相对于这一长串，HTML5的文档类型声明出乎意料地简单。
<!doctype html>
把上述代码放在文档开头，就表明在使用HTML5标准。
2.2.3 更加简化
在HTML5中，大量的元素得以改进，并有了更明确的默认值。我们已经见识了文档类型的声明是多么简单，除此之外还有许多其他输入方面的简化。例如，以往我们一直这样定义JavaScript的标签。
<script language="javascript" type="text/javascript">
但在HTML5中，我们希望所有的<script>标签定义的都是JavaScript，因此，你可以放心地省略多余的属性（指language和type）。
如果想要指定文档的字符编码为UTF-8方式，只需按下面的方式使用<meta>标签即可。
<meta charset="utf-8">
上述代码取代了以往笨拙的，通常靠复制粘贴方式来完成处理的方式。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
2.2.4 HTML 5语法中的3个要点
HTML5中规定的语法，在设计上兼顾了与现有HTML之间最大程度的兼容性。下面就来看看具体的HTML5语法。
1．可以省略标签的元素
在HTML5中，有些元素可以省略标签，具体来讲有三种情况.
（1）必须写明结束标签
area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
（2）可以省略结束标签
li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
（3）可以省略整个标签
HTML、head、body、colgroup、tbody
需要注意的是，虽然这些元素可以省略，但实际上却是隐形存在的。
例如，“<body>”标签可以省略，但在DOM树上它是存在的，可以永恒访问到“document.body”。
2．取得boolean值的属性
取得布尔值（boolean）的属性，例如disabled和readonly等通过默认属性的值来表达“值为true”。
此外，在属性值为true时，可以将属性值设为属性名称本身，也可以将值设为空字符串。
<!--以下的checked属性值皆为true-->
<input type="checkbox" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">
3．省略属性的引用符
在HTML4中设置属性值时，可以使用双引号或单引号来引用。
在HTML5中，只要属性值不包含空格、“<”、“>”“'”“"”“`”“=”等字符，都可以省略属性的引用符。
实例如下。
<input type="text">
<input type='text'>
<input type=text>
2.3 新增的主体结构元素
为了使文档的结构更加清晰明确，容易阅读，HTML5中增加了很多新的结构元素，如页眉、页脚、内容区块等结构元素。
2.3.1 实例应用——article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。
下面以一篇文章为例讲述article元素的使用方法，具体代码如下。
<article>
<header>
<h1>学生掌握学习方法很必要</h1>
<p>发表日期: <time pubdate="pubdate">2014/12/09</time></p>
</header>
<p> 有很多小学生上学期间，白天在学校读书，晚上还要参加各种各样的补习班，既浪费了精力
又浪费了财力，其结果成绩进步不明显；也有很多家长都有这样那样的疑惑，自己的孩子并不比别人家的孩子笨，
为什么成绩就不如人家呢？<br>
同样的学校、同样的老师、同样的课本、同样的试卷，为什么别的孩子轻松拿名次，自己的孩子却
停滞不前，名次总在中下游徘徊？英国生物学家、进化论的奠基人达尔文做了很好的回答：“最有价值的知识是
关于方法的知识。”学生感觉学习吃力，成绩不理想，归根结底就是学习方法出了问题。</p>
<footer>
<p><small>版权所有@信诚教育</small></p>
</footer>
</article>
在header元素中嵌入了文章的标题部分，在h1元素中的是文章的标题“学生掌握学习方法很必要”，文章的发表日期在p元素中。在标题下部的p元素中的是文章的正文，在结尾处的footer元素中的是文章的版权。对这部分内容使用了article元素，在浏览器中的效果如图2-7所示。
图2-7 article元素
article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。
<article>
<h1>article表示插件</h1>
<object>
<param name="allowFullScreen" value="true">
<embed src="#" width="500" height="400"></embed>
</object>
</article>
一个网页中可能有多个独立的article元素，每一个article元素都允许有自己的标题与脚注等从属元素，并允许对自己的从属元素单独使用样式。如一个网页中的样式如下所示。
header{
display:block;
color:green;
text-align:center;
}
aritcle header{
color:red;
text-align:left;
}
2.3.2 实例应用——section元素
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。section元素并非是一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用Div而非section元素。
<section>
<h3>广州</h3>
<p>广州，简称穗，别称羊城、花城，是广东省会、副省级市，中国国家中心城市，世界著名的港口城市，
国家重要的经济、金融、贸易、交通、会展和航运中心。从秦朝开始，广州一直是郡治、州治、府治的行政中心。
两千多年来一直都是华南地区的政治、军事、经济、文化和科教中心。... ...</p>
</section>
下面是一个带有section元素的article元素例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>section元素</title>
</head>
<body>
<article>
<h1>广东</h1>
<p>广东省，以岭南东道、广南东路得名，简称“粤”，省会广州，是中国大陆南端沿海的一个省份，
位于南岭以南，南海之滨，下辖21个省辖市。广东省也是中国人口最多，社会、文化最开放的省份，广东省已
成为中国第一经济大省，经济总量占全国的1/8。... ...</p>
<section>
<h3>广州</h3>
<p>广州，简称穗，别称羊城、花城，是广东省会、副省级市，中国国家中心城市，世界著名的港
口城市，国家重要的经济、金融、贸易、交通、会展和航运中心。从秦朝开始，广州一直是郡治、州治、府治的
行政中心。两千多年来一直都是华南地区的政治、军事、经济、文化和科教中心。... ...</p>
</section>
<section>
<h3>深圳</h3>
<p>深圳，别称鹏城，广东省辖市，中国国家区域中心城市（华南），地处广东省南部，珠江口东
岸，与香港一水之隔，东临大亚湾和大鹏湾；西濒珠江口和伶仃洋；南边深圳河与香港相连；北部与东莞、惠州
两城市接壤。
深圳是中国改革开放以来所设立的第一个经济特区，是中国改革开放的窗口。... ...</p>
</section>
<section>
<h3>珠海</h3>
<p>珠海，珠江口西岸的核心城市，经济特区，珠江三角洲南端的一个重要城市，位于广东省珠江
口的西南部，区位优越，是珠三角中海洋面积最大、岛屿最多、海岸线最长的城市，素有“百岛之市”之
称。... ...</p>
</section>
</article>
</body>
</html>
从上面的代码可以看出，首页整体呈现的是一段完整独立的内容，所有内容用article元素包起来。这其中又可分为四段，每一段都有一个独立的标题，使用了三个section元素为其分段，这样可以使文档的结构显得清晰。在浏览器中的效果如图2-8所示。
图2-8 带有section元素的article元素实例
section元素的作用是对页面上的内容进行分块，或者说是对文章进行分段，不要与“有着自己的完整的、独立的内容”的article元素混淆。article元素和section元素有什么区别呢？
在HTML 5中，article元素可以看成是一种特殊种类的section元素，它比section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。如果一块内容相对来说比较独立、完整的时候，应该使用article元素，但是如果想将一块内容分成几段的时候，应该使用section元素。
2.3.3 实例应用——nav元素
nav元素代表页面中的导航区域。它由一个链接列表组成，这些链接指向本站或本应用内的其他页面或版块。
一直以来，习惯于使用形如<Div id="nav">或<ul id="nav">这样的代码来编写页面的导航。在HTML5中，可以直接将导航链接列表放到<nav>标签中。
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">关于我们 </a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
导航，顾名思义，就是引导的路线，那么具有引导功能的都可以认为是导航。导航可以是页与页之间导航，也可以是页内的段与段之间导航。
<!doctype html>
<title>页面之间导航</title>
<header>
<h1>网站页面之间导航<h1>
<nav>
<ul>
<li><a href="index.html">返回首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="lianxi.html">联系我们</a></li>
</ul>
</nav>
</header>
这个实例是页面之间的导航，nav元素中包含了三个用于导航的超级链接，即“返回首页”“关于我们”和“联系我们”。该导航可用于全局导航，也可放在某个段落中作为区域导航。其运行结果如图2-9所示。
图2-9 页面之间导航
下面的实例是页内导航，其运行结果如图2-10所示。
<!doctype html>
<title>段内导航</title>
<header>
</header>
<article>
<h2>文章的标题</h2>
<nav>
<ul>
<li><a href="#p1">段一</a></li>
<li><a href="#p2">段二</a></li>
<li><a href="#p3">段三</a></li>
</ul>
</nav>
<p id=p1>段一</p>
<p id=p2>段二</p>
<p id=p3>段三</p>
</article>
图2-10 页内导航
nav元素使用在哪些位置呢？
顶部传统导航条：现在的主流网站上都有不同层级的导航条，其作用是将当前页面跳转到网站的其他主要页面上去。图2-11所示的是顶部传统网站导航条。
图2-11 顶部传统网站导航条
侧边导航：现在的很多企业网站和购物类网站上都有侧边导航，图2-12所示的是左侧导航。
图2-12 左侧导航
页内导航：页内导航的作用是在本页面几个主要的组成部分之间进行跳转，图2-13所示的是页内导航。
图2-13 页内导航
在HTML5中不要用menu元素代替nav元素。过去有很多Web应用程序的开发员喜欢用menu元素进行导航，menu元素是用在Web应用程序中的。
2.3.4 aside元素
aside元素用于标记文档的相关内容，比如醒目引用、边条和广告等。<aside>元素的内容应与元素周围内容相关。
aside元素主要有以下两种使用方法。
（1）包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。
<article>
<h1>…</h1>
<p>…</p>
<aside>…</aside>
</article>
（2）在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是友情链接、文章列表、广告单元等。代码如下所示，运行代码的结果如图2-14所示。
<aside>
<h2>新闻信息</h2>
<ul>
<li>公司新闻</li>
<li>业内信息</li>
</ul>
<h2>产品类型</h2>
<ul>
<li>棉衣外套</li>
<li>时尚裙子</li>
<li>鞋帽内衣</li>
</ul>
</aside>
图2-14 aside元素实例
2.4 新增的非主体结构元素
除了以上几个主要的结构元素之外，HTML5中还增加了一些表示逻辑结构或附加信息的非主体结构元素。
2.4.1 实例应用——header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，header内也可以包含其他内容，例如表格、表单或相关的Logo图片，并且确实在Web上被反复使用。
在架构页面时，整个页面的标题常放在页面的开头，header标签一般都放在页面的顶部。可以用如下所示的形式书写页面的标题。
<header>
<h1>页面标题</h1>
</header>
在一个网页中可以拥有多个header元素，可以为每个内容区块加一个header元素。
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文</p>
</article>
在HTML5中，一个header元素通常包括至少一个headering元素（h1～h6），也可以包括hgroup、nav等元素。
下面是一个网页中的header元素使用实例，运行代码的结果如图2-15所示。
<header>
<hgroup>
<h1>佛教名山之首五台山</h1>
<p>五台山位于山西省忻州市五台县境内，位列中国佛教四大名山之首。五台山位于山西省东北部，隶
属忻州市五台县，西南距省会太原市230公里，与浙江普陀山、安徽九华山、四川峨眉山共称“中国佛教
四大名山”。……</p>
</hgroup>
<nav>
<ul>
<li>地质地貌</li>
<li>气候特点</li>
<li>自然资源</li>
<li>人文历史</li>
<li>旅游信息</li>
</ul>
</nav>
</header>
图2-15 header元素使用实例
2.4.2 实例应用——hgroup元素
hgroup元素用于组织具有一些逻辑联系的多级标题，例如次级标题、副标题以及标语口号等。hgroup元素通常会将h1～h6元素进行分组，一个内容区块的标题及其子标题算一组。
通常，如果文章只有一个主标题，是不需要hgroup元素的。但是，如果文章有主标题，主标题下有子标题，就需要使用hgroup元素了。如下所示的是hgroup元素的实例代码，运行代码的结果如图2-16所示。
<article>
<header>
<hgroup>
<h1>北京旅游景点介绍</h1>
<h2>北京植物园</h2>
</hgroup>
<p>
<time datetime="2013-05-20">2014年12月20日</time></p>
<p>北京植物园位于西山卧佛寺附近，1956年经国务院批准建立，面积400公顷，是以收集、展示和
保存植物资源为主，集科学研究、科学普及、游览休憩、植物种质资源保护和新优植物开发功能为一体的综合植
物园。北京植物园由植物展览区、科研区、名胜古迹区和自然保护区组成，园内收集展示各类植物10000余种（含
品种）150余万株。</p>
</header>
</article>
如果有标题和副标题，或在同一个header元素中加入了多个标题，那么就需要使用hgroup元素。
图2-16 hgroup元素实例
2.4.3 实例应用——footer元素
footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。footer元素和header元素的使用方法基本一样，可以在一个页面中使用多次，如果在一个区段后面加入footer元素，那么它就相当于该区段的尾部了。
在HTML5出现之前，通常使用类似下面的代码来写页面的页脚。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="gb2312">
<title><span class="wp_keywordlink_affiliate">
<a href="" target="_blank"> footer元素</a></span></title>
<style type="text/css">
body{
background-color:#9ACDCD;
}
Div{
display: -moz-box;
display: -webkit-box;
-moz-box-pack:center;
-webkit-box-pack:center;
width:100%;
}
ul{
display: -moz-box;
display: -webkit-box;
list-style:none;
list-style-image: url(side.gif);
}
li{
width:100px;
}
</style>
</head>
<Div id="footer">
<ul>
<li>交通路线</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
<Div>
在HTML5中，这种方式将不再使用，而用更加语义化的footer来写。
<!DOCTYPE html>
<meta charset="utf-8">
<title>footer<span class="wp_keywordlink_affiliate"><title>
<a href=" " target="_blank">footer元素</a></span>
<style type="text/css">
body{
background-color:#9ACDCD;
}
footer{
display: -moz-box;
display: -webkit-box;
-moz-box-pack:center;
-webkit-box-pack:center;
width:100%;
}
ul{
display: -moz-box;
display: -webkit-box;
list-style:none;
list-style-image: url(side.gif);
}
li{
width:100px;
}
</style>
<footer>
<ul>
<li>交通路线</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
footer元素既可以用作页面整体的页脚，也可以作为一个内容区块的结尾，例如可以将<footer>直接写在<section>或<article>中。
在article元素中添加footer元素。
<article>
文章内容
<footer>
文章的脚注
</footer>
</article>
在section元素中添加footer元素。
<section>
分段内容
<footer>
分段内容的脚注
</footer>
</section>
2.4.4 实例应用——address元素
address元素用于标记article元素或者整个文档的联络信息。address元素通常位于文档的末尾，用来在文档中呈现联系信息，包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等。address不只是用来呈现电子邮箱或真实地址这样的“地址”概念，而应该包括与文档创建人相关的各类联系方式。
下面是address元素实例。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>address元素实例</title>
</head>
<body>
<address>
<a href="mailto:webmaster001@example.com">webmaster</a><br />
北京时尚科技公司<br />
电话：010-12345678<br />
</address>
</body>
</html>
在浏览器中显示地址的方式与其周围的文档不同，在IE、Firefox和Safari等浏览器中以斜体显示地址，如图2-17所示。
图2-17 address元素实例