详情
本书讲解了如何使用HTML、CSS和JavaScript来设计、开发和维护世界级水准的Web站点。本书采用直观、循序渐进的方式，同时结合大量实例讲解了如何使用HTML开发站点框架，然后是如何使用CSS设计站点的布局和版式，最后介绍了使用JavaScript和jQuery与网站进行交互的方法。本书适合对Web开发感兴趣的初学者阅读。
书名：HTML、CSS和JavaScript入门经典（第2版）
ISBN：978-7-115-40594-4
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 ［美］Julie Meloni
译 陈宗斌
责任编辑 傅道坤
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
Julie C. Meloni: Sams Teach Yourself HTML, CSS and JavaScript All in One(2nd Edition)
ISBN: 0672337142
Copyright © 2015 by Pearson Education, Inc.
Authorized translation from the English languages edition published by Pearson Education, Inc.
All rights reserved.
本书中文简体字版由美国Pearson公司授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。
版权所有，侵权必究。
本书采用直观的、逐步深入的方法介绍如何使用HTML、CSS（Cascading Style Sheet，层叠样式表）和JavaScript设计、创建和维护世界级的网站，并且提供了清晰的指导。
本书信息丰富，涵盖了HTML、CSS和JavaScript的基础知识和高级应用，还介绍了如何组织和管理网站以及帮助人们找到你的Web页面的知识。在每一章末尾还配有相应的问答题和作业，可以帮助你检验所学的知识。
本书示例丰富，操作步骤简洁、明了，非常适合于从事Web设计和网站开发的初学者阅读，对于有一定经验的读者，也有很大的参考价值。
Julie C. Meloni是一位居住在美国华盛顿特区的软件开发经理和技术顾问。她编写过多本图书和若干篇文章，都是关于基于Web的程序设计语言和数据库等主题的，包括畅销书Sams Teach Yourself PHP, MySQL and Apache All in One。
在本章中你将学到：
WWW（World Wide Web，万维网）简史；
术语Web页面的含义是什么，为什么这个术语并不总会反映所涉及的全部内容；
怎样把内容从你的个人计算机发送到别人的Web浏览器上；
怎样选择Web托管提供商；
不同的Web浏览器和设备类型可能怎样影响内容；
怎样使用FTP把文件传输到Web服务器上；
应该把文件存放在Web服务器上的什么位置；
在不涉及Web服务器的情况下怎样分发Web内容；
怎样使用其他发布方法，比如博客；
关于测试Web内容的外观和功能的提示。
在学习HTML（Hypertext Markup Language，超文本标记语言）、CSS（Cascading Style Sheets，层叠样式表）和JavaScript的复杂知识之前，获得对技术的稳固理解很重要，它们有助于把这些纯文本文件转换成你在计算机或手持设备上浏览WWW时看到的丰富的多媒体显示。
例如，如果不使用Web浏览器查看，那么包含标记和客户端代码的HTML和CSS文件将是无用的，并且除非使用Web服务器，否则除你之外的其他人将无法查看你的内容。Web服务器使你的内容可供其他人使用，他们反过来又使用其Web浏览器导航到一个地址并等待服务器向自己发送信息。你将密切地参与这个发布过程，因为你必须创建文件，然后把它们放到服务器上，使它们在第一时间可用，并且必须确保你的内容像预期的那样出现在最终用户面前。
在月球上还没有任何人类足迹的时候，一些有远见的人决定去看看他们是否能够连接几个主要的计算机网络。我将和你分享它们的名称和故事（可以说非常丰富），但是最终的结果是“所有网络之母”，我们称之为Internet。
到1990年，通过Internet访问信息还相当具有技术性。事实上，它是如此困难，以至于那些拥有博士学位的物理学家们在尝试交换数据时也通常会遭受挫折。有这样一位物理学家，即现在非常著名的Tim Berners-Lee爵士，他设计了一种方式，可以通过超文本链接轻松地交叉引用Internet上的文本。
这不是一种新思想，但是他开发的简单HTML却成功地兴盛起来，虽然更多雄心勃勃的超文本项目步履维艰。超文本最初意指以电子形式存储的文本，并且在页面之间具有交叉引用的链接。它现在是一个更宽泛的术语，指可以链接到其他对象的任何几何对象（文本、图像、文件等）。超文本标记语言（Hypertext Markup Language）是一种用于描述如何组织和链接文本、图形以及包含其他信息的文件的语言。
到1993年，全世界只有100台左右的计算机被配备成提供HTML页面。这些互连的页面被称为WWW（World Wide Web，万维网），并且编写了几个Web浏览器程序，允许人们查看Web页面。由于Web日益普及，几个程序员不久之后编写了可以查看文本以及图形图像的Web浏览器。从此，Web浏览器软件的持续开发以及HTML（和XHTML）语言的标准化带领我们进入了今天的世界，在这个世界里，有超过5亿个Web站点提供数十亿个文本和多媒体文件。
上面几段文字实际上描述了Web发展简史中的一个不同寻常的阶段。今天的大学生从来也不了解WWW不存在的那段时间，并且永远在线的信息和无处不在的计算的思想对我们以后生活的各个方面产生深远的影响。不要把Web内容创建和管理视作少数技术人员（如果你愿意的话，也可以称他们为怪才）所拥有的一组技能，到学完本书时，你将把Web看作是任何人都可以掌握的技能，而不仅限于那些天生的怪才。
注意：
有关WWW发展历史的更多信息，参见关于这个主题的维基百科的文章：http://en.wikipedia.org/wiki/History_of_the_Web。
你可能注意到本书中使用的术语是“Web内容”（Web content），而不是“Web页面”（Web page），我们是有意这样做的。尽管我们谈论的是“访问Web页面”，但是实际的意思是“查看我们计算机上的一个地址上的所有文本和图像”。我们阅读的文本和查看的图像都是通过Web浏览器呈现的。浏览器将按照文件中的指示来呈现它们。
这些文件可以包含被HTML代码标记或包围的文本，告诉浏览器如何显示文本——作为标题、作为段落或者以红色字体显示等。一些HTML标记告诉浏览器显示图像或视频文件，而不是纯文本，由此得出以下结论：发送给Web浏览器的是不同类型的内容，因此仅仅称作Web页面将无法完全涵盖它们。我们在这里代之以使用Web内容这个术语，以涵盖文本、图像、音频、视频以及在线发现的其他媒体的完整范围。
在后面几章中，你将学习链接到或创建在Web站点中发现的各类多媒体Web内容的基础知识。此时，你只需记住你正在控制用户在访问你的Web站点时所查看的内容。从一个文件开始，其中包含要显示的文本或者告诉服务器给用户的Web浏览器发送一幅图形，你将不得不计划、设计和实现最终构成Web状态（Web presence）的所有部分。如你将在整本书中所学到的，它不是一个困难的过程，只要在学习过程中理解每一个小步骤即可。
就其最基本的形式而言，Web内容开始于一个包含HTML标记的简单文本文件。在本书中，你将学习和创建符合标准的HTML5标记。编写符合标准的代码的一个好处是：在将来，将无需担心必须要回顾代码，以从根本上改变它。这样，你的代码将（很可能）总是适用的，只要Web浏览器遵守标准即可（在一段较长的时间内有望如此）。
在许多不同的位置会发生多个过程，最终将产生你可以查看的Web内容。这些过程将发生得非常快（以毫秒级的速度），并且是在幕后发生的。换句话说，尽管我们可能认为我们所做的全部事情是打开Web浏览器，输入一个Web地址，并立即查看所请求的内容，后台的技术就会代表我们努力工作。图1.1显示了浏览器与服务器之间的基本交互。
图1.1 浏览器请求和服务器响应
不过，在看到所请求的站点的全部内容之前，这个进程将会涉及多个步骤，并且可能在浏览器与服务器之间会往返多次。
假设你想执行Google搜索，必然会在地址栏中输入“www.google.com”，或者从书签列表中选择Google书签。浏览器几乎立即就会显示如图1.2所示的内容。
图1.2显示了一个包含文本以及一幅图像（Google标志）的Web站点。用于从Web服务器获取文本和图像并将其显示在屏幕上的过程的简单版本如下。
1．Web浏览器对位于www.google.com地址上的一个index.html文件发送请求。index.html文件不必是在地址栏中输入的地址的一部分，在学习本章后面的内容时，将会了解关于index.html文件的更多知识。
2．在收到对特定文件的请求后，Web服务器进程将在其目录内容中寻找特定的文件，打开它，并把该文件的内容发送回Web浏览器。
图1.2 访问www.google.com
3．Web浏览器接收index.html文件的内容，该文件是利用HTML代码标记的文本，并基于这些HTML代码呈现内容。在呈现内容时，浏览器将遇到用于Google标志的HTML代码，在图1.2中可以看到该标志。HTML代码看起来如下所示：
<img alt="Google" src="/images/srpr/logo4w.png"
width="275" height="95" />这个HTML标签提供了一些属性，告诉浏览器显示这个标志所必需的信息：文件源地址（src）、宽度（width）和高度（height）。在后面各章中将会学习关于属性的更多知识。
4．浏览器查看<img/>标签中的src属性，查找源位置。在这种情况下，可以在与浏览器获取HTML文件相同的Web地址（www.google.com）上的images目录中找到logo3w.png图像。
5．浏览器请求位于Web地址http://www.google.com/images/srpr/logo4w.png上的文件。
6．Web服务器解释该请求，找到文件，并把该文件的内容发送给请求它的Web浏览器。
7．Web浏览器在显示器上显示图像。
在Web内容递送过程的描述中可以看到，Web浏览器所做的不仅仅是充当用于查看内容的图片框架。浏览器将会依据文件中的HTML命令组合Web内容成分，并排列那些部分。
也可以在本地或者在你自己的硬盘驱动器上查看Web内容，从而无需Web服务器。获取和显示内容的过程与上述步骤中列出的过程相同，这是由于浏览器将寻找并解释HTML文件的代码和内容，但是往返行程更短：浏览器将在你自己的计算机的硬盘驱动器上（而不是在远程机器上）寻找文件。如果文件中嵌入了任何基于服务器的程序设计语言，将需要Web服务器解释它们，但是这超出了本书的范围。事实上，无需拥有自己的Web服务器，就可以顺利学完本书中的所有课程，但是这样的话，除你自己之外其他任何人都将无法查看你的杰作。
尽管刚才告诉你无需具有Web服务器也可以顺利地学完本书中的所有课程，我们还是建议你使用Web服务器继续学习下面的内容。不要担心，获得托管提供商通常是一个快速、轻松并且相对廉价的过程。事实上，只需支付比你正在阅读的这本书稍微多一点的费用，就能获得你自己的域名和为期一年的Web托管。
如果在所选的搜索引擎中输入“web hosting provider”（Web托管提供商），将获得数百万条纪录和无穷无尽的倡议性搜索结果（也称为广告）。如果不这样，许多Web托管提供商将从世界上消失，尽管事实可能并非如此。即使正在查看托管提供商的经过管理的列表，它也可能令人不知所措，尤其是当你所寻找的只是一个位置，用于托管你自己或者你的公司或组织的简单Web站点时。
你将希望在寻找提供商时缩小搜索的范围，并且选择最适合自己需要的提供商。对于Web托管提供商的一些选择标准如下。
下面列出了3家可靠的Web托管提供商，它们的基本托管包以相对较低的费用提供丰富的服务器空间和带宽（以及域名和额外的好处）。如果你不中意其中任何一家Web托管提供商，至少可以使用它们基本的托管包描述，作为你货比三家的指导原则。
注意：
本书作者多年来使用了所有这些提供商（后来还使用了其他一些提供商），建议使用其中任何一家提供商都没有问题。她主要使用DailyRazor作为Web托管提供商，尤其是对于高级开发环境则更是如此。
良好的托管提供商的一个特点是：它会提供一个“控制面板”，让你管理自己账户的各个方面。图1.3显示了我自己在DailyRazor上的托管账户的控制面板。许多Web托管提供商都提供了这种特殊的控制面板软件，或者某种在设计上类似的控制面板——清楚标记的图标引导你可以执行的任务，用以配置和管理你的账户。
图1.3 一个示范性的控制面板
你可能永远也不需要使用控制面板，但是使之可用将能够简化以下操作：安装数据库及其他软件、查看Web统计信息和添加电子邮件地址（以及许多其他的特性）。如果你可以遵循指导，在无需特殊培训的情况下就可以管理你自己的Web服务器。
刚才讨论了Web内容递送的过程以及如何获得Web服务器，现在回过头来并讨论利用多种Web浏览器测试Web站点似乎有点奇怪。不过，在继续学习关于利用HTML和CSS创建Web站点的所有知识之前，要记住下面这句非常重要的话：你的Web站点的每位访问者将可能使用与你自己不同的硬件和软件配置——他们的设备类型（台式机、笔记本电脑、上网本、智能手机、iPhone）、屏幕分辨率、浏览器类型、浏览器窗口大小、连接的速度，等等。记住：当访问者查看你的站点时，你不能控制他们的任何行为。因此，在设置Web托管环境并准备好工作时，要考虑下载多种不同的Web浏览器，以便可以使用本地测试工具套件。下面让我解释为什么这一点很重要。
尽管所有的Web浏览器都会以相同的常规方式处理信息，但是它们当中的一些特定的区别将导致事情在不同的浏览器中看起来并不总是相同的。甚至相同Web浏览器的相同版本的用户也可能通过选择不同的显示选项和/或更改他们的查看窗口的大小，来改变页面的显示方式。所有主流的Web浏览器都允许用户利用他们自己的选择覆盖Web页面作者指定的背景和字体。当页面第一次出现在人们的显示屏幕上时，屏幕分辨率、窗口大小和可选的工具栏也可能改变他们所看到的页面大小。你只能确保自己编写的是符合标准的HTML和CSS。
在任何情况下，都不要花时间创建只会在你自己的计算机上看起来完美无缺的最终设 计——除非你在朋友的计算机上、大街上的咖啡店里的计算机上或者你的iPhone上查看它时能够坦然地面对失望。
注意：
在第12章中，你将学习一点响应性Web设计的概念，其中将依赖于用户的行为和查看环境（屏幕大小、设备等）自动转换和改变站点的设计。
应该总是尽可能多地在下面这些Web浏览器上测试你的Web站点。
既然你已经建立了开发环境，或者对将来想要建立的开发环境至少有了某种想法，现在就让我们继续创建一个测试文件。
在开始前，让我们看看程序清单1.1。这个程序清单是一份简单的Web内容，其中包含几行HTML代码，用于在两行上以大号、加粗字母打印“Hello World! Welcome to My Web Server.”，并在浏览器窗口内居中显示它们。在继续学习本书后面的内容时，你将对这个文件内使用的HTML和CSS有更多的了解。
程序清单1.1 我们的示例HTML文件
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1 style="text-align: center">Hello World!<br/>
Welcome to My Web Server.</h1>
</body>
</html>为了利用这些内容，可以打开所选的文本编辑器，比如“记事本”（在Windows上）或TextEdit（在Mac上）。不要使用“写字板”、Microsoft Word或者其他全功能的字处理软件，因为这些程序创建的文件类型不同于我们用于创建Web内容的纯文本文件。
输入在程序清单1.1中看到的内容，然后使用sample.html作为文件名保存文件。.html扩展名告诉Web服务器，你的文件的确是HTML。当把文件内容发送给请求它的Web浏览器时，浏览器也会知道它是HTML，并将相应地呈现它。
既然你已经有了一个要使用的示例HTML文件，并且希望把它放到某个地方，如Web托管账户，现在就让我们发布你的Web内容。
就像你迄今为止所学到的，必须把Web内容放到Web服务器上，使之可供其他人访问。这个过程通常是使用FTP（File Transfer Protocol，文件传输协议）完成的。要使用FTP，需要一个FTP客户端，这个程序用于把你的计算机上的文件传输到Web服务器上。
FTP客户端需要3份信息来连接到Web服务器，在你建立了账户之后，你的托管提供商将把下面这些信息发送给你。
当你具有了这些信息后，就准备好使用FTP客户端，把内容传输到Web服务器。
无论使用的FTP客户端是什么，它们一般都会使用相同类型的界面。图1.4显示了一个FireFTP示例，它是Firefox Web浏览器使用的FTP客户端。本地机器（你的计算机）的目录清单将出现在屏幕左边，远程机器（Web服务器）的目录清单则出现在右边。通常会看到右箭头和左箭头按钮，如图1.4所示。右箭头把所选的文件从计算机发送到Web服务器上，左箭头则把文件从Web服务器发送到计算机上。许多FTP客户端还允许简单地选择文件，然后把那些文件拖放到目标机器上。
许多FTP客户端可以免费使用，但是也可以通过基于Web的File Manager（文件管理）工具传输文件，该工具很可能是Web服务器的控制面板的一部分。不过，这种文件传输方法通常会在过程中引入更多的步骤，并且几乎不像在你自己的计算机上安装FTP客户端的过程那样流线化（或简单）。
下面列出了一些流行的免费FTP客户端。
当选择一个FTP客户端并在计算机上安装它时，就准备好从Web服务器上传和下载文件。在下一节中，将使用程序清单1.1中的示例文件解释这个过程的工作方式。
图1.4 FireFTP界面
下面的步骤说明了如何使用Classic FTP连接到Web服务器并传输文件。不过，所有的FTP客户端都使用类似的（如果不是完全相同的）界面。如果理解了下面的步骤，就应该能够使用任何FTP客户端。
记住，首先需要主机名、账户的用户名和账户的密码。
1．启动Classic FTP程序，并单击Connect按钮，将提示你填写想连接到的站点相关的信息，如图1.5所示。
图1.5 在Classic FTP中连接到新的站点
2．填写图1.5中显示的每个项目，如下所述。
3．你可能要切换到Advanced选项卡，并修改以下可选的项目，如图1.6所示。
图1.6 Classic FTP中的Advanced连接选项
4．完成设置后，单击Add Site按钮保存设置。然后可以单击Connect按钮，建立一条与Web服务器的连接。
你将看到一个对话框，指示Classic FTP尝试连接到Web服务器。一旦成功连接，将会看到一个与图1.7相似的界面，在左边显示本地目录的内容，并在右边显示Web服务器的内容。
5．现在应准备好将文件传输到Web服务器，剩余的全部工作是把目录改为所谓的Web服务器的文档根目录（Document Root）。Web服务器的文档根目录被指定为Web内容的顶级目录，它是目录结构的起点，在本章后面将了解关于它的更多信息。通常，这个目录被命名为public_html、www（因为www被创建为public_html的别名）或htdocs。你自己不必创建这个目录，托管提供商将为你创建它。
双击文档根目录名称打开它。FTP客户端界面的右边将变成显示该目录的内容（此时它可能是空的，除非Web托管提供商代表你在该目录中放置了占位符文件）。
图1.7 通过Classic FTP成功连接到远程Web服务器
6．这里的目标是把你以前创建的sample.html文件从你的计算机传输到Web服务器上。在FTP客户端界面的左边列出的目录中查找文件（如果需要，可以进行导航），并单击它一次，以高亮显示文件名。
7．单击FTP客户端界面中间的右箭头按钮，把文件发送到Web服务器。当文件传输完成时，客户界面的右边将会刷新，以显示发送到目的地的文件。
8．单击Disconnect按钮关闭连接，然后退出Classic FTP程序。
无论何时想通过FTP把文件发送到Web服务器上，从概念上讲都要采取这些类似的步骤。也可以使用FTP客户端在远程Web服务器上创建子目录。要使用Classic FTP创建子目录，可以单击Remote菜单，然后单击New Folder按钮。不同的FTP客户端具有不同的界面选项，来实现相同的目标。
维护Web内容的一个重要方面是确定将如何组织该内容——不仅便于用户查找，而且便于你维护服务器上的内容。把文件放在目录中有助于管理那些文件。
在Web服务器上命名和组织目录以及开发文件维护的规则完全取决于你自己。不过，在这个漫长的过程中，维护一个组织良好的服务器可以使其内容管理更高效。
在你浏览Web时，可能注意到当你在Web站点中导航时URL会改变。例如，如果查看一家公司的Web站点，并且单击通往公司的产品或服务的图形导航元素，URL可能会从http://www.companyname.com/变为http://www.companyname.com/products/或http://www.companyname.com/services/。
在上一节中，我使用了术语文档根目录（document root），但是没有真正解释它的有关含义。Web服务器的文档根目录实质上是完整URL中的末尾斜杠。例如，如果域是yourdomain.com，并且URL是http://www.yourdomain.com/，那么文档根目录就是通过末尾斜杠（/）表示的目录。文档根目录是你在Web服务器上创建的目录结构的起点，Web服务器将从这个位置开始寻找Web浏览器请求的文件。
如果像前面所指示的那样把sample.html文件放在文档根目录中，将能够通过Web浏览器利用以下URL访问它：http://www.yourdomain.com/sample.html。
如果把这个URL输入到Web浏览器中，将会看到呈现的sample.html文件，如图1.8所示。
图1.8 通过Web浏览器访问的sample.html文件
不过，如果在文档根目录内创建一个新目录，并把sample.html文件放在该目录中，则将利用下面这个URL访问该文件：http://www.yourdomain.com/newdirectory/sample.html。
如果把sample.html文件放在一连接到你的服务器时最初就看到的目录中，也就是说，你没有改变目录并把文件放在文档根目录中，那么将不能从你的Web服务器利用任何URL访问sample.html文件。该文件仍然位于你称为Web服务器的机器上，但是由于文件不在服务器软件知道从此开始寻找文件的文档根目录中，永远都没有人能够通过Web浏览器访问它。
底线就是：在开始传输文件之前，总是要导航到Web服务器的文档根目录。
对于图形和其他多媒体文件尤其如此。Web服务器上的一个公共目录被称为images，如你可能想到的，其中将存放所有的图像资源以便检索。其他流行的目录包括用于存放样式文件的css（如果使用多个样式表文件的话），以及用于存放外部JavaScript文件的js。此外，如果你知道在Web站点上将具有一个区域，访问者可以从中下载许多不同类型的文件，就可能简单地把该目录命名为downloads。
无论它是一个包含你的艺术选辑的ZIP文件，还是一个带有销售数字的Excel电子数据表，在Internet上发布不仅仅是Web页面的文件通常都是有用的。为了使一个不是HTML文件的文件在Web上可用，只需把该文件像一个HTML文件一样上传到Web站点，并遵循本章前面给出的关于上传文件的指导即可。在把文件上传到Web服务器之后，就可以创建一个指向它的链接（在第7章中将学习这方面的知识）。换句话说，Web服务器不仅仅能提供HTML文件。
下面给出了一段示例HTML代码，在本书后面将学习关于它的更多知识。下面的代码将用于一个名为artfolio.zip的文件，它位于Web站点的downloads目录中，并且会显示链接文本“Download my art portfolio!”：
<a href="/downloads/artfolio.zip">Download my art portfolio!</a>在你想到索引时，可能会想起本书后面的那一节，它告诉你在哪里寻找各个关键词和主题。Web服务器目录中的索引文件可以服务于此目的——如果你这样设计它的话。事实上，该名称最初就起源于此。
index.html文件，或者采用它通常的叫法即索引文件（index file），是你给一个页面提供的名称，当人们导航到你的Web站点中的特定目录时，你希望他们把该页面视为默认的文件。
索引文件的另一个作用是：访问你的站点上的某个目录的用户将具有一个索引页面，但是没有指定该页面仍将登录到用于站点的那个区域（或者用于站点本身）的主页上。
例如，可以输入以下URL之一，并登录到Apple的iPhone信息页面上：
http://www.apple.com/iphone/index.html
iPhone目录中没有index.html页面，结果将依赖于Web服务器的配置。如果服务器被配置成禁止目录浏览，用户在尝试访问不带有指定的页面名称的URL时将会看到一条“Directory Listing Denied”（“目录列表被拒绝”）消息。不过，如果服务器被配置成允许目录浏览，用户将会看到那个目录中的文件列表。
你的托管提供商将已经确定了这些服务器配置选项。如果你的托管提供商允许你通过控制面板修改服务器设置，你就可以更改这些设置，使得服务器基于你自己的需要来响应请求。
索引文件不仅在子目录中使用，也在Web站点的顶级目录（或文档根目录）中使用。Web站点的第一个页面——首页（home page）或主页（main page），或者无论如何你都希望用户在第一次访问你的域时所看到的Web内容——都应该被命名为index.html，并且放在Web服务器的文档根目录中。这确保当用户在他们的Web浏览器中输入http://www.yourdomain.com/时，服务器将利用你打算让他们看到的内容来响应（而不是给他们提供“Directory Listing Denied”消息或者其他某种意外的后果）。
在线发布HTML和多媒体文件显然是学习HTML和创建Web内容的主要原因。不过，在另外一些情况下，其他的发布形式简直是不可行的。例如，你可能希望在商品展示会上分发CD-ROM、DVD-ROM或USB驱动器，其中带有设计为Web内容的市场营销材料——即可以通过Web浏览器查看的超链接的文本，但是不涉及Web服务器。你还可能希望在可移动媒体上包括基于HTML的指导手册，以便在培训研讨会上给学生演示它们。这些只是说明在不涉及Internet的发布场景中如何使用HTML页面的两个示例。
这个过程也称为创建本地（local）站点，即使没有涉及Web服务器，仍然可以把这一大堆超文本内容称为站点（site）。之所以使用本地这个术语，是因为文件是在本地而不是在远程（通过Web服务器）访问的。
让我们假定你需要创建一个希望在USB驱动器上分发的本地站点。现在，甚至最便宜的USB驱动器也能够保存如此多的数据（而且基本的超文本文件相当小），以至于可以在一个小驱动器上分发整个站点和全功能的Web浏览器。
注意：
在创建和分发本地站点时，分发Web浏览器不是必需的，尽管这样做可以起到锦上添花的作用。可以合理地假定用户具有他们自己的Web浏览器，并且会打开某个目录中的index.html文件，开始浏览超链接的内容。不过，如果你希望在USB驱动器上分发Web浏览器，可以访问www.portableapps.com，并寻找Portable Firefox或Portable Chrome。
可以简单地把USB驱动器的目录结构视作就像是Web服务器的目录结构。USB驱动器的目录结构的顶级目录可以是文档根目录。或者，如果连同内容一起分发Web浏览器，就可能具有两个目录，例如，一个名为browser，另一个名为content。在这种情况下，content目录将是文档根目录。在文档根目录内，可以具有额外的子文件夹，可以在其中放置内容和其他多媒体资源。
就像远程站点一样，使本地站点维持组织有序也很重要，以便可以避免HTML文件中的断开的链接。在第7章中将学习关于把文件链接到一起的更多具体细节。
你可能具有一个被第三方（比如WordPress、Tumblr或Blogger）托管的博客，因此在没有专用的Web服务器或者甚至不知道任何HTML的情况下已经发布了内容。除了源代码编辑器（source editor）之外，这些服务还提供可视化编辑器（visual editor），这意味着可以输入你的文字，并添加展示性的格式化效果，如粗体、斜体或字体颜色，而不必知道用于这些动作的HTML代码。当你单击这些编辑器中的Publish（“发布”）按钮时，内容仍然会变成实际的HTML代码。
不过，利用你在全书中获得的知识，可以增强你写博客的能力，因为你将能够为博客帖子内容和博客模板使用源代码编辑器，从而可以对该内容的外观和感觉提供更多的控制。这些动作的发生不同于你学习用于创建HTML文件并通过FTP把它上传到你自己的专用Web服务器的过程，但是如果我没有指出写博客事实上是一种Web发布形式，那我就是不负责任的。
无论何时把文件传输到Web服务器上或者把它们存放在可移动媒体上以便于本地浏览，都应该立即彻底地测试每个页面。下面的检查表有助于确保Web内容像你期望的那样工作。注意：此时，有一些术语你可能还不熟悉，但是在你逐步学习本书并创建更大的项目时，可以回过头来看看这个检查表。
如果你的页面通过了所有这些测试，你就可以高枕无忧了，你的站点已经准备好被公众查看。
本章介绍了使用HTML标记文本文件来制作Web内容的概念。你应该获悉Web内容不仅仅是“页面”，Web内容还包括图像、音频和视频文件。所有这些内容都存在于Web服务器上，它是一台通常远离你自己的计算机的远程机器。在你的计算机或其他设备上，你使用Web浏览器请求、获取并且最终在屏幕上显示Web内容。
你学习了在确定Web托管提供商是否适应你的需求时要考虑的标准。在选择了Web托管提供商之后，就可以使用FTP客户开始把文件传输到Web服务器，你也学习了如何执行该操作。你还学习了一点关于Web服务器目录结构和文件管理的知识，以及给定的Web服务器目录中的index.html文件的非常重要的用途。此外，你还学习了可以在可移动媒体上分发Web内容，并且学习了如何动手构造文件和目录，以实现在不使用远程Web服务器的情况下查看内容的目标。
最后，你学习了在把你的工作成果放到Web服务器上后，在多种浏览器中对其进行测试的重要性。编写有效的、符合标准的HTML和CSS代码有助于确保你的站点对于所有的访问者看上去都是相当相似的，但是如果没有接收到来自开发团队之外的潜在用户的输入，那么仍然不应该进行设计——当你是设计团队中的一员时，获取其他人的输入甚至更重要！
问：我查看了Internet上的一些Web页面的HTML源代码，它们看上去极难学习。我必须像一名计算机程序员那样思考，才能够学习这种材料吗？
答：尽管复杂的HTML页面看上去可能的确令人畏缩不前，但是学习HTML比学习实际的程序设计语言（如C++或Java）要容易得多。HTML是一种标记语言，而不是程序设计语言，使用它标记文本，以便浏览器可以以某种方式呈现文本。与开发计算机程序相比，这是一组完全不同的思考过程。你实际上不需要任何作为计算机程序员的经验或技能，就能成为一名成功的Web内容作者。
许多商业Web站点背后的HTML代码看上去比较复杂的原因之一是：它们很可能是通过可视化Web设计工具创建的，该工具是一个“所见即所得”（what you see is what you get，WYSIWYG）编辑器，在某些情况下会使用其软件开发人员告诉它的任何标记（与手工编码相对，其中可以完全控制得到的标记）。在本书中，将从头开始介绍基本的编码，它通常会得到干净的、易于阅读的源代码。可视化Web设计工具倾向于使代码难以阅读，以及产生错综复杂并且不符合标准的代码。
问：运行你建议的所有测试将要花费比创建我的页面更长的时间！我不能利用较少的测试蒙混过去吗？
答：如果你的页面没有打算用于赚钱或者提供重要的服务，那么当它们在某些用户看来很滑稽或者偶尔会产生错误时，它可能不是一个大问题。在这种情况下，只需利用两种不同的浏览器测试每个页面，并且每天访问它一次。不过，如果需要展现专业的图像，除了进行严格的测试之外，将别无选择。
问：说真的，谁在乎我是怎样组织我的Web内容的呢？
答：无论相信与否，你的Web内容的组织结构与搜索引擎和站点的潜在访问者密切相关。但是，总之，具有组织有序的Web服务器目录结构有助于跟踪你很可能会频繁更新的内容。例如，如果你具有专用的目录用于存放图像或多媒体，就可以确切知道在哪里寻找你想更新的文件——而无需搜寻包含其他内容的目录。
本测验包含一些问题和练习，可帮助读者巩固本章所学的知识。在查看后面的“答案”一节的内容之前，要尝试尽量回答所有的问题。
1．你将需要把多少个文件存储在Web服务器上，用以产生单个Web页面，并且它上面具有一些文本和两幅图像？
2．在选择Web托管提供商时，要关注的一些特点是什么？
3．通过FTP连接到Web服务器需要哪3份信息？
4．index.html文件的用途是什么？
5．Web站点必须包括一种目录结构吗？
1．将需要3个文件：一个用于Web页面本身，它包括文本和HTML标记，还有两个文件分别用于每一幅图像。
2．要关注可靠性、客户服务、Web空间和带宽、域名服务、站点管理的额外事项和价格。
3．需要主机名、你的账户的用户名和你的账户的密码。
4．index.html文件通常是用于Web服务器内的某个目录的默认文件。它允许用户访问http://www.yourdomain.com/somedirectory/，而不必使用末尾的文件名，并且最终仍然会到达合适的位置。
5．不是。使用一种目录结构以进行文件组织完全取决于你自己，尽管强烈建议这样做，因为它可以简化内容维护。
在本章中你将学到：
在第1章中，你基本了解了创建Web内容并且在线（或者在本地，如果还没有Web托管提供商的话）查看它的幕后过程。在本章中，我们将言归正传，解释必须出现在HTML文件中的各种元素，使之在Web浏览器中适当地显示。
一般来讲，本章将快速总结HTML的基础知识，并给出一些实用的提示，帮助你最大限度地享受自己作为Web页面开发人员的时间。在你学习HTML5元素时，它们可让你增强在标记过的文本中所提供的信息的语义（含义），你将开始更深入一点地研究它背后的理论。你将密切观察6个元素，它们构成了文档的稳固语义结构的基础，这6个元素是：<header>、<section>、<article>、<nav>、<aside>和<footer>。
在本书余下的全部内容中，你将看到在代码示例中如何适当地使用这些标签，因此在继续学习后面的内容之前，本章将确保你很好地领会了它们的含义。
下面回顾了在你准备学习本书余下的内容之前需要做什么。
1．获得一台计算机。我使用一台Windows笔记本电脑测试示例Web内容，并且抓取了本书中的图片，但是你可以使用任何Windows、Macintosh或者Linux/UNIX机器创建和查看你的Web内容。
2．获得通往Internet的连接。无论你是使用拨号、无线还是宽带连接，都不影响你创建和查看Web内容，但是连接的速度越快，总的体验将越好。提供Internet连接的Internet服务提供商（ISP）、学校或企业将给你提供详细的信息，可以帮助你正确地设置它。此外，许多公共空间（如咖啡店、书店和图书馆）还提供了免费的无线Internet服务，如果你的笔记本电脑具有Wi-Fi网络支持，那么就可以使用它们。
3．获得Web浏览器软件。这是计算机获取和显示Web内容所需的软件。如你在第1章中所学到的，最流行的浏览器软件（按字母顺序）是：Apple Safari、Google Chrome、Microsoft Internet Explorer、Mozilla Firefox和Opera。安装其中多个浏览器是一个好主意，这样就可以试验并且确保内容跨所有这些浏览器看起来是一致的，不能假设其他人将使用何种浏览器。
警告：
尽管所有的Web浏览器都以相同的常规方式处理信息，但是它们之间的一些特定的区别意味着事物在不同的浏览器中看起来并不总是相同的。一定要在多个浏览器中检查Web页面，以确保它们看起来基本上是一致的。
4．浏览！使用Web浏览器在Internet上转转，寻找与你要创建的那些内容或外观相似的Web站点。注意一些页面是怎样使你受挫的，是什么吸引你并使你继续阅读其他页面，以及是什么使你回过头来反复查看某些页面的。如果特定的主题使你感兴趣，可以考虑使用诸如Google（www.google.com）或Bing（www.bing.com）之类的流行的搜索引擎搜索它。
注意：
如第1章中所讨论的，如果计划把Web内容放在Internet上（与在CD-ROM或本地内联网上发布它相对），将需要把它传输到一天24小时都连接到Internet的计算机上。为你提供Internet访问的同一个公司或学校也可能提供Web空间，如果不是这样，将可能需要给托管提供商付费来获得服务。
在第1章中，你学习到Web页面只是一个被HTML代码标记（或包围）的文本文件，这些代码告诉浏览器如何显示文本。要创建这些文本文件，可以使用诸如“记事本”（在Windows上）或TextEdit（在Mac上）之类的文本编辑器，不要使用“写字板”、Microsoft Word或其他全功能的字处理软件，因为它们创建的文件类型与我们用于创建Web内容的纯文本文件不同。
在开始工作前，应该从你想要放在Web页面上的一些文本开始。
1．查找（或者编写）几个关于你自己、你的家庭、你的公司、你的垒球队或者你感兴趣的其他某个主题的文本段落。
2．把这段文本另存为标准的ASCII纯文本。“记事本”（在Windows上）和大多数简单的文本编辑器总是把文件另存为纯文本，但是如果使用另一个程序，则可能需要选择这种文件类型作为一个选项（在选择“文件”>“另存为”命令之后）。
在学习本章的过程中，将给文本文件添加HTML标记（称为标签，tag），从而把它转变成Web内容。
在保存包含HTML标签的文件时，总是要给它们提供以.html结尾的名称。这很重要：如果在保存文件时忘记了在文件名末尾输入.html，大多数文本编辑器都会给它提供某个其他的扩展名（比如.txt）。如果发生这种情况，当尝试利用Web浏览器查看文件时，也许不能找到它，即使找到文件，也肯定不能正确地显示。换句话说，Web浏览器期望Web页面文件具有.html文件扩展名并且具有纯文本格式。
警告：
我们反复申明这一点，因为它对于结果和学习过程本身非常重要：不要利用Microsoft Word或者任何其他HTML兼容的字处理器创建第一个HTML文件，其中大多数程序都试图以怪异的方式为你重写HTML代码，这可能会把你完全搞糊涂。在使用Microsoft Word和“另存为”HTML时也是如此—你很可能获得充斥大量HTML代码的冗长且不兼容的文件，它将不会经过验证，并且会在编辑时让你头痛。
此外，我还建议不要使用所见即所得（what-you-see-is-what-you-get，WYSIWYG）的图形编辑器，比如Adobe Dreamweaver。你很可能发现，在开始学习HTML时，从一个简单的文本编辑器入手将更容易，并且更有教育意义。
在访问Web站点时，还可能遇到文件扩展名为.htm的页面，它是另一个可接受的文件扩展名。你还可能发现在Web上使用的其他文件扩展名，比如.jsp（Java Server Pages）、.asp（Microsoft Active Server Pages）或.php（PHP：Hypertext Preprocessor），但是这些文件类型使用服务器端技术，它们超出了HTML和整本书中的课程的范围。不过，除了程序设计语言之外，这些文件中也包含HTML。尽管这些文件中的程序设计代码是在服务器端编译的，并且你在客户端看到的一切都是HTML输出，但是如果查看源文件，很可能会看到程序设计代码和标记代码错综复杂地交织在一起。
程序清单2.1显示了一段可以输入并保存的文本示例，用于创建一个简单的HTML页面。如果利用Chrome打开这个文件，将会看到如图2.1所示的页面。你创建的每个Web页面都必须包括一个<!DOCTYPE>声明，以及<html></html>、<head></head>、<title></title>和<body></body>标签对。
程序清单2.1 <html>、<head>、<title>和<body>标签
<!DOCTYPE html>
<html lang="en">
<head>
<title>The First Web Page</title>
</head>
<body>
<p>
In the beginning, Tim created the HyperText Markup Language.
The Internet was without form and void, and text was upon
the face of the monitor and the Hands of Tim were moving
over the face of the keyboard. And Tim said, Let there be
links; and there were links. And Tim saw that the links were
good; and Tim separated the links from the text. Tim called
the links Anchors, and the text He called Other Stuff. And
the whole thing together was the first Web Page.
</p>
</body>
</html>图2.1 当把程序清单2.1中的文本另存为HTML文件并利用Web浏览器查看它时，将只会显示实际的页面标题和正文文本
在程序清单2.1中，与在每个HTML页面中一样，以“<”开头且以“>”结尾的单词实际上都是编码的命令。这些编码的命令被称为HTML标签（HTML tag），因为它们给文本块“加了标签”，并且告诉Web浏览器它是什么类型的文本。这允许Web浏览器适当地显示文本。
文档中的第一行是文档类型声明；你声明（declare）它是html（确切地讲是HTML5），因为html是用于在<!DOCTYPE>标签中将文档声明为HTML5的值。
TRY IT YOURSELF
创建并查看基本的Web页面
在学习程序清单2.1中使用的HTML标签的含义之前，你可能想准确地了解我将如何创建并查看文档本身。可遵循下面这些步骤。
1．在Windows“记事本”中（或者使用MacintoshTextEdit或你选择的另一个文本编辑器）输入程序清单2.1中的所有文本，包括HTML标签。
2．选择“文件”>“另存为”命令，确保选择纯文本（或ASCII文本）作为文件类型。
3．把文件命名为firstpage.html。
4．选择硬盘驱动器上想要用于保存Web页面的文件夹，并且记住你所选的文件夹，然后单击“保存”或“确定”按钮保存文件。
5．现在启动你最喜爱的Web浏览器（仍然保持运行“记事本”，以便可以轻松地在查看和编辑页面之间切换）。
在Internet Explorer中，选择“文件”>“打开”命令，并单击“浏览”按钮。如果使用的是Firefox，则可选择File > Open File命令。然后导航到合适的文件夹，并选择firstpage.html文件。一些浏览器和操作系统也允许把firstpage.html文件拖放到浏览器窗口上以查看它。
瞧！你应该会看到图2.1中所示的页面。
注意：
不需要连接到Internet，也可以查看存储在你自己的计算机上的Web页面。默认情况下，每次启动Web浏览器时，它都将尝试连接到Internet，这在大多数时间都是有意义的。不过，如果在硬盘驱动器上本地（脱机）开发页面，这可能会造成麻烦，并且会遇到页面未找到的错误。如果一天24小时都通过LAN、线缆调制解调器、Wi-Fi或DSL连接到Internet，这就是个尚无定论的问题，因为浏览器永远也不会抱怨脱机。否则，就要依赖于浏览器的类型采取合适的动作，可以检查浏览器的Tools（“工具”）菜单下面的选项。
如果获得了一个Web托管账户，此时就可以使用FTP，把firstpage.html文件传输到Web服务器上。事实上，从本章往后，所有的指导都假定你有托管提供商，并且熟悉通过FTP来回传送文件，如果不是这样，请在继续学习下面的内容之前复习一下第1章的内容。此外，如果有意选择在本地（没有Web主机）处理文件，就要准备调整指导，以适应你的特定需求（比如忽略“传输文件”和“输入URL”命令）。
现在应该给你揭示HTML标签的密语了。当你理解了这种语言，将具有远远超过其他人的创造力。不要告诉其他人，但它确实十分容易。
第一行代码是文档类型声明，在HTML5中，它非常简单，如下：
<!DOCTYPE html>这个声明把文档标识为HTML5，这确保Web浏览器可以预期会发生什么事情，并且准备好以HTML5呈现内容。
许多HTML标签具有两个部分：开始标签（opening tag）和封闭标签（closing tag），其中前者指示文本块的开始位置，后者指示文本块的结束位置。封闭标签开始于一个“/”（正斜杠），它位于“<”符号之后。
另一类标签是空标签（empty tag），它是不同的，这是由于它不包括一对匹配的开始标签和封闭标签。作为替代，空标签包含单个标签，它开始于“<”，结束于“/>”符号。尽管结尾斜杠在HTML5中不再明确需要，但它确实有助于同XHTML保持兼容——如果在Web站点中具有一堆旧的XHTML代码，在进行升级时，它将不会损坏。
下面快速总结了这3个标签，只是为了确保你理解每个标签所起的作用。
注意：
你无疑会注意到，在程序清单2.1中，有一些额外的代码与<html>标签相关联。这种代码包含语言属性（lang），它用于指定与标签相关的额外信息。在这里，它指定HTML内的文本的语言是英语。如果以不同的语言编写代码，可以用相关的语言标识符替换en（用于英语）。
例如，程序清单2.1中的<body>标签告诉Web浏览器页面中的实际正文文本的开始位置，</body>则指示其结束位置。<body>与</body>标签之间的所有内容都出现在Web浏览器窗口的主要显示区域，如图2.1所示。
浏览器窗口的最上方（参考图2.1）显示页面标题文本，它是位于<title>与</title>之间的任何文本。页面标题文本还会在浏览器的Bookmarks（“书签”）或Favorites（“收藏夹”）菜单上标识页面，这依赖于你使用的是哪种浏览器。为页面提供页面标题很重要，以便页面的访问者可以正确地给它们建立书签以便将来引用，搜索引擎也使用页面标题来提供指向搜索结果的链接。
在你创建的每个HTML页面中，都将使用<body>和<title>标签对，因为每个Web页面都需要页面标题和正文文本。你还将使用<html>和<head>标签对，它们是程序清单2.1中显示的另外两个标签。把<html>放在文档的开始处可以简单地指示文档是一个Web页面。末尾的</html>则指示Web页面结束了。
在页面内，有一个头部区域和一个主体区域。每个区域分别通过<head>和<body>标签标识。其思想是：页面头部中的信息以某种方式描述页面，但实际上不会被Web浏览器显示出来。不过，放在主体中的信息会被Web浏览器显示。<head>标签总是出现在页面的HTML代码开始处附近，仅仅位于<html>开始标签之后。
<title>标签对用于标识出现在页面头部内的页面标题，这意味着它将放在<head>开始标签之后和</head>封闭标签之前。在后面几章中，你将学习可以放在<head>与</head>之间的其他一些高级的头部信息，比如用于格式化页面的样式表规则。
提示：
你可能发现创建和保存“裸”页面（也称为骨架[skeleton]页面或模板[template]）很方便，它只具有DOCTYPE以及<html>、<head>、<title>和<body>开始标签和封闭标签，类似于程序清单2.1中的文档。以后，无论何时想要创建一个新的Web页面，都可以打开该文档作为起点，这样就可以使自己避免每次都要输入所有那些必需标签的麻烦。
程序清单2.1中的<p>标签封闭了一个文本段落。只要有可能，就应该把文本块封闭在合适的容器元素中，在本书后面，你将学习关于容器元素的更多知识。
Web浏览器在显示HTML页面时，它将会忽略换行符或者单词之间的空格数。例如，在图2.2上方显示的诗歌版本在所有单词之间只显示一个空格，即使在程序清单2.2中不是这样输入它的。这是由于HTML代码中的额外空白会被自动缩减为一个空格。此外，当文本到达浏览器窗口的边缘时，它将自动换到下一行，而不管在原始HTML文件中换行符出现在什么位置。
图2.2 当把程序清单2.2中的HTML显示为Web页面时，换行符和分段符只出现在<br />和<p>标签中
程序清单2.2 包含分段符和换行符的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Advertising Agency Song</title>
</head>
<body>
<p>
When your client's hopping mad,
put his picture in the ad.
If he still should prove refractory,
add a picture of his factory.
</p>
<hr />
<p>
When your client's hopping mad,<br />
put his picture in the ad.
</p>
<p>
If he still should prove refractory,<br />
add a picture of his factory.
</p>
</body>
</html>
注意：
如果封闭斜杠不是空元素所必需的，你可能会问为什么在整本书中都会使用它。一个原因是：多年来，封闭标签从不是必需的变成了必需的，后来又变成不是必需的（再一次），并且本书的作者仍然坚持使用完全有效但是不再必需的封闭斜杠。另一个原因是：由于中间那个时间段相对较长，许多代码编辑器、代码生成器和模板都使用封闭斜杠，因此你将看到使用它的时间要多于不使用它的时间。你选择哪种书写方式是无关紧要的，因为两种方式都是有效的，只需确保遵循其中一种编码风格，并在使用时保持一致即可。
如果你想控制换行符和分段符实际出现的位置，则必须使用HTML标签。当把文本封闭在<p></p>容器标签内时，就假定换行符位于封闭标签之后。在后面各章中，你将学习使用CSS控制换行符的高度。<br />标签在段落内强制进行换行。与你迄今为止见过的其他标签不同，<br />不需要封闭标签</br>——这是前面讨论过的那些空标签之一。
程序清单2.2和图2.2中的诗歌显示了<br />和<p>标签，它们用于分隔广告代理歌曲的行和诗节。你还可能注意到程序清单中的<hr />标签，它可以导致水平标线出现在页面上（参见图2.2）。利用<hr />标签插入水平标线还会导致换行，即使没有与之一起包括一个<br />标签。像<br />一样，<hr />水平标线标签是一个空标签，因此从来不会获得一个</hr>封闭标签。
TRY IT YOURSELF
在HTML中格式化文本
自己动手试试把一段文本格式化为正确的HTML。
1．把<html><head><title>My Title</title></head><body>添加到文本的开头（使用你自己的页面标题代替“My Title”）。还要在页面顶部包括样板代码，负责满足标准HTML的要求。
2．在文本的末尾添加</body></html>。
3．在每个段落开头添加一个<p>标签，并在每个段落末尾添加一个</p>标签。
4．在任何想要单倍行距的位置使用<br />标签。
5．使用<hr />绘制水平标线，用于分隔主要的文本区域，或者在你想看到一根线条横跨页面的任意位置绘制它。
6．将文件另存为mypage.html（使用你自己的文件名代替mypage）。
7．在Web浏览器中打开文件，查看Web内容（如果具有Web托管账户，则可通过FTP把文件发送给它）。
8．如果有什么看起来不合适，可以回到文本编辑器中进行校正，并再次保存文件（如果具有Web托管账户，则可把文件发送给它）。然后需要单击浏览器中的Reload / Refresh按钮，查看所做的任何改变。
警告：
如果使用字处理器创建Web页面，那么一定要以纯文本或ASCII格式保存HTML文件。
在浏览Internet上的Web页面时，你将注意到其中许多页面都在顶部具有一个标题，它们比其余的文本更大、更粗。程序清单2.3是用于一个简单的Web页面的示例代码和文本，其中包含一个标题示例，它与正常的段落文本形成了鲜明对比。<h1>与</h1>标签之间的任何文本都将显示为大标题。此外，<h2>和<h3>用于创建逐渐变小的标题，依此类推，直到<h6>。
程序清单2.3 标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Widgets</title>
</head>
<body>
<h1>My Widgets</h1>
<p>My widgets are the best in the land. Continue reading to
learn more about my widgets.</p>
<h2>Widget Features</h2>
<p>If I had any features to discuss, you can bet I'd do
it here.</p>
<h3>Pricing</h3>
<p>Here, I would talk about my widget pricing.</p>
<h3>Comparisons</h3>
<p>Here, I would talk about how my widgets compare to my
competitor's widgets.</p>
</body>
</html>
注意：
迄今为止，你可能理解了以下事实：HTML代码通常会由它的作者进行缩进，以呈现HTML文档的不同部分之间的关系，并且便于阅读。这种缩进完全是自愿的—可以轻松地把所有标签集中在一起，并且不使用空格或换行符，当在浏览器中查看时，它们看起来仍然很好。缩进便于你快速查看充满代码的页面，并且理解它们是如何组成一个整体的。缩进代码是另一个良好的Web设计习惯，并且最终会使页面更容易维护，对于你自己以及可能接手你留下的工作的任何人都是如此。
如图2.3所示，创建标题的HTML不能更简单了。在这个示例中，使用<h1>标签突出显示短语“My Widgets”。为了创建最大的（1级）标题，只需把<h1>标签放在你想用作标题的文本的开头，并把</h1>标题放在它的末尾即可。对于稍小一点的（2级）标题（heading），比如其重要性比页面标题（title）低一些的信息，可以在文本周围使用<h2>和</h2>标签。对于其重要性甚至不及2级标题的内容，可以在文本周围使用<h3>和</h3>标签。
不过，要记住：标题应该遵循内容的层次结构，只使用一个1级标题，在1级标题后面可以具有一个（或多个）2级标题，直接在2级标题后面使用3级标题，等等。不要落入给内容指定标题只是为了使内容以某种方式显示的陷阱。作为替代，要确保合适地对内容进行分类（作为主标题、次级标题等），同时使用显示样式使文本在Web浏览器中以特定的方式呈现。
图2.3 在这个示例产品页面上使用3种标题级别显示内容的层次结构
理论上讲，还可以使用<h4>、<h5>和<h6>标签创建越来越不重要的标题，但是它们不是经常使用。无论如何，Web浏览器很少在这些标题与<h3>标题之间显示出显著的区别——尽管可以利用你自己的CSS控制它，并且在显示内容时，通常不会需要6种标题级别，以显示内容的层次结构。
记住页面标题（title）与标题（heading）之间的区别很重要。在日常英语中，这两个单词通常可以互换使用，但是在谈论HTML时，<title>用于给整个页面提供一个标识名称，它不会显示在页面自身上，而只会出现在浏览器窗口的标题栏上。一方面，标题标签可以使页面上的某些文本在显示时进行视觉强调。每个页面只能有一个<title>，它必须出现在<head>与</head>标签内；另一方面，可以根据需要具有许多<h1>、<h2>和<h3>标题，并且按你设想的那样以任意顺序排列它们。不过，如前所述，应该使用标题标签紧密地控制内容的层次结构，而不要把标题用作一种实现特殊外观的方式，因为这是CSS所做的事情。
警告：
不要忘记，放在Web页面头部中的任何内容都不打算在页面上显示出来，而页面主体中的所有内容都打算被查看。
窥探其他设计师的页面？
鉴于在许多流行的Web页面上存在时尚的视觉效果，有时也有一些吸引人的音频效果，你可能意识到本课程中讨论的简单页面只是HTML的冰山一角。既然你已经知道了基础知识，就可能会惊叹自己能够通过查看Internet上其他人的页面来学习多少剩余的知识。可以在任何Web浏览器中单击右键并选择View Source（“查看源文件”），查看任何页面的HTML代码。
如果你自己还不能解释某些HTML标签可以做什么或者如何准确地使用它们，也不要担心。随着你继续学习本书后面的内容，所有这些问题都将得到解决。不过，现在预览源代码将显示你知道标签的实际应用，并且可以让你体验一下自己很快就能够对Web页面 做什么。
HTML5包括一些标签，它们可让你增强在标记过的文本中所提供信息的语义（含义）。不要简单地把HTML用作一种表示语言，就像在HTML的早期时代所做的那样，当时把<b>用于粗体以及把<i>用于斜体是一种标准规范，现代的HTML的目标之一是把表示与含义分隔开。虽然使用CSS提供表示的指导原则，但是HTML的创作者可以在他们的标记内为各个元素提供有意义的名称，不仅通过使用ID和类名（你将在本书后面学到），而且可以通过使用语义元素来实现这一点。
HTML5中的一些可用的语义元素如下。
随着你不断练习使用它们，这些语义元素将变得更清晰。一般而言，使用语义元素是一个好主意，因为它们不仅为你自己以及阅读和处理你的标记的其他设计师和程序员提供了额外的含义，而且为机器也提供了额外的含义。Web浏览器和屏幕阅读器将会对语义元素做出响应，它们将使用这些元素来确定文档的结构，屏幕阅读器将给用户报告更深层的含义，从而提高材料的可访问性。
理解HTML5语义元素的最佳方式之一是查看它们的实际应用，但是当这些元素的主要目的是提供含义（meaning）而不是设计时，这可能会有点困难。这并不是说不能给这些元素添加设计—当然可以，并且在后面的章节中将会这样做。但是，语义元素的“动作”是保存内容，并通过这样做来提供含义，如图2.4所示，它显示了用于基本Web页面的公共 语义元素。
图2.4 显示Web页面中的基本语义元素
起初，你可能认为：“当然，这是完全有意义的，并且标头出现在顶部，而脚注则出现在底部”，并且初看上去这对于理解语义元素自我感觉相当好——也应该如此！然后，再看一眼应该会提出一些问题：如果希望导航系统出现在标头下方的水平位置，则该怎么做？边注（从字面上讲）必须位于页面一侧吗？如果不想要任何边注，则该如何？在主体区域内再次使用<header>和<footer>，则会发生什么事情？等等，不一而足！你可能会问的另一个问题是：<article>元素适合放在什么位置，在这个示例中没有显示它，但它是本章的一部分。
现在，概念化页面（确切地讲是你想创建的页面）该闪亮登场了。如果你理解想要标记的内容，并且理解你可以使用任何或所有的语义元素或者不使用它们，仍然可以创建有效的HTML文档，那么就可以开始以一种对页面和你自己（并且有望对你的读者）最有意义的方式组织页面的内容。
提示：
尽管不需要使用语义元素来创建有效的HTML文档，仍然建议使用一个最小的集合，以便Web浏览器和屏幕阅读器可以确定文档的结构。屏幕阅读器能够给用户报告更深刻的含义，从而提高你的内容的可访问性（如果在HTML文档中给这条“注意”加标记，它将使用<aside>元素）。
在继续学习第二个示例之前，让我们看看图2.4中使用的元素，然后查看对各个元素本身的更深入的探索。在图2.4中，将在页面顶部看到一个<header>，并在底部看到一个<footer>——如前所述，非常直观。在页面左边使用的<nav>元素与用于导航的公共显示区域相匹配，而页面右边的<aside>元素则与用于辅助注释、引文、帮助文本以及用于获取关于内容的“更多信息”链接的公共显示区域匹配。在图2.5中，你将看到其中一些元素改变了位置，不要担心——图2.4并不是语义标记的某种不可变的示例。
图2.5 使用嵌套的语义元素给内容添加更多的含义
你在图2.5中看到的可能令人感到奇怪的内容是<section>元素内的<header>和<footer>。如你稍后将学到的，<header>元素的作用是引入第二个示例，然后更深入地探讨各个元素本身。在图2.4中，你在页面顶部看到了一个<header>，并在页面底部看到了一个<footer>，如前所述，非常直观。在页面左边使用的<nav>元素与其后的内容匹配，<header>元素本身在文档大纲中不会传达任何级别。因此，可以根据需要使用许多<header>元素相应地标记内容，页面开头的<header>元素可能包含关于作为一个整体的页面的介绍性信息，<section>元素内的<header>元素可能非常容易，并且相应地包含关于其中的内容的介绍性信息。对于这个示例中的<footer>元素的多种外观也是如此。
让我们转向图2.5，它移动了<nav>元素，还引入了<article>元素的使用。
在图2.5中，页面开头的<header>和<nav>元素以及页面底部的<footer>元素应该会给你完美的感觉。而且，尽管我们还没有谈论<article>元素，但是如果把它视作一个具有一些区域（甚至<section>！）的容器元素，并且其中每个区域都有它自己的标题，那么图形中间的语义元素块也应该是有意义的。可以看到，没有单独一种方式用于概念化页面内容——对页面上的每种单独的内容都应该进行概念化。
如果标记了图2.5中所示的结构中的一些内容，它可能看上去就像程序清单2.4。
程序清单2.4 基本内容的语义标记
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic Example</title>
</head>
<body>
<header>
<h1>SITE OR PAGE LOGO GOES HERE</h1>
</header>
<nav>
SITE OR PAGE NAV GOES HERE.
</nav>
<article>
<header>
<h2>Article Heading</h2>
</header>
<section>
<header>
<h3>Section 1 Heading</h3>
</header>
<p>Section 2 content here.</p>
</section>
<section>
<header>
<h3>Section 2 Heading</h3>
</header>
<p>Section 2 content here.</p>
</section>
<footer>
<p>Article footer goes here.</p>
</footer>
</article>
<footer>
SITE OR PAGE FOOTER HERE
</footer>
</body>
</html>如果在Web浏览器中打开这个HTML文档，将会看到如图2.6所示的内容—— 一个完全未编排样式的文档，但它具有语义含义（即使没有人可以“看到”它）。
仅仅由于没有可见的样式，并不意味着含义丢失了。如本节前面所指出的，机器可以解释通过语义元素提供的文档结构。在图2.7中可以看到这个基本文档的大纲，它显示了这个文件在经过http://gsnedders.html5.org/outliner/上的HTML5 Outline工具检查后的输出结果。
图2.6 程序清单2.4的输出结果
图2.7 这个文档的大纲遵循语义标记
既然你已经见过了概念化文档中所表示信息的一些示例，就为开始标记那些文档做了更好的准备。下面几节将分别探讨各个语义元素。
提示：
使用HTML5 Outline工具是一种检查你创建了标头、脚注和区域的良好方式，如果检查文档并在任意位置看到“无标题区域”，并且那些无标题的区域与<nav>或<aside>元素不匹配（它们对于包含标头具有更宽松的指导原则），那么你就要做一些额外的工作。
在最基本的层面上，<header>元素包含介绍性信息。该信息可能采用实际的<h1>（或其他级别）元素的形式，或者它可能只是<p>或<div>元素内包含的标志图像或文本。内容的含义本质上应该是介绍性的，以保证它包括在<header></header>标签对内。
在本章中迄今为止的示例中可以看到，<header>元素的公共位置位于页面的开始处。当以这种方式使用它时，包含标志或<h1>级别的页面标题就是有意义的，如下：
<header>
<imgsrc="acmewidgets.jpg" alt="ACME Widgets LLC"/>
</header>或者甚至如下：
<header>
<img src="acmewidgets.jpg" alt="ACME Widgets LLC"/>
<h1>The finest widgets are made here!</h1>
</header>两个代码段都有效地使用了<header>，因为它们内部包含的信息是对页面总体上的介绍。
在本章中还看到，不限于只使用一个<header>。可以疯狂地使用<header>元素，只要它们充当介绍性信息的容器即可——程序清单2.4显示了为一个<article>内的多个<section>元素使用<header>元素，并且这是该元素的完全有效的使用：
<section>
<header>
<h3>Section 1 Heading</h3>
</header>
<p>Section 2 content here.</p>
</section>
<section>
<header>
<h3>Section 2 Heading</h3>
</header>
<p>Section 2 content here.</p>
</section><header>元素可以包含流式内容（flow content）类别中的其他任何元素，并且它也是其中一个成员。这意味着如果想要的话，<header>可以包含<section>元素，并且这是完全有效的标记。不过，在概念化内容时，首先要考虑嵌套类型是否有意义。
注意：
一般来讲，流式内容（flow content）元素是包含文本、图像或其他多媒体嵌入式内容的元素，HTML元素属于多个类别。 如果想要了解关于把元素分类进内容模型中的更多信息，可以参见http://www.w3.org/TR/2011/WD-html5-20110525/content-models.html。
<header>内所允许内容的唯一例外是：<header>元素不能包含其他<header>元素，也不能包含<footer>元素。类似地，<header>元素不能被包含在<address>或<footer>元素内。
<section>元素具有一个简单的定义：它是“文档的一个普通区域”，也是“内容的一个主题组，通常具有一个标题”。对我而言，这听起来十分简单，对你可能也是如此。因此，你可能很奇怪地发现：如果在所选的搜索引擎中输入“HTML5中的区域与文章之间的区别”，将会查找到成千上万个条目谈论它们的区别，因为单纯的定义总会使人们感到不知所措。我们首先将讨论<section>元素，然后介绍<article>元素，并且希望避免似乎会使Web开发人员新手感到痛苦的任何误解。
在程序清单2.4中，你看到了一个在<article>内使用<section>的直观示例（在这里重复），在这个示例中，可以轻松地设想<section>包含一个“内容的主题组”，它们都具有自己的标题这一事实支持了这一点：
<article>
<header>
<h2>Article Heading</h2>
</header>
<section>
<header>
<h3>Section 1 Heading</h3>
</header>
<p>Section 2 content here.</p>
</section>
<section>
<header>
<h3>Section 2 Heading</h3>
</header>
<p>Section 2 content here.</p>
</section>
<footer>
<p>Article footer goes here.</p>
</footer>
</article>但是，下面这个示例完全有效地使用了<section>，并且看不到<article>元素：
<section>
<header>
<h1>Super Heading</h1>
</header>
<p>Super content!</p>
</section>那么，开发人员该怎么做呢？比如说你具有一些普通的内容，你知道自己想把它们划分到一些区域中，它们都具有各自的标题。在这种情况下，可以使用<section>。如果只需要形象地划分无需额外标题的内容块（比如利用分段符），那么使用<section>就不合适了，可代之以使用<p>或<div>。
由于<section>元素可以包含任何其他的流式内容元素，并且可以被包含在其他任何流式内容元素内（<address>元素除外），很容易明白的是：对于<section>元素的使用，如果具有通用的指导原则但是没有其他的限制，那么有时会误解它。
就我个人而言，我相信关于使用<section>与<article>的许多误解不得不涉及<article>元素的名称。当我考虑一篇文章时，确切地讲，我考虑的是报纸或杂志中的文章。我不会自然地考虑“任何独立的作品体系”，这就是通常定义<article>元素的方式。HTML5建议的规范把它定义为“文档、页面、应用程序或站点中的一个完整或自含式的作品，在理论上讲，它是可独立分发或重用的”，比如“论坛上的帖子、杂志或报纸中的文章、博客作品、用户提交的评论、交互式构件或小工具（gadget），或者其他任何独立的内容项目”。
换句话说，<article>元素可用于包含Web站点的整个页面（无论它是否是出版物中的一篇文章）、出版物中的实际文章、任意位置的博客帖子、论坛中的主题讨论的一部分、关于博客帖子的评论，以及作为显示你所在城市的当前天气的容器。因此，在搜索“HTML5中的区域与文章之间的区别”时得到成千上万条结果就毫不令人感到奇怪了。
一个良好的经验法则是，在尝试搞清楚何时使用<article>以及何时使用<section>时，只需回答下面的问题：这个内容自身有意义吗？如果是，那么无论内容对你来说看起来像什么（例如，一个静态Web页面，而不是《纽约时报》中的一篇文章），首先都要使用<article>元素。如果你发现自己对它进行了拆分，就要在<section>中执行该操作。并且如果你发现自己认为你的“文章”事实上是一个更大的整体的一部分，那么可以把<article>标签改为<section>标签，并且找到文档的开始位置，然后从此处通过在更高级别更合适地放置<article>标签来包围文档。
<nav>元素似乎是如此简单（<nav>意指导航，navigation），并且它最终也是这样，但是它也可能被错误地使用。在本节中，你将学习一些基本的使用方法，还要了解一些错误的使用方法以便避免它们。如果你的站点在站点级或者在较长的内容页面中具有任何导航元素，就会有效地使用<nav>元素。
对于那种站点级导航，通常会在主<header>元素内找到<nav>元素，你不需要这样做，但是如果你希望导航内容是介绍性的（并且在模板中无所不在），就可以轻松地为主<nav>元素提出一个出现在主<header>元素内的充分理由。更重要的是，这是有效的HTML（就像<header>之外的<nav>一样）—<nav>元素可以出现在任何流式内容中，也可以包含任何流式内容。
下面的代码段显示了一个Web站点的主要的导航链接，它放置在一个<header>元 素中：
<header>
<img src="acmewidgets.jpg" alt="ACME Widgets LLC"/>
<h1>The finest widgets are made here!</h1>
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Press</a></li>
</ul>
</nav>
</header>在文档中不限制只使用一个<nav>元素，对于站点开发人员来说，在创建模板时同时包括进主导航系统和辅助导航系统是一种良好的做法。例如，你可能在页面顶部看到水平的主导航系统（通常包含在一个<header>元素内），然后在页面的左侧栏中看到垂直导航系统，它代表主要区域内的辅助页面。在这种情况下，只需简单地使用另一个<nav>元素，它不用包含在<header>元素内，但是以不同的方式放置和编排样式，以便除了语义之外还可以从视觉上把两类导航系统区分开。
记住，<nav>元素用于主要的导航内容—主导航系统和辅助导航系统都包括在内，还会包括页面内的内容的表格。对于<nav>元素的良好、有用的语义用法，不要简单地将其应用于每个链接，以允许用户到处导航。注意：我说的是“良好、有用的”语义用法，而不一定是“有效”使用——可以把<nav>应用于任何链接列表，依据HTML规范它将是有效的，因为链接是流式内容。但是利用<nav>元素包围指向社交媒体共享工具的链接列表不是特别有用——它不会添加含义。
从本书中我提供的为数众多的提示和注意中可以看出，我非常喜欢最适合于在<aside>元素内标记的内容类型。<aside>元素意指包含与它周围的内容只有稍微有些关联的任何内容—额外的解释、指向相关资源的链接、醒目引文、帮助文本等。你可能把<aside>元素视作侧栏，但是要小心的是，不要只把它视作可视化（visual）侧栏，或者位于页面侧边的栏，其中可以插入想要的任何内容，而无论它是否与手头的内容或站点相关。
在图2.8中，可以看到<aside>中的内容如何用于创建醒目引文（pull quote），或者专门放在一边以吸引注意的内容摘要。在这里，<aside>用于突出显示文本中的一个重要区域，但它也可以用于定义术语或者指向相关文档的链接。
在确定是否使用<aside>元素时，可以考虑想要添加的内容。它与将包含<aside>的内容直接相关吗，比如文章中使用的术语的定义或者用于文章的相关链接的列表？如果你轻松地回答“是”，那就太好了！把<aside>用于核心内容。如果考虑在本身填满内容的包含元素之外包括一个<aside>元素，只需确保<aside>的内容与整体总体上合理相关并且没有把<aside>元素用于视觉效果即可。
图2.8 使用<aside>创建有意义的醒目引文
与<header>元素相对应的元素是<footer>元素，它包含关于其包含元素的额外信息。<footer>元素的最常见的应用是在页面底部包含版权信息，如下：
<footer>
<p>© 2014 Acme Widgets, LLC. All Rights Reserved.</p>
</footer>与<header>元素类似，<footer>元素可以包含流式内容类别中的其他任何元素（其他<footer>或<header>元素除外），并且它也是其中一员。此外，<footer>元素不能包含在<address>元素内，但是<footer>元素可以包含<address>元素——事实上，<footer>元素是存放<address>元素的常见位置。
在<footer>元素内放置有用的<address>内容是<footer>元素的最有效的应用之一（更不要说<address>元素了），因为它提供了关于它所引用的页面或页面区域的特定上下文信息。下面的代码段显示了<address>在<footer>内的使用：
<footer>
<p>© 2014 Acme Widgets, LLC. All Rights Reserved.</p>
<p>Copyright Issues?Contact:</p>
<address>
Our Lawyer<br/>
123 Main Street<br/>
Somewhere, CA 95128<br/>
<a href="mailto:lawyer@richperson.com">lawyer@richperson.
com</a>
</address>
</footer>与<header>元素一样，不限于只使用一个<footer>元素。可以根据需要使用许多<footer>元素，只要它们是关于包含元素的额外信息的容器即可。程序清单2.4显示了将<footer>元素用于页面和一个<article>元素，它们二者都是有效的。
本章介绍了Web页面是什么以及它们如何工作的基础知识。你学习了将编码的HTML命令包括在文本文件中，并且看到自己输入HTML文本要好于使用图形编辑器为你创建HTML命令，尤其是在你学习HTML时。
本章介绍了最基本、最重要的HTML标签。通过把这些编码的命令添加到任何纯文本文档中，可以快速把它转换成真正的Web页面。你学习了创建Web页面的第一步是把几个必需的HTML标签放在开头和末尾，包括为页面添加页面标题。然后可以标记段落和行的结束位置，并且添加水平标线和标题（如果想要它们的话）。你还体验了HTML5中的一些语义标签，它们通过描述页面包含的内容的类型（而不仅仅是内容本身），用于提供额外的含义。表2.1总结了本章中介绍的所有标签。
表2.1 第2章中介绍的HTML标签
| 标签 |
作用 |
|---|---|
| <html>...</html> |
封闭整个HTML文档 |
| <head>...</head> |
封闭HTML文档的头部。在<html>标签对内使用 |
| <title>...</title> |
指示文档的页面标题。在<head>标签对内使用 |
| <body>...</body> |
封闭HTML文档的主体。在<html>标签对内使用 |
| <p>...</p> |
封闭段落，在段落之间跳过一行 |
| <br /> |
指示换行符 |
| <hr /> |
显示水平标线 |
| <h1>...</h1> |
封闭1级标题 |
| <h2>...</h2> |
封闭2级标题 |
| <h3>...</h3> |
封闭3级标题 |
| <h4>...</h4> |
封闭4级标题（很少使用） |
| <h5>...</h5> |
封闭5级标题（很少使用） |
| <h6>...</h6> |
封闭6级标题（很少使用） |
| <header>...</header> |
包含介绍性信息 |
| <footer>...</footer> |
包含关于其包含元素的补充材料（通常是版权通知或作者信息） |
| <nav>...</nav> |
包含导航元素 |
| <section>...</section> |
包含主题上类似的内容，比如一本书中的某一章或者一个页面的某个区域 |
| <article>...</article> |
包含一段独立的内容，比如新闻文章 |
| <aside>...</aside> |
包含关于其包含元素的辅助信息 |
| <address>...</address> |
包含与其最近的<article>或<body>元素相关的地址信息，通常包含在<footer>元素内 |
问：我创建了Web页面，但是当我在Web浏览器中打开文件时，我看到的全是文本，包括HTML标签。有时，我甚至在页面顶部看到过怪异的天书一样的字符。我做错了什么？
答：你没有将文件另存为纯文本。尝试再次保存文件，要小心将其另存为Text Only（“纯文本”）或ASCII Text（“ASCII文本”）。如果不能完全搞清楚如何让字处理器执行该操作，也不要紧张。只需代之以在“记事本”或TextEdit中输入HTML文件，一切都应该会工作得很好（此外，总是要确保Web页面的文件名以.html或.htm结尾）。
问：我在Internet上看到过一些Web页面在开始处没有<!DOCTYPE>或<html>标签。你说过，页面总是必须以这些标签开头，这是怎么回事？
答：如果你忘记了包括<!DOCTYPE>或<html>标签，许多Web浏览器将会原谅你，并且无论如何都会正确地显示页面。不过，包括它是一个非常好的主意，因为一些软件确实需要它，以将页面识别为有效的HTML。此外，你还希望页面是真正的HTML页面，以使它们遵守最新的Web标准。
问：我根本不需要使用语义标记吗？你不是在本章中一直都在说有没有它页面都是有效的吗？
答：是的，所有这些元素都不是有效的HTML文档所必需的。你不必使用其中任何标记，但是我强烈建议你不要只考虑把这些标记用于视觉显示，也要考虑用于语义含义。视觉显示对于屏幕阅读器毫无意义，但是语义元素可以通过这些机器传达大量的信息。
问：我对于何时使用<section>以及何时使用<aside>仍然懵懂无知，你能更清楚地加以说明吗？
答：我不会责备你。HTML5 Doctor Web站点上有可用的资源，它是我见过的最好的资源之一，可以帮助你消除混淆。它是用于HTML5分区的流程图，可以在http://html5doctor.com/downloads/h5d-sectioning-flowchart.png上找到它。这幅流程图将询问你一些关于内容的恰当问题，并且帮助你确定要使用的正确的容器元素。
本测验包含一些问题和练习，可帮助读者巩固本章所学的知识。在查看后面的“答案”一节的内容之前，要尝试尽量回答所有的问题。
1．每个HTML页面都需要哪5个标签？
2．用于产生以下主体内容的HTML标签和文本是什么？
具有单词“We are Proud to Present...”的标题。
具有一个单词“Orbit”的次级标题。
具有单词“The Geometric Juggler”的不太重要的标题。
3．你将使用什么代码创建一个完整的HTML Web页面，它具有页面标题“Foo Bar”，顶部有一个标题“Happy Hour at the Foo Bar”，然后是单词“Come on down!”，它采用常规字体？尝试使用你刚刚学过的一些语义元素。
4．本章中讨论的哪个语义元素适合于包含在文章中使用的词语的定义？
5．在<header>元素内必须使用<h1>、<h2>、<h3>、<h4>、<h5>或<h6>元素吗？
6．在单个页面内可以具有多少个不同的<nav>元素？
1．每个HTML页面都需要<html>、<head>、<title>和<body>标签（以及它们的封闭标签</html>、</head>、</title>和</body>），在第一行还需要<!DOCTYPE html>标签。
2．主体内的代码看起来如下所示：
<h1>We are Proud to Present...</h1>
<h2>Orbit</h2>
<h3>The Geometric Juggler</h3>3．你的代码可能看起来如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foo Bar</title>
</head>
<body>
<header>
<h1>Happy Hour at the Foo Bar</h1>
</header>
<section>
<p>Come on Down!</p>
</section>
</body>
</html>4．<aside>元素适合于此任务。
5．否。除了另一个<header>元素或<footer>元素之外，一个<header>元素可以包含任何其他的流式内容。不过，标题元素（<h1>~<h6>）在<header>元素中不是必需的。
6．可以根据需要具有许多<nav>元素。诀窍是只“需要”少数几个<nav>元素（也许只需要用于主导航系统和辅助导航系统的<nav>元素），否则含义将会丢失。
