详情
本书将PHP、MySQL和JavaScript这3种流行的开源Web开发工具融于一体，语言通俗易懂、深入浅出。通过本书的学习，读者将学会如何设置以及使用PHP脚本语言、MySQL数据库系统以及JavaScript，来创建出一个动态的Web站点。
书名：PHP、MySQL和JavaScript入门经典（第6版）
ISBN：978-7-115-48349-2
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
著 [美] 朱莉•C•梅洛尼（Julie•C•Meloni）
译 李 军
责任编辑 陈冀康
人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
读者服务热线：(010)81055410
反盗版热线：(010)81055315
Julie C. Meloni: Sams Teach Yourself PHP, MySQL and JavaScript All in One
ISBN: 978-0-672-33770-3
Copyright © 2018 by Pearson Education, Inc.
Authorized translation from the English languages edition published by Pearson Education, Inc.
All rights reserved.
本书中文简体字版由美国Pearson公司授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。
版权所有，侵权必究。
本书针对PHP、MySQL和JavaScript的最新版本，结合Web开发的实际需求，介绍了编程和应用开发技能，并通过一些典型的项目案例，帮助读者开发出功能强大的Web应用。
本书分为5个部分和4个附录。第1部分“Web应用基础知识”，包括前5章，帮助读者理解Web上的通信，以便能够编写基本的PHP脚本，还介绍了HTML、CSS和JavaScript的基础知识。第2部分“动态Web站点基础”，包括第6章到第10章，主要介绍JavaScript的语法和用法。第3部分“提高Web应用程序的层级”，包括第11章到第15章，主要介绍PHP语言的基础知识，以及如何使用cookies和用户会话。第4部分“将数据库整合到应用程序中”，包括第16章到第18章，介绍了使用数据库的通用知识，包括SQL基础知识，以及MySQL专有的函数以及其他信息。第5部分“应用开发基础”，包括第19章到第22章，专门介绍使用PHP和MySQL来执行一个特定的任务，综合应用了本书中的所有知识。附录部分介绍了XAMPP、MySQL、Apache和PHP的安装和配置。在每一章的最后，都有测验问题和额外的练习，帮助读者巩固所学的知识。
本书内容全面，讲解详细，由浅入深，实例丰富，可作为PHP、MySQL、JavaScript初学者的学习指南，也可作为Web开发技术人员的参考用书。
欢迎阅读本书。本书综合了《HTML、CSS和JavaScript入门经典（第2版）》（《Sams Teach Yourself HTML, CSS & JavaScript All in One (Second Edition)》）和《PHP、MySQL和Apache入门经典（第5版）》（《Sams Teach Yourself PHP, MySQL & Apache All in One (Fifth Edition)》）中最有用的部分，根据技术上所发生的必然的变化更新了内容，并为你打下Web应用“全栈”开发的基础。
示例提供了这种基础。本书通过展示那些层层构建的代码，解释代码的细节，并且给出示例的输出（也就是在你计算机的屏幕上看上去是什么样子），从而帮助你加深对HTML、CSS、JavaScript和PHP（以及和MySQL的数据库交互）的理解。
本书的目标并不是让你成为这些技术中的某一方面的专家，而是让你具备开发现代的、符合标准的Web应用程序的基础技能。需要特别注意如下几点。
正是因为注意了这些基本问题，本书之前的多个版本成了畅销书，而这一新版也不例外。不管你选择专门研究HTML和CSS、JavaScript、PHP，还是要精通所有的这些技术，牢固的基础知识对你未来的开发工作都很关键。
本书只是你通向对技术开发的更高层级的理解的第一步，但并不意味着这是唯一的一步，记住这一点同样也很重要。在某件事情上成为专家，需要花1万小时的时间去练习，这可比你用来阅读本书的时间要长得多。
本书瞄准那些对万维网的概念有一般性了解的人，也就是说，知道有一个叫作万维网的东西，并且能够使用Web浏览器连接到网络上。这就够了，阅读本书不需要再具备其他的知识。
本书深入介绍PHP编程的那些章，也并不需要读者具备该语言的知识。然而，如果你已经拥有其他编程语言的经验，你会发现阅读起来更容易，因为你熟悉诸如变量、控制结构、函数、对象等类似的编程元素。类似的，如果你已经使用过MySQL之外的数据库，那么，你已经拥有了阅读和MySQL相关内容的牢固基础。
本书分为5个部分，每一个部分对应一组专门的主题。建议读者一章一章地按顺序阅读，每一章的内容都基于其前面一章的内容。
第1部分：Web应用基础知识。这部分帮助你理解Web上的通信，以便能够编写基本的PHP脚本，还介绍了HTML、CSS和JavaScript的基础知识。即便你已经从基本知识的层面熟悉这些技术中的一种或多种，还是应该快速浏览一下这几章以进行温习。本书剩下的大多数内容，都构建在刚开始的这几章的基础之上。
第2部分：动态Web站点基础。这部分主要介绍JavaScript的语法和用法。在动态Web站点中，JavaScript提供动态功能—HTML和CSS通常只是负责实现漂亮的外观，而JavaScript要让内容动起来，至少在你加入PHP和数据库功能之前，JavaScript要做到这一点。
第3部分：提高Web应用程序的层级。这部分跨越前端并且深入应用程序的后端。你将会学习PHP语言的基础知识，包括像数组和对象这样的结构性元素，然后学习如何让cookies和用户会话为你所用。和以前需要了解的关于表单的内容相比，在本书的这个部分所要学的内容更多。
第4部分：将数据库整合到应用程序中。这部分的各章介绍了使用数据库的通用知识，例如数据库规范化，以及使用PHP连接和使用MySQL。这部分还包括SQL基础知识、MySQL专有的函数以及其他信息。
第5部分：应用开发基础。这部分的各章专门介绍使用PHP和MySQL来执行一个特定的任务，综合应用了本书中的所有知识。项目包括创建一个讨论论坛、一个基本的网店和一个简单的日历。
在每一章的最后，都有几个测验问题，来测试你对所学的内容掌握得如何。额外的练习则提供了另一种方法来应用本章所学到的知识，并且指导你如何使用下一章中将要学习的新内容。
本书各章中的代码都可以通过异步社区（www.epubit.com）下载。
自己录入代码，在打字、产生错误以及烧脑的查找分号错误的任务等方面会有一些有用的体验。然而，如果你想要略过这些课程，并且只是把本书的工作代码上传到你的站点，也没问题。
本书使用不同的字体来区别代码和正文，也通过这种方法来帮你识别重要的概念。在本书中，代码、命令和你所输入的或者在计算机屏幕上看到的文本，都使用等宽字体。在正文中定义新术语的地方使用斜体。此外，特别的内容板块都带有图标。
注意：
给出了和当前话题相关的一段有趣的信息。
提示：
提出建议，或者教给你执行一项任务的简单方法。
警告：
警告你潜在的缺陷并说明如何避免它们。
在每一章的最后，都有一个简短的问题和解答部分，会提出那种“答案显而易见”的问题。还有一个简短但完整的测验，让你能够进行测试，以确保理解了本章所介绍的所有内容。最后，还有一两个可选的练习题，让你有机会在继续往下阅读之前练习一下自己的新技能。
本书由异步社区出品，社区（https://www.epubit.com/）为您提供相关资源和后续服务。
本书提供如下资源：
要获得以上配套资源，请在异步社区本书页面中点击
，跳转到下载界面，按提示进行操作即可。注意：为保证购书读者的权益，该操作会给出相关提示，要求输入提取码进行验证。
作者和编辑尽最大努力来确保书中内容的准确性，但难免会存在疏漏。欢迎您将发现的问题反馈给我们，帮助我们提升图书的质量。
当您发现错误时，请登录异步社区，按书名搜索，进入本书页面，点击“提交勘误”，输入勘误信息，单击“提交”按钮即可。本书的作者和编辑会对您提交的勘误进行审核，确认并接受后，您将获赠异步社区的100积分。积分可用于在异步社区兑换优惠券、样书或奖品。
我们的联系邮箱是contact@epubit.com.cn。
如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名，以便我们更高效地做出反馈。
如果您有兴趣出版图书、录制教学视频，或者参与图书翻译、技术审校等工作，可以发邮件给我们；有意出版图书的作者也可以到异步社区在线提交投稿（直接访问www.epubit.com/selfpublish/submission即可）。
如果您是学校、培训机构或企业，想批量购买本书或异步社区出版的其他图书，也可以发邮件给我们。
如果您在网上发现有针对异步社区出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接发邮件给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。
“异步社区”是人民邮电出版社旗下IT专业图书社区，致力于出版精品IT技术图书和相关学习产品，为作译者提供优质出版服务。异步社区创办于2015年8月，提供大量精品IT技术图书和电子书，以及高品质技术文章和视频课程。更多详情请访问异步社区官网https://www.epubit.com。
“异步图书”是由异步社区编辑团队策划出版的精品IT专业图书的品牌，依托于人民邮电出版社近30年的计算机图书出版积累和专业编辑团队，相关图书在封面上印有异步图书的LOGO。异步图书的出版领域包括软件开发、大数据、AI、测试、前端、网络技术等。
异步社区
微信服务号
第1章 理解Web的工作方式
第2章 构造HTML文档
第3章 理解CSS方框模型和定位
第4章 理解JavaScript
第5章 PHP简介
在本章中，你将学习以下内容：
WWW（World Wide Web，万维网）简史；
术语Web页面（web page）的含义是什么，为什么这个术语并不总会反映所涉及的全部内容；
怎样把内容从你的个人计算机发送到别人的Web浏览器上；
怎样选择Web托管提供商；
不同的Web浏览器和设备类型可能怎样影响内容；
怎样使用FTP把文件传输到Web服务器上；
应该把文件存放在Web服务器上的什么位置；
在不涉及Web服务器的情况下怎样分发Web内容。
在学习HTML（Hypertext Markup Language，超文本标记语言）、CSS（Cascading Style Sheets，层叠样式表）和JavaScript的复杂知识之前（先不要说像PHP这样的后端编程语言），对这些技术有一个牢固的理解是很重要的，正是这些技术帮助把纯文本文件转换成你在计算机、平板电脑或智能手机上浏览WWW时看到的丰富的多媒体显示。
例如，如果不使用Web浏览器查看，那么包含标记和客户端代码（HTML、CSS和JavaScript）的文件将是无用的，并且除非使用Web服务器，否则除你之外的其他人将无法查看你的内容。Web服务器使你的内容可供其他人使用，他们反过来又使用其Web浏览器导航到一个地址并等待服务器向自己发送信息。你将密切地参与这个发布过程，因为你必须创建文件，然后把它们放到服务器上，使得文件的内容第一时间可用，并且必须确保你的内容像预期的那样出现在最终用户面前。
在月球上还没有任何人类足迹的时候，一些有远见的人决定去看看他们是否能够连接几个主要的计算机网络。我将和你分享它们的名称和故事（可以说非常丰富），这些事情的最终的结果是“所有网络之母”，我们称之为Internet。
到1990年，通过Internet访问信息还相当具有技术性。事实上，它是如此困难，以至于那些拥有博士学位的物理学家们在尝试交换数据时也经常会遭受挫折。有这样一位物理学家，即现在非常著名的Tim Berners-Lee爵士，他设计了一种方式，可以通过超文本链接轻松地交叉引用Internet上的文本。
这不是一种新思想，但是他开发的简单HTML却成功地兴盛起来，而更多雄心勃勃的超文本项目步履维艰。超文本（Hypertext）最初意指以电子形式存储的文本，并且在页面之间具有交叉引用的链接。它现在是一个更宽泛的术语，指可以链接到其他对象的任何几何对象（文本、图像、文件等）。超文本标记语言（Hypertext Markup Language）是用于描述如何组织和链接文本、图形以及包含其他信息的文件的一种语言。
到1993年，全世界只有100台左右的计算机配备提供HTML页面。这些互连的页面称为WWW（World Wide Web，万维网），并且人们编写了几个Web浏览器程序，以允许查看Web页面。由于Web日益普及，几个程序员不久之后编写了可以查看带有图形图像的文本的Web浏览器。从此，Web浏览器软件的持续开发以及包括HTML、CSS和JavaScript在内的Web技术的标准化带领我们进入了今天的世界。在这个世界里，有超过10亿个Web站点提供数万亿（甚至更多）的文本和多媒体文件。
注意：
有关WWW发展历史的更多信息，参见关于这个主题的维基百科的介绍。
上面几段文字实际上只是Web发展简史中的一个不同寻常的历史阶段的简短描述。今天的大学生从来也不了解WWW不存在的那段时间，以及永远在线的信息和无处不在的计算的思想对我们以后生活的各个方面产生深远的影响。学完本书时，你将把Web看作是任何人（而不仅限于少数的技术人员，如果你愿意的话，可以将其称为怪才）都可以掌握的技能，而不再把Web内容创建和管理视作只有少数怪才所拥有的一项技能。
你可能注意到本书中使用的术语是“Web内容”（Web content），而不是“Web页面 ”（Web page），我们是有意这样做的。尽管我们谈论的是“访问Web页面”，但是实际的意思是“查看我们计算机上的一个地址上的所有文本和图像”。我们阅读的文本和查看的图像都是通过Web浏览器呈现的。浏览器将按照各个文件中的指示来呈现它们。
这些文件可以包含被HTML代码标记或包围的文本，告诉浏览器如何显示文本——作为标题、作为段落或者以项目列表显示等。一些HTML标记告诉浏览器显示图像或视频文件，而不是纯文本，由此得出以下结论：发送给Web浏览器的是不同类型的内容，因此仅仅称作Web页面将无法完全涵盖它们。我们在这里代之以Web内容这个术语，以涵盖完整的内容范围，包括文本、图像、音频、视频以及线上可以找到的其他媒体。
在后面几章中，你将学习链接到或直接创建在Web站点中发现的各类多媒体Web内容的基础知识，以及使用PHP通过服务端脚本创建动态内容的方法。此时，你只需记住你正在控制用户在访问你的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" height="92" width="272" id="hplogo" src="/images/branding/
googlelogo/2x/googlelogo_color_272x92dp.png">这个图像的HTML代码是一个<img>标签，并且它提供了一些属性，告诉浏览器显示这个标志所必需的信息：文件源地址（src）、宽度（width）和高度（height）。在后面各章中，我们将会学习关于属性的更多知识。
4．浏览器查看<img>标签中的src属性，查找源位置。在这种情况下，可以在与浏览器获取HTML文件相同的Web地址（www.google.com）上的images目录中找到googlelogo_color_272x92dp.png图像。
5．浏览器请求位于Web地址http://www.google.com/images/branding/googlelogo/2x/ googlelogo_color_272x92dp.png的文件。
6．Web服务器解释该请求，找到文件，并把该文件的内容发送给请求它的Web浏览器。
7．Web浏览器在显示器上显示图像。
在Web内容递送过程的描述中可以看到，Web浏览器不仅仅是充当用于查看内容的“相框”。浏览器将会依据文件中的HTML命令组合Web内容成分，并布置那些部分。
也可以在本地或者在你自己的硬盘驱动器上查看Web内容，从而无需Web服务器。获取和显示内容的过程与上述步骤列出的过程相同，其中浏览器将寻找并解释HTML文件的代码和内容，但是往返行程更短：浏览器将在你自己的计算机的硬盘驱动器上（而不是在远程机器上）寻找文件。如果文件中嵌入了任何基于服务器的编程语言，将需要Web服务器解释它们，但是这超出了本书的范围。实际上，无需拥有自己的Web服务器，你就可以顺利学完本书中关于HTML、CSS和JavaScript所有内容。但如果是这样的话，除你自己之外其他任何人都将无法查看你的杰作。
尽管刚才告诉你无须具有Web服务器也可以顺利地学完本书中关于HTML、CSS和JavaScript所有内容，我们还是建议你使用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站点的每位访问者将可能使用与你自己不同的硬件和软件配置，包括设备类型（台式机、笔记本电脑、平板电脑、智能手机）、屏幕分辨率、浏览器类型、浏览器窗口大小、连接的速度等。记住，当访问者查看你的站点时，你不能控制他们的任何行为。因此，在设置Web托管环境并准备好工作时，要考虑下载多种不同的Web浏览器，以便可以使用本地测试工具套件。下面让我解释为什么这一点很重要。
尽管所有的Web浏览器都会以相同的常规方式处理信息，但是它们当中的一些特定的区别将导致事情在不同的浏览器中看起来并不总是相同的，甚至相同Web浏览器的相同版本的用户也可能通过选择不同的显示选项和/或更改他们的浏览窗口的大小，以改变页面的显示方式。所有主流的Web浏览器都允许用户利用他们自己的选择覆盖Web页面作者指定的背景和字体。当页面第一次出现在人们的显示屏幕上时，屏幕分辨率、窗口大小和可选的工具栏也可能改变他们所看到的页面大小。你只能确保自己编写的是符合标准的HTML和CSS。
注意：
在第3章中，我们将学习一点响应式Web设计的概念，其中站点的设计将根据用户的行为和浏览环境（屏幕大小、设备等）自动转换和改变。
在任何情况下，都不要花时间创建只会在你自己的计算机上看起来完美无缺的最终设计——除非你想要在朋友的计算机上、大街上的咖啡店里的计算机上或者你的iPhone上查看它时面对失望。
应该总是在尽可能多的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>为了利用这些内容，可以打开所选的文本编辑器，比如Notepad（在Windows上）或TextEdit（在Mac上）。不要使用WordPad、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客户端。
图1.4 FireFTP的界面
当选择一个FTP客户端并在计算机上安装它时，就准备好从Web服务器上传和下载文件。在下一节中，我们将使用程序清单1.1中的示例文件解释这个过程的工作方式。
下面的步骤说明了如何使用Classic FTP连接到Web服务器并传输文件。不过，所有的FTP客户端都使用类似的（如果不是完全相同的）界面。如果理解了下面的步骤，就应该能够使用任何FTP客户端。记住，首先需要主机名、账户的用户名和账户的密码。
1．启动Classic FTP程序，并单击Connect按钮，将提示你填写要连接到的站点的相关信息，如图1.5所示。
2．填写图1.5所示的每个项目，如下所述。
3．你可能要切换到Advanced选项卡，并修改以下可选的项目，如图1.6所示。
图1.5 在Classic FTP中连接到新的站点
图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。你自己不必创建这个目录，托管提供商将为你创建它。
图1.7 通过Classic FTP成功连接到远程Web服务器
双击文档根目录名称打开它。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服务器之后，就可以创建一个指向它的链接（在第2章中将学习这方面的知识）。换句话说，Web服务器不仅仅能提供HTML文件。
下面给出了一段示例HTML代码，在本书后面将学习关于它的更多知识。下面的代码将用于一个名为artfolio.zip的文件，它位于Web站点的downloads目录中，并且会显示链接文本“Download my art portfolio!”：
<a href="/downloads/artfolio.zip">Download my art portfolio!</a>当你想到索引时，可能会想起图书后面的索引，它告诉你在哪里寻找各个关键词和主题。Web服务器目录中的索引文件可以用于此目的（如果你这样设计它的话）。事实上，索引这个名称最初就起源于此。
当人们导航到你的Web站点中的特定目录时，你希望他们把某一个页面视为默认的文件，而index.html文件（或者采用它通常的叫法即索引文件，index file），就是你给这个页面所提供的名称。
索引文件的另一个作用是：你的站点拥有一个索引页面，但是访问站点上的某个目录的用户并没有指定该页面，他仍然会登录到你的站点的该部分的（或者站点本身的）主页面。
例如，可以输入苹果公司的官方网址，并登录到Apple的iPhone信息页面上。
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标记文本文件来生成Web内容的概念。我们应该获悉Web内容不仅仅是“页面”，Web内容还包括图像、音频和视频文件。所有这些内容都存在于Web服务器上，这是一台通常远离你自己的计算机的远程机器。在你的计算机或其他设备上，你使用Web浏览器请求、获取并且最终在屏幕上显示Web内容。
我们学习了在确定Web托管提供商是否适应你的需求时要考虑的标准。在选择了Web托管提供商之后，就可以开始把文件传输到Web服务器，我们还学习了如何使用FTP客户端执行该操作。我们还学习了一点关于Web服务器目录结构和文件管理的知识，以及给定的Web服务器目录中的index.html文件的重要的用途。此外，我们还学习了可以在可移动媒体上分发Web内容，并且学习了如何动手构造文件和目录，以实现在不使用远程Web服务器的情况下查看内容的目标。
最后，我们学习了把工作成果放到Web服务器上后，在多种浏览器中对其进行测试的重要性。编写有效的、符合标准的HTML和CSS代码有助于确保你的站点对于所有的访问者看上去都是相似的，但是如果没有接收到来自开发团队之外的潜在用户的输入，那么仍然不应该进行设计——当你是设计团队中的一员时，获取其他人的输入甚至更重要！
Q：我查看了Internet上的一些Web页面的HTML源代码，它们看上去极难学习。我必须像一名计算机程序员那样思考，才能够学习这种材料吗？
A：尽管复杂的HTML页面看上去可能的确令人畏缩不前，但是学习HTML比学习实际的程序设计语言（如C++或Java）要容易得多。HTML是一种标记语言，而不是程序设计语言，使用它标记文本，以便浏览器可以以某种方式呈现文本。与开发计算机程序相比，这是一组完全不同的思考过程。你实际上不需要任何作为计算机程序员的经验或技能，就能成为一名成功的Web内容作者。
许多商业Web站点背后的HTML代码看上去比较复杂的原因之一是：它们很可能是通过可视化Web设计工具创建的，该工具是一个“所见即所得”（what you see is what you get，WYSIWYG）编辑器，在某些情况下会使用其软件开发人员让它使用的任何标记（而在手工编码中，你可以完全控制得到的标记）。本书将从头开始介绍基本的编码，这通常会得到干净的、易于阅读的源代码。可视化Web设计工具倾向于使代码难以阅读，以及产生错综复杂且不符合标准的代码。
Q：运行你建议的所有测试将要花费比创建我的页面更长的时间！我不能利用时间较少的测试蒙混过去吗？
A：如果你的页面没有打算用于赚钱或者提供重要的服务，那么当它们在某些用户看来很滑稽或者偶尔会产生错误时，这可能不是一个大问题。在这种情况下，只需利用两种不同的浏览器测试每个页面，并且每天访问它一次。不过，如果需要展示专业的图像，除了进行严格的测试之外，将别无选择。
Q：说真的，谁在乎我是怎样组织我的Web内容的呢？
A：无论相信与否，你的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．不是。使用一种目录结构以进行文件组织完全取决于你自己，尽管强烈建议这样做，因为它可以简化内容维护。
在本章中，你将学习以下内容：
如何用HTML创建一个简单的Web页面；
如何包括每个Web页面必须具有的所有HTML标签；
如何在Web页面中使用链接；
如何利用段落和换行符组织页面；
如何利用标题组织内容；
如何使用HTML5的语义元素；
如何开始使用基本的CSS。
在第1章中，我们基本了解了创建Web内容并且在线（或者在本地，如果还没有Web托管提供商的话）浏览它的幕后过程。在本章中，我们将言归正传，介绍必须出现在HTML文件中的各种元素，以使其在Web浏览器中适当地显示。
概括来讲，本章将快速总结HTML的基础知识，并给出一些实用的提示，帮助你作为Web页面开发人员充分利用好自己的时间。HTML5元素可以让我们增强在标记过的文本中所提供的信息的语义（含义），在学习它们的时候，我们将开始更深入一点地研究它背后的理论。你将密切观察6个元素，它们构成了文档的稳定语义结构的基础，这6个元素是：<header>、<section>、<article>、<nav>、<aside>和<footer>。最后，我们将学习使用层叠样式表（Cascading Style Sheets, CSS）来改进Web内容的显示的基础知识，这允许我们设置很多的格式化特征，例如，包括准确字型控制、字母间距和行间距、边距以及页面边框等。
在本书余下的全部内容中，我们将看到在代码示例中如何适当地使用这些标签，因此在继续学习后面的内容之前，本章将确保你很好地领会了它们的含义。
在第1章中，我们学习到Web页面只是一个被HTML代码标记（或包围）的文本文件，这些代码告诉浏览器如何显示文本。要创建这些文本文件，可以使用诸如“记事本”（在Windows上）或TextEdit（在Mac上）之类的文本编辑器，不要使用“写字板”、Microsoft Word或其他全功能的字处理软件，因为它们所创建的文件类型与我们用于创建Web内容的纯文本文件不同。
警告：
我们反复申明这一点，因为它对于结果和学习过程本身非常重要：不要利用Microsoft Word或者任何其他HTML兼容的字处理器创建第一个HTML文件，其中大多数程序都试图以奇怪的方式为你重写HTML代码，这可能会把你完全搞糊涂。
此外，我还建议不要使用所见即所得（what you see is what you get，WYSIWYG）的图形编辑器，比如Adobe Dreamweaver。你很可能发现，在开始学习HTML时，从一个简单的文本编辑器入手将更容易，并且更有教育意义。
在开始工作前，应该从你想要放在Web页面上的一些文本开始。
1．查找（或者编写）几个关于你自己、你的家庭、你的公司、你的宠物或者你感兴趣的其他某个主题的文本段落。
2．把这段文本另存为标准的ASCII纯文本。“记事本”（Windows上的）和大多数简单的文本编辑器总是把文件另存为纯文本，但是如果使用另一个程序，则可能需要选择这种文件类型作为一个选项（在选择“文件”>“另存为”命令之后）。
在学习本章的过程中，将给文本文件添加HTML标记（称为标签，tag），从而把它转变成在Web浏览器呈现最佳的Web内容。
在保存包含HTML标签的文件时，总是要给它们提供以.html结尾的名称。这很重要。如果在保存文件时忘记了在文件名末尾输入.html，大多数文本编辑器都会给它提供某个其他的扩展名（比如.txt）。如果发生这种情况，当你尝试利用Web浏览器查看文件时，可能会找不到文件，即使找到文件，它肯定也不能正确地显示。换句话说，Web浏览器期望Web页面文件具有.html文件扩展名并且具有纯文本格式。
在访问Web站点时，还可能遇到文件扩展名为.htm的页面，它是另一个可接受的文件扩展名。你还可能发现在Web上使用的其他文件扩展名，比如.jsp（Java Server Pages）、.asp（Microsoft Active Server Pages）或.php（PHP：Hypertext Preprocessor）。除了程序设计语言之外，这些文件中也包含HTML，尽管这些文件中的程序代码是在服务器端编译的，并且你在客户端看到的一切都是HTML输出。但是如果查看源文件，你很可能会看到程序设计代码和标记代码错综复杂地交织在一起。在本书后面的各章中，我们将学习如何把PHP加入到Web站点中。
程序清单2.1显示了一段可以输入并保存的文本示例，用于创建一个简单的HTML页面。如果用Web浏览器打开这个文件，将会看到如图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），因为在<!DOCTYPE>标签中，html是用于将文档声明为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中所示的页面。
▲
如果你已经获得了一个Web托管账户，此时就可以使用FTP，把firstpage.html文件传输到Web服务器上。事实上，从本章往后，所有的说明都假定你有托管提供商并且熟悉通过FTP来回传送文件，如果不是这样，请在继续学习下面的内容之前回顾一下第1章的内容。此外，如果有意选择在本地（没有Web主机）处理文件，就要准备调整指导，以适应你的特定需求（比如忽略“传输文件”和“输入URL”命令）。
注意：
不需要连接到互联网，也可以查看存储在你自己的计算机上的Web页面。默认情况下，每次启动Web浏览器时，它都将尝试连接到互联网，这在大多数时间都是有意义的。不过，如果在硬盘驱动器上本地（脱机）开发页面，这可能会造成麻烦，并且会遇到页面未找到的错误。如果一天24小时都通过LAN、线缆调制解调器、DSL或Wi-Fi连接到互联网，这就是个尚无定论的问题，因为浏览器永远也不会抱怨脱机。否则，就要依赖于浏览器的类型采取合适的动作，可以检查浏览器的Tools（“工具”）菜单下面的选项。
现在应该向你揭示HTML标签的秘密语言了。当你理解了这种语言，将具有远远超过其他人的创造力。不要告诉其他人，但它确实十分容易。
第一行代码是文档类型声明，在HTML5中，它非常简单，如下所示：
<!DOCTYPE html>这个声明把文档标识为HTML5，这确保Web浏览器可以预期会发生什么事情，并且准备好以HTML5呈现内容。
许多HTML标签具有两个部分：开始标签（opening tag）和结束标签（closing tag），其中前者指示文本块的开始位置，后者指示文本块的结束位置。结束标签开始于一个“/”（正斜杠），它位于“<”符号之后。
另一类标签是空标签（empty tag），它有所不同，因为它不包括一对匹配的开始标签和结束标签。相反，空标签只包含单个标签，它开始于“<”，结束于“/>”符号。尽管结尾斜杠在HTML5中不再是必需的，但是在老版本的HTML中，确实存在一些形式为“/>”的空标签。
下面快速概括介绍了这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>开始标签之后。
提示：
你可能发现创建和保存“裸”页面（也称为骨架[skeleton]页面或模板[template]）很方便，它只具有DOCTYPE以及<html>、<head>、<title>和<body>开始标签和结束标签，类似于程序清单2.1中的文档。以后，无论何时想要创建一个新的Web页面，你都可以打开该文档作为起点，这样就可以使自己避免每次都要麻烦地输入所有那些必需的标签。 <title>标签对用于标明出现在页面的头部区域的页面标题，说它出现在头部区域，也就是说在开始<head>标签之后，并且在结束</head>之前。在后续的章节中，我们将学习其他的一些可以放在<head>和</head>之间的高级标题信息，例如用于格式化页面的样式表规则。
程序清单2.1中的<p></p>标签对包含了一个文本段落。只要有可能，就应该把文本块包含在合适的容器元素中，在本书后面，我们将学习关于容器元素的更多知识。
并没有规则说你必须在Web内容中包含链接，但是，当你发现一个Web站点甚至没有包含一个链接（不管这个链接是连接到相同域如yourdomain.com、另一个域名、或者甚至是相同的页面）的时候，你一定会感到奇怪。Web上链接随处可见，但是，理解一些链接“幕后的”细节也很重要。
当文件属于相同的域，你可以通过直接在<a>标签的href属性中提供文件的名称以链接到它们。属性（attribute）是和一个标签相关联的一段额外的信息，它提供了关于该标签的更多的细节。例如，<a>标签的href属性标明了你所要链接到的页面的地址。
当有几个页面的时候，或者当你开始用一个有组织的结构来管理站点中的内容的时候，你应该把文件放到目录（或者可以称之为文件夹）之中，而目录的名称反映出其中的内容。例如，所有的图像都应该放到一个images目录中，公司信息应该放到一个about目录中，诸如此类。不管你如何在自己的Web服务器中组织自己的目录，你可以使用相对地址，它包含了从一个页面找到另一个页面所需的足够信息。相对地址（relative address）说明从一个Web页面到另一个Web页面的路径，而相反，完全的互联网地址（或绝对地址）包含了完整的协议（http或https）以及域名（www.yourdomain.com）。
正如第1章所介绍过的，Web服务器的文档根目录是指定为Web内容的顶级目录的那个目录。在Web地址中，文档根目录用斜杠（/）表示。所有后续的目录层级，都使用相同类型的斜杠分隔开。如下面的例子所示：
/directory/subdirectory/subsubdirectory/警告：
在HTML中，总是用斜杠（/）将目录隔开。不要使用反斜杠（\）来将目录隔开，通常在Windows中才这么用。记住，Web上的一些内容都是向前移动的，因此使用斜杠。
假设你要在自己的文档根目录中创建一个名为zoo.html的页面，并且想要包含分别指向elephants子目录中名为african.html和asian.html的页面的链接。这两个链接应该如下所示：
<a href="/elephants/african.html">Learn about African elephants.</a>
<a href="/elephants/asian.html">Learn about Asian elephants.</a><a>标签是负责Web上的超链接的标签，它的名字来自于单词anchor（锚的意思），因为一个链接就是作为Web页面中的一个指定的位置。<a>标签可以用来将页面上的一个位置标记为一个锚点，使得你能够创建指向这个确切位置的一个链接。例如，页面的顶部可以标记为如下所示：
<a name="top"></a><a>标签通常使用href属性来指定一个超链接目标。<a href>就是所点击的对象，<a id>是当你单击超链接的时候将会去向哪里。在这个例子中，<a>标签仍然是指定了一个目标位置，但是并没有创建你能够看到的实际的链接。相反，<a>标签针对页面上标签所出现的具体位置给出了一个名称。必须包含这个<a>标签，并且必须给id属性一个唯一的名称，但是<a>和</a>之间不一定要有文本。
要链接到这个位置，可以使用如下的形式：
<a href="#top">Go to Top of Page</a>到自己的站点内部的页面的链接和到外部Web内容的链接之间的唯一区别就是，当链接到站点之外的时候，需要包含到该内容的完整路径。完整地址在域名之前包括http://，然后是到文件（例如，一个HTML文件、一个图像文件或一个多媒体文件）的完整路径名。
例如，要包含从你自己的Web页面中到Google的一个链接，可以在你的<a>链接中使用这种类型的绝对地址：
<a href="http://www.google.com/">Go to Google</a>警告：
你可能已经知道了，在大多数Web浏览器中输入地址的时候，可以省略掉任何地址前面的http://。然而，当你在Web页面的一个<a href>链接中输入Web地址的时候，不能够漏掉这个部分。
可以运用在前面的小节中所学的知识，创建一个链接，指向另一个页面上的具名的锚点。链接的锚点并不仅限于相同的页面。可通过包含地址或文件名，后面跟着一个#符号和锚点名称，从而链接到另一个页面上的一个具名的锚点。例如，如下的链接将会把你带到域名www.takeme2thezoo.com（虚构的）上的elephants目录中的african.html页面中一个名为photos的锚点：
<a href="http://www.takeme2thezoo.com/elephants/african.html#photos">
Check out the African Elephant Photos!</a>如果你要从www.takeme2thezoo.com域名上已有的另一个页面链接过来（实际上，因为你是站点的维护者），你的链接可以直接用如下形式：
<a href="/elephants/african.html#photos">Check out the
African Elephant Photos!</a>正如我们所介绍过的，在这个实例中，http://和域名 并不是必须的。
警告：
确保只是在<a href>链接标签中包含#符号。不要将#符号放到<a id>标签中，在这种情况下，到该名称的链接将会无效。
除了在页面之间链接和在单个页面的不同部分之间链接，<a>标签还能够链接到一个E-mail地址。这是让Web页面的访问者能够返回来和你交谈的最简单的方法。当然，你也可以只是向访问者提供你的E-mail地址，并且相信他们会将这个地址录入到自己所使用的任何的E-mail程序之中，但是这么做会增加出错的可能性。通过提供到你的E-mail地址的一个可点击的链接，可以使得访问者很轻松地给你发送电子邮件，并且杜绝了出现录入错误的机会。
到一个E-mail地址的HTML链接如下所示：
<a href="mailto:yourusername@yourdomain.com">Send me an
email message.</a>“Send me an email message”这句话会像任何其他的<a>链接一样地显示。
在简单地了解了超链接的世界之后，让我们回到关于内容组织和显示的话题上来。
Web浏览器在显示HTML页面时，它将会忽略换行符或者单词之间的空格数。例如，在图2.2上方显示的诗歌版本在所有单词之间只显示一个空格，即使在程序清单2.2中并不是这样输入它的。这是由于HTML代码中的额外空白会被自动缩减为一个空格。此外，当文本到达浏览器窗口的边缘时，它将自动换到下一行，而不管在原始的HTML文件中换行符出现在什么位置。
程序清单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>图2.2 当把程序清单2.2中的HTML显示为Web页面时，换行符和分段符只出现在<br>和<p>标签所在的位置
如果你想控制换行符和分段符实际出现的位置，则必须使用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浏览器中以特定的方式呈现。
理论上讲，还可以使用<h4>、<h5>和<h6>标签创建越来越不重要的标题，但是它们不是经常使用。无论如何，Web浏览器很少在这些标题与<h3>标题之间显示出显著的区别——尽管可以利用你自己的CSS控制它，并且在显示内容时，通常不会需要6种标题级别来显示内容的层次结构。
记住页面标题（title）与标题（heading）之间的区别很重要。在日常英语中，这两个单词通常可以互换使用，但是在谈论HTML时，<title>用于给整个页面提供一个标识名称，它不会显示在页面自身上，而只会出现在浏览器窗口的标题栏上。一方面，标题标签可以使页面上的某些文本在显示时进行视觉强调。每个页面只能有一个<title>，它必须出现在<head>与</head>标签内；另一方面，可以根据需要具有许多<h1>、<h2>和<h3>标题，并且按你设想的那样以任意顺序排列它们。不过，如前所述，应该使用标题标签紧密地控制内容的层次结构（只有一个<h1>标题才符合逻辑），而不要把标题用作一种实现特殊外观的方式，因为这是CSS该做的事情。
图2.3 在这个示例产品页面上使用3种标题级别显示内容的层次结构
警告：
不要忘记，放在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个示例之前，让我们看看图2.4中使用的元素，然后查看对各个元素本身的更深入地探索。在图2.4中，将在页面顶部看到一个<header>，并在底部看到一个<footer>——如前所述，非常直观。在页面左边使用的<nav>元素与用于导航的公共显示区域相匹配，而页面右边的<aside>元素则与用于辅助注释、引文、帮助文本以及用于获取关于内容的“for more information（更多信息）”链接的公共显示区域匹配。在图2.5中，你将看到其中一些元素改变了位置，不要担心——图2.4并不是语义标记的某种不可变的示例。
你在图2.5中看到的可能令人感到奇怪的内容是<section>元素内的<header>和<footer>。正如你稍后将学到的，<header>元素的作用是引入第二个示例，然后更深入地探讨各个元素本身。在图2.4中，你在页面顶部看到了一个<header>，并在页面底部看到了一个<footer>，如前所述，非常直观。在页面左边使用的<nav>元素与其后的内容匹配，<header>元素本身在文档大纲中不会传达任何级别。因此，可以根据需要使用许多<header>元素相应地标记内容，页面开头的<header>元素可能包含关于作为一个整体的页面的介绍性信息，<section>元素内的<header>元素可能非常容易，并且相应地包含关于其中的内容的介绍性信息。对于这个示例中的<footer>元素的多种外观来说，也是如此。
图2.5 使用嵌套的语义元素给内容添加更多的含义
让我们转向图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 1 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.6 程序清单2.4的输出结果
仅仅由于没有可见的样式，并不意味着含义丢失了。如本节前面所指出的，机器可以解释通过语义元素提供的文档结构。在图2.7中可以看到这个基本文档的大纲，它显示了这个文件在经过http://gsnedders.html5.org/outliner/上的HTML5 Outline工具检查后的输出结果。
图2.7 这个文档的大纲遵循语义标记
提示：
使用HTML5 Outline工具是检查你已经创建了标头、脚注和区域的一种良好方式，如果检查文档并在任意位置看到“无标题区域”，并且那些无标题的区域与<nav>或<aside>元素不匹配（它们对于包含标头具有更宽松的指导原则），那么你就要做一些额外的工作。
既然你已经见过了概念化文档中所表示信息的一些示例，就已经为开始标记那些文档做了更好的准备。下面几节将分别探讨各个语义元素。
在最基本的层面上，<header>元素包含介绍性信息。该信息可能采用实际的<h1>（或其他级别）元素的形式，或者它可能只是<p>或<div>元素内包含的标志图像或文本。内容的含义本质上应该是介绍性的，以保证它包括在<header></header>标签对内。
在本章迄今为止的示例中可以看到，<header>元素的公共位置位于页面的开始处。当以这种方式使用它时，包含标志或<h1>级别的页面标题就是有意义的，如下：
<header>
<img src="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 1 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元素可以分为多个类别。
如果想要了解关于把元素分类进内容模型中的更多信息，可以参见w3官网的介绍。
<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 1 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>© 2017 Acme Widgets, LLC. All Rights Reserved.</p>
</footer>与<header>元素类似，<footer>元素可以包含流式内容类别中的其他任何元素（其他<footer>或<header>元素除外），并且它也是其中一员。此外，<footer>元素不能包含在<address>元素内，但是<footer>元素可以包含<address>元素——事实上，<footer>元素是存放<address>元素的常见位置。
在<footer>元素内放置有用的<address>内容是<footer>元素的最有效的应用之一（更不要说<address>元素了），因为它提供了关于它所引用的页面或页面区域的特定上下文信息。下面的代码段展示了在<footer>内使用<address>的情况：
<footer>
<p>© 2017 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@example.com">lawyer@example.com</a>
</address>
</footer>与<header>元素一样，不限于只使用一个<footer>元素。可以根据需要使用许多<footer>元素，只要它们是关于包含元素的额外信息的容器即可。程序清单2.4展示了将<footer>元素用于页面和一个<article>元素，它们二者都是有效的。
在前面的各节中，我们学习了HTML的基础知识，包括如何为所有的Web内容建立一个骨架式HTML模板。在本节中，我们将学习如何使用层叠样式表（Cascading Style Sheet，CSS）微调Web内容的显示。
样式表背后的概念很简单：创建一个样式表文档，指定字体、颜色、间距和其他特征，用于建立Web站点的独特外观。然后将每个应该具有那种外观的页面链接到样式表，而不是在每个单独的文档中重复指定所有那些样式。因此，当你决定更改公司官方字体或配色方案时，只需更改样式表中的一两个条目，即可同时修改所有的Web页面，而不必在所有的静态Web文件中更改它们。因此，样式表（stylesheet）是一个格式化指令组，可一次控制多个HTML页面的外观。
样式表允许设置大量的格式化特征，包括准确的字体控制、字间距和行间距以及边距和页面边框，等等，不一而足。样式表还允许以熟悉的单位指定尺寸及其他度量标准，比如英寸、毫米、磅和派卡（pica）。此外，你还可以使用样式表在Web页面上的任意位置精确定位图形和文本，可以通过特定的坐标或者相对于页面上的其他项目来进行。
简而言之，样式表带给Web一种高级的显示方式，并且它们是利用样式做到这一点的（这里再次重复了样式这种说法）。
注意：
如果具有3个或更多的Web页面共享（或者应该共享）类似的格式化和字体，当你阅读了本章内容后，就可能想为它们创建一个样式表。即使你选择不创建完整的样式表，也会发现直接在Web页面内对各个HTML元素应用样式是有用的。
样式规则（style rule）是一种格式化指令，可以应用于Web页面上的元素，比如文本段落或链接。样式规则由一个或多个样式属性以及它们关联的值组成。内部样式表（internal stylesheet）直接存放在Web页面内，而外部样式表（external stylesheet）则存在于单独的文档中，并通过一个特殊的标签直接链接到Web页面，稍后我们将介绍关于这个标签的更多知识。
层叠样式表（CSS）这个名称中的“层叠”部分是指对HTML文档中的元素应用样式表规则的方式。更确切地讲，CSS样式表中的样式构成了一种层次结构，其中更具体的样式将覆盖更通用的样式。由CSS负责依据这种层次结构来确定样式规则的优先级，它将建立一种层叠效果。如果这听起来有点令人糊涂，只需把CSS中的层叠机制视作类似于基因遗传，其中一般的特点将从父母传递给孩子，但是更具体的特点则完全是孩子所特有的。基本样式规则是在整个样式表中应用的，但是可以被更具体的样式规则所覆盖。
注意：
你可能注意到我在本章中相当多地使用了元素（element）这个术语（在本书余下部分也是这样做的）。元素仅仅只是Web页面中的一份信息（内容），如图像、段落或链接。标签用于标记元素，可以把元素视作标签，并且在标签内带有描述性信息（如属性、文本、图像等）。
一个快捷的示例应该有助于澄清事实。查看下面的代码，看看你是否可以断定文本的颜色将会发生什么事情：
<div style="color:green">
This text is green.
<p style="color:blue">This text is blue.</p>
<p>This text is still green.</p>
</div>在上面的示例中，我们通过color样式属性将绿色应用于<div>标签。因此，<div>标签中的文本将以绿色显示。由于两个<p>标签都是<div>标签的孩子，绿色文本样式将层叠到它们下方。不过，第一个<p>标签会覆盖颜色样式，并把它变成蓝色。最终的结果是：第一行（未被段落标签包围）是绿色，第一个正式的段落是蓝色，第二个正式的段落则会保留层叠的绿色。
如果你自己通过这段描述来创建它，并且最终未遭受挫折，那么要祝贺你——这就成功了一半。理解CSS不像理解火箭科学，实践得越多，它就会变得越清晰。真正的技巧是开发具有美感的设计，然后可以通过CSS将其应用于你的在线状态（online presence）。
像许多Web技术一样，CSS已经演进了许多年。CSS的原始版本称为CSS1（Cascading Style Sheets Level 1，层叠样式表级别1），创建于1996年。后来的CSS2标准创建于1998年，它在今天仍然在使用，所有现代的Web浏览器都支持CSS2。最新的CSS版本是CSS3，它建立在由其以前的版本打下的强大基础之上，但是添加了一些高级功能，用于增强在线体验。在整个本书中，你将学习核心CSS，包括CSS3的新元素，它们适用于本书介绍的基本设计和功能。因此，当我在整本书中谈论CSS时，都指的是CSS3。
本章余下的内容将很好地介绍CSS的基础知识，但这里并不是关于CSS的所有内容的详细参考。本书剩下的部分也不打算成为详细参考，它将伴随你学习构建动态Web应用程序的过程，给出CSS基本用法的众多示例。然而，你可以在从Mozilla的开发者社区找到针对开发者的一个CSS指南，它会给出使用CSS所能做的事情的所有相关细节。在你继续自己的Web开发旅程的时候，这个指南是一份宝贵的参考资料。
尽管样式表具有强大的威力，但是它们非常容易创建。考虑图2.9和图2.10中显示的Web页面。这些页面共享了几个视觉属性，可以把它们放入一个公共样式表中。
图2.9 这个页面使用样式表来微调文本和图像的外观和间距
图2.10 这个页面使用与图2.9中相同的样式表，从而维持了一致的外观和感觉
程序清单2.5显示了样式表中使用的CSS，这些CSS用于指定这些属性。
程序清单2.5 单个外部样式表
body {
font-size: 10pt;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: black;
line-height: 14pt;
padding-left: 5pt;
padding-right: 5pt;
padding-top: 5pt;
}
h1 {
font: 14pt Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
line-height: 20pt;
}
p.subheader {
font-weight: bold;
color: #593d87;
}
img {
padding: 3pt;
float: right;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #8094d6;
}
a:hover, a:active {
color: #FF9933;
}
footer {
font-size: 9pt;
font-style: italic;
line-height: 12pt;
text-align: center;
padding-top: 30pt;
}这最初看上去可能有许多代码，但是如果仔细观察，就会看到每一行代码中并没有许多信息。把各个样式规则放在它们自己的行上是相当标准的做法，有助于使样式表更容易阅读，但这只是一种个人偏好，也可以把所有的规则都放在一行上，只要保持用分号隔开每个规则即可（稍后将介绍更多相关知识）。谈到代码的可读性，关于这种样式表代码，也许你将注意到的第一件事是：它看起来一点也不像正常的HTML代码。CSS完全使用它自己的语法来指定样式表。
当然，程序清单中也包括一些熟悉的HTML标签（尽管并非所有的标签都需要样式表中的一个条目）。正如你可能猜到的那样，样式表中的body、h1、p、img、a和footer指示将应用样式表的HTML文档中的对应标签。每个标签名后面的大括号描述了那个标签内的所有内容应该如何显示。
在这里，样式表指示所有的body文本都应该以10磅的大小和Verdana字体（如果可能的话）显示，并且颜色为黑色，行间距为14磅。如果用户没有安装Verdana字体，样式表中的字体列表就代表浏览器应该搜索要使用的字体的顺序：依次是Geneva、Arial和Helvetica。如果所有这些字体都没有安装，浏览器将使用任何可用的默认sans serif（无衬线）字体。此外，页面的左、右和上边距各有5磅。
<h1>标签内的任何文本都应该以14磅的大小和加粗的Verdana字体显示。而且，任何只使用<p>标签的段落都将继承通过主体元素指示的样式。不过，如果<p>标签使用名为subheader的特殊类，文本将以粗体显示，并且颜色为#593d87（紫色）。
程序清单2.5中的每个度量尺寸后面的pt都指磅（point）（每英寸有72磅）。如果你喜欢，也可以用英寸（in）、厘米（cm）、像素（px）或“字母m的宽度”（em）指定任何样式表度量尺寸。
你可能注意到程序清单中的每个样式规则都以分号（;）结尾。分号用于把样式表相互分隔开。因此，利用分号结束每个样式规则是一种习惯做法，以便你可以轻松地在它后面添加另一个样式规则。审阅程序清单2.5中的样式表的余下内容，查看应用于额外标签的表示格式化。不要担心，在整个本书中都将学习关于所有这些条目的更多知识。
注意：
利用样式表，可以根据自己的意愿指定字体大小，尽管一些显示设备和打印机将不会正确地处理大小超过200磅的字体。
要把这个样式表链接到HTML文档，可以在每个文档的<head>区域中包括一个<link>标签。程序清单2.6显示了图2.9中所示页面的HTML代码，它包含以下<link>标签：
<link rel="stylesheet" type="text/css" href="styles.css">这假定样式表存储在与HTML文档相同的文件夹中的名为styles.css的文件下。只要Web浏览器支持样式表（并且所有的现代浏览器都支持），样式表中指定的属性就会应用于页面中的内容，而无需任何特殊的HTML格式化代码。这满足了HTML的目标之一，就是把Web页面中的内容与用于显示该内容所需的特定格式化分隔开。
程序清单2.6 用于图2.9中所示页面的HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>About BAWSI</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<section>
<header>
<h1>About BAWSI</h1>
</header>
<p><img src="logo.gif" alt="BAWSI logo">The Bay Area Women's
Sports Initiative (BAWSI) is a public benefit, nonprofit
corporation with a mission to create programs and partnerships
through which women athletes bring health, hope and wholeness to
our community. Founded in 2005 by Olympic and World Cup soccer
stars Brandi Chastain and Julie Foudy and Marlene Bjornsrud,
former general manager of the San Jose CyberRays women's
professional soccer team, BAWSI provides a meaningful path for
women athletes to become a more visible and valued part of the
Bay Area sports culture.</p>
<p class="subheader">BAWSI's History</p>
<p>The concept of BAWSI was inspired by one of the most
spectacular achievements in women's sports history and born out
of one its biggest disappointments... </p>
<p><a href="secondpage.html">[continue reading]</a></p>
</section>
<footer>
Copyright © 2005-2017 BAWSI (www.bawsi.org).
All rights reserved. Used with permission.
</footer>
</body>
</html>提示：
在大多数Web浏览器中，可以通过打开.css文件并选择“记事本”或另一个文本编辑器作为辅助应用程序查看文件，来查看样式表中的样式规则（要确定.css文件的名称，可以查看链接到它的任何Web页面的HTML源代码）。要编辑自己的样式表，只需使用一个文本编辑器即可。
程序清单2.6中的代码很有趣，因为它不包含任何类型的格式化。换句话说，HTML代码中没有任何命令指示文本和图像将如何显示——没有颜色、没有字体，什么也没有。然而仍然会仔细地格式化页面并呈现给屏幕，这要归功于指向外部样式表styles.css的链接。这种方法的真正好处是：可以轻松地创建具有多个页面的站点，并且维持一致的外观和感觉。并且它还具有把页面的视觉样式隔离到单个文档（样式表）中的好处，这样进行一次更改就能够影响所有的页面。
注意：
并非所有的浏览器对CSS的支持都是毫无瑕疵的。要比较主流的浏览器对CSS的支持有何不同，可以查看网上的相关资料。
TRY IT YOURSELF▼
创建你自己的样式表
从头开始，创建一个名为mystyles.css的新文本文档，并为下面这些基本的HTML标签创建一些样式规则：<body>、<p>、<h1>和<h2>。在创建了样式表之后，创建一个包含这些基本标签的新HTML文件。尝试不同的样式规则，看看在样式表文件中利用一处简单的更改来修改段落中的整个文本块有多容易。
▲
现在你已经基本了解了CSS样式表，以及它们如何基于描述Web页面中的信息外观的样式规则。本章中的下面几个小节快速概述了一些最重要的样式属性，并且允许你开始在自己的样式表中使用CSS。
CSS包括几种样式属性，它们用于控制字体、颜色、对齐方式和边距等，不一而足。CSS中的样式属性可以一般可以分成两大类。
CSS布局属性确定了如何在Web页面上放置内容。最重要的布局属性之一是display属性，它描述了如何相对于其他元素显示一个元素。display属性具有4个基本的值。
注意：
display属性依赖于所谓相对定位（relative positioning）的概念，它意味着元素将相对于页面上的其他元素进行定位。CSS还支持绝对定位（absolute positioning），它允许独立于其他元素把一个元素放在页面上的精确位置。在第3章中，我们将学习关于这些定位类型的更多知识。
如果形象地表示出每个元素在显示在Web页面上所占据的矩形区域——display属性可以控制这个矩形区域的显示方式，将更容易理解display属性。例如，block值将导致元素独自放在一个新行上，而inline值则把元素放在它前面的内容旁边。display属性是可以在大多数样式规则中应用的少数几个样式属性之一。下面给出了一个如何设置display属性的示例：
display: block;可以利用width和height属性控制用于元素的矩形区域的大小。和许多与大小相关的CSS属性一样，可以用多种不同的度量单位来指定width和height属性值。
无论在样式表内怎样选择，都可以混用和匹配单位，但是在一组类似的样式属性中保持一致是一个好主意。例如，你可能想坚持为字体属性使用磅，并使用像素表示尺寸。下面给出了一个使用像素单位设置元素宽度的示例：
width: 200px;CSS格式化属性用于控制Web页面上的内容的外观，与控制内容的物理定位相对应。最流行的格式化属性之一是border属性，它利用一个方框或者部分方框在元素周围建立一条可见的边界。注意：边框总是存在，这是由于总是为其预留了此空间，但是边框不会以你可以看见的方式出现，除非给它提供使其可见的属性（如颜色）。下面的border属性提供了一种描述元素边框的方式。
border-width属性建立边框边缘的宽度，通常用像素表示，如下面的代码所示：
border-width: 5px;毫不奇怪的是，border-color和border-style属性分别用于设置边框的颜色和样式。下面给出了如何设置这两个属性的示例：
border-color: blue;
border-style: dotted;可以把border-style属性设置为以下基本的值之一（在本书后面将会学习一些更高级的边框技巧）。
border-style属性的默认值是none，这就是元素为什么没有边框的原因，除非把边框属性设置为一种不同的样式。尽管solid是最常见的边框样式，也可以看到其他样式在使用。
border-left、border-right、border-top和border-bottom属性允许单独为元素的每一边设置边框。如果想让边框在全部4条边上都显示相同的样式，可以只使用单个border属性，它期望以下通过空格隔开的样式：border-width、border-style和border-color。下面是使用border属性的一个示例，它把边框设置为包含两条（双）红线，这两条线的宽度总共为10像素：
border: 10px double red;元素边框的颜色是利用border-color属性设置的，而元素的内部区域的颜色则是使用color和background-color属性设置的。color属性设置元素中的文本（前景）的颜色，background-color属性则设置文本后面的背景的颜色。下面给出了一个示例，显示了把两个颜色属性设置为预先定义的颜色：
color: black;
background-color: orange;也可以利用十六进制值或者RGB（Red Green Blue，红、绿、蓝）十进制值指定颜色，给这些属性分配自定义的颜色：
background-color: #999999;
color: rgb(0,0,255);还可以轻松地控制Web页面内容的对齐方式和缩进。这是利用text-align和text-indent属性完成的，如下面的代码所示：
text-align: center;
text-indent: 12px;在适当地对齐和缩进元素之后，就可能有兴趣设置它的字体。下面的基本字体属性可以设置与字体关联的多个参数。
font-family属性指定字体系列名称的优先级列表。使用优先级列表代替单个值，以便某种字体在给定的系统上不可用时可以提供替代选择。font-size属性使用某个度量单位（通常是磅）指定字体的大小。最后，font-style属性设置字体的样式，font-weight属性则设置字体的粗细。下面给出了设置这些字体属性的一个示例：
font-family: Arial, sans-serif;
font-size: 36pt;
font-style: italic;
font-weight: normal;既然你已经知道了相当多的样式属性以及它们的工作方式，现在可以回顾一下程序清单2.5，并且查看它是否具有更多的意义。下面简要重述一下该样式表中使用的样式属性，你可以将其用作理解样式表如何工作的指南。
当样式规则包括多个属性时，你可能会注意到编码风格中的变化。对于具有单独一种样式的样式规则，通常会看到属性放在与规则相同的行上，如下所示：
不过，当样式规则包含多个样式属性时，如果每行列出一个属性，那么阅读和理解代码将要容易得多，如下所示：
无论何时，如果你希望页面上的一些文本看起来与其他文本有所不同，都可以创建一个规则，其作用相当于自建的HTML标签。你定义的每一类特殊格式化的文本称为样式类（style class）。样式类是一组自定义的格式化规范，可以应用于Web页面中的任何元素。
在向你展示样式类之前，需要快速回顾一下所学的内容并阐释一些CSS术语。首先，CSS样式属性（style property）是一种特定的样式，可以为其指定一个值，比如color或font-size。可以使用选择器把样式属性和它们各自的值与Web页面上的元素关联起来，选择器（selector）用于标识应用样式的页面上的标签。下面给出了选择器、属性和值的示例，它们都包括在一个基本的样式规则中：
p.specialtext { font-weight: bold; }h1 { font: 36pt Courier; }在这行代码中，h1是选择器，font是样式属性，36pt Courier是值。选择器很重要，因为它意味着字体设置将应用于Web页面中的所有h1元素。但是，你可能想区分一些h1元素，那么该怎么办呢？答案在于样式类。
p. specialtext {
font-weight: bold;
color:#593d87;
}假设你想在文档中使用两种不同类型的<h1>标题，就可以把以下的CSS代码放在一个样式表中，从而为每种标题创建一个样式类：
h1.silly { font: 36pt 'Comic Sans'; }
h1.serious { font: 36pt Arial; }注意，这些选择器在h1后面包括一个句点（.），其后接着一个描述性的类名称。要在两个样式类之间做出选择，可以使用class属性，如下所示：
<h1 class="silly">Marvin's Munchies Inc. </h1>
<p>Text about Marvin's Munchies goes here. </p>注意，或者可以使用以下代码：
<h1 class="serious">MMI Investor Information</h1>
<p>Text for business investors goes here.</p>当在HTML代码中引用样式类时，可以简单地在元素的class属性中指定类名称。在前一个示例中，单词“Marvin's Munchies Inc.”将以36磅的Comic Sans字体显示，假定你在Web页面顶部包括了一个指向样式表的<link>，并且用户安装了Comic Sans字体。单词“MMI Investor Information”则将以36磅的Arial字体显示。在程序清单2.5中，可以看到另一个使用类的示例，查找subheader<p>类。
如果想创建可以应用于任何元素而不仅仅是标题或者其他一些特殊标签的样式类，则该怎么做？在CSS中，可以简单地使用一个句点（.），其后跟着你构建的任何样式类名称以及你所选择的任何样式规范。这个类可以同时指定任何数量的字体、间距和边距设置。无论何时想要在页面中应用自定义的标签，只需使用一个HTML标签以及class属性，其后接着你创建的类名称即可。
例如，程序清单2.5中的样式表包括以下样式类规范：
p.specialtext {
font-weight: bold;
color: #593d87;
}这个样式类通过如下的标签应用于程序清单2.6中：
<p class="specialtext">提示：
在程序清单2.6中，该标签与</p>结束标签之间的所有内容都将以加粗的紫色文本显示。
如果在你的样式表中，没有使用元素选择器，也就是说，该规则如下所示：
.specialtext {
font-weight: bold;
color: #593d87;
}那么，任何元素都可以引用specialtext并且以紫色粗体显示，而不再只是一个<p>元素可以引用它。
使样式类如此有价值的是：它们把样式代码与Web页面分隔开，实际上允许你使得自己的HTML代码重点关注页面中的实际内容，而不是关注它将如何出现在屏幕上。这样，你就可以通过微调样式表，重点关注如何将内容呈现到屏幕上。你可能感到惊奇的是，样式表中相对较少的代码如何跨整个Web站点产生重大的影响，这使页面的维护和操纵要容易得多。
在创建自定义的样式类时，可以根据自己的意愿多次使用那些类——它们并不是独一无二的。不过，在一些情况下，你希望出于布局或格式化目的（或者二者兼顾）精确控制独特的元素。在这样的情况下，可以考虑使用ID代替类。
样式ID（style ID）是一组自定义的格式化规范，只能应用于Web页面上的一个元素。可以跨一组页面使用ID，但是在每个页面内每个时间只能使用一次。
例如，假设在所有页面的主体内具有一个页面标题。每个页面只有一个页面标题，但是所有页面本身都包括该页面标题的一个实例。下面给出了一个选择器的示例，它具有一个指定的ID，以及一个属性和一个值：
p#title {font: 24pt Verdana, Geneva, Arial, sans-serif}注意，这个选择器在“p”后面包括一个井字符号（#），其后接着一个描述性的ID名称。在HTML代码中引用样式ID时，只需在元素的id属性中指定ID名称即可，如下所示：
<p id="title">Some Title Goes Here</p>开始<和结束>标签之间的所有内容都将以24磅的Verdana文本显示——但是在任何给定的页面上只会出现一次。你通常会看到，出于布局的目的使用样式ID定义页面的特定部分，例如标头（header）区域、脚注（footer）区域、主体区域等。页面中的这类区域只会在每个页面上出现一次，因此使用ID是比使用类更合适的选择。
在一些情况下，你可能希望指定只在一个Web页面中使用的样式。可以把样式表放在<style>和</style>标签之间，并直接在HTML文档中包括它。以这种方式使用的样式表必须出现在HTML文档的<head>中。无需<link>标签，并且不能从任何其他页面引用该样式表（除非把它也复制到那个文档的开始处）。这类样式表被称为内部样式表，在本章前面，你已经学过它了。
程序清单2.7显示了一个说明如何指定内部样式表的示例。
程序清单2.7 具有内部样式表的Web页面
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some Page</title>
<style type="text/css">
footer {
font-size: 9pt;
line-height: 12pt;
text-align: center;
}
</style>
</head>
<body>
...
<footer>
Copyright 2017 Acme Products, Inc.
</footer>
</body>
</html>在程序清单的代码中，footer样式类是在内部样式表中指定的，它出现在页面头部。样式类现在可以在这个页面的主体内使用。事实上，在页面的主体中使用它来设置版权声明的样式。
如果你想创建一个将在单个页面内多次使用的样式规则，那么内部样式表就很方便。不过，在一些情况下，可能需要对一个特殊的元素应用独特的样式，这就需要内联样式规则，它允许只为页面的一小部分（比如单个元素）指定样式。例如，可以通过style属性在<p>、<div>或<span>标签内创建并应用样式规则。这类样式称为内联样式（inline style），因为它是在HTML代码的中间指定的。
注意：
<span>和</span>是伪标签，除了指定应用所添加的任何style属性的内容范围之外，它们自身不做其他任何事情。<div>与<span>之间的唯一区别是：<div>是一个块元素，因此将强制进行换行，而<span>则不然。因此，如果想修改出现在句子或段落中间的任意文本部分的样式，并且不进行任何换行，那么就应该使用<span>。
下面显示了一个示例style属性：
<p style="color:green">
This text is green, but <span style="color:red">this text is
red.</span>
Back to green again, but...
</p>
<p>
...now the green is over, and we're back to the default color
for this page.
</p>这段代码利用<span>标签显示如何在内联样式规则中应用color样式属性。事实上，这个示例中的<p>标签和<span>标签都把color属性用作一种内联样式。color:red样式属性将覆盖<span>与</span>标签之间的文本的color:green样式属性，理解这一点很重要。然后，在第二个段落中，将不会应用任何一种color样式，因为它是一个全新的段落，将遵循整个页面的默认颜色。
警告：
如果超越页面级调式的范围或者以一种受控的设置来尝试新事物，那么使用内联样式不被认为是一种最佳实践。最好的做法是使页面链接到在中心维护的样式表，以使得所做的更改会立即反映到使用它的所有页面中。
就像验证HTML或XHTML标记很重要一样，验证样式表也很重要。我们可以找到用于CSS的特定验证工具。可以把该工具指向一个Web地址，上传文件，或者把内容粘贴进所提供的表单字段中。最终的目标是得到如图2.11所示的结果：有效！
图2.11 W3C CSS Validator显示程序清单2.5的样式表内容中没有错误
本章介绍了Web页面是什么以及它们如何工作的基础知识。我们学习了将编码的HTML命令包括在文本文件中，并且看到自己输入HTML文本要好于使用图形编辑器为你创建HTML命令，尤其是在你学习HTML时。
本章介绍了最基本、最重要的HTML标签。通过把这些编码的命令添加到任何纯文本文档中，可以快速把它转换成真正的Web页面。我们学习了创建Web页面的第一步是把几个必需的HTML标签放在开头和末尾，包括为页面添加页面标题。然后可以标记段落和行的结束位置，并且添加水平标线和标题（如果想要它们的话）。你还体验了HTML5中的一些语义标签，它们通过描述页面包含的内容的类型（而不仅仅是内容本身），用于提供额外的含义。表2.1总结了本章中介绍的所有标签。
表2.1 本章中介绍的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>元素内 |
除了HTML，我们还学习了能够同时控制很多的HTML页面显示的样式表。样式表还使你能够非常精确地控制HTML元素排版、空白和位置。我们还学习了，通过给几乎任何的HTML标签添加一个style属性，而不需要引用一个单独的样式表文档，就可以控制一个HTML页面的任何部分的样式。
我们还学习了在Web站点中包含样式表的3种主要的方法：使用扩展名为.css的一个样式表文件，并将其连接到文档的<head>之中；在文档的头部，将一组样式规则集合放到<style>标签之中，以及在一个HTML标签中通过style属性直接放置规则（尽管最后这种方法并非可以长期使用的最佳实践）。表2.2概括了本章中介绍的标签及其属性。
表2.2 本章中介绍的HTML标签和属性
| 标签/属性 |
作用 |
|---|---|
| 标签 |
|
| <a> |
表示到当前文档中的一个位置或者到另一个文档的一个超链接 |
| 属性 |
|
| href="url" |
所链接内容的地址 |
| 标签 |
|
| <style>...</style> |
允许在文档内包括内部样式表，在<head>与</head>之间使用 |
| 属性 |
|
| type="contenttype" |
Internet内容类型（对于CSS样式表，总是使用"text/css"） |
| 标签 |
|
| <link> |
链接到外部样式表（或其他文档类型）。在文档的<head>区域中使用 |
| 属性 |
|
| href="url" |
样式表的地址 |
| type="contenttype" |
Internet内容类型（对于CSS样式表，总是使用"text/css"） |
| rel="stylesheet" |
链接类型（对于样式表，总是使用"stylesheet"） |
| 标签 |
|
| <span>...</span> |
不做任何事情，但是会提供一个位置，用于放置style或其他属性（类似于<div>...</div>，但是不会导致换行） |
| 属性 |
|
| style="style" |
包括内联样式规范（可以用在<span>、<div>、<body>及其他大多数HTML标签中） |
Q：我创建了Web页面，但是当我在Web浏览器中打开文件时，我看到的全是文本，包括HTML标签。有时，我甚至在页面顶部看到过怪异的天书一样的字符。我做错了什么？
A：你没有将文件另存为纯文本。尝试再次保存文件，要小心将其另存为Text Only（“纯文本”）或ASCII Text（“ASCII文本”）。如果没有完全搞清楚如何让字处理器执行该操作，也不要紧张。只需代之以在“笔记本”或TextEdit中输入HTML文件，一切都应该会工作得很好（此外，总是要确保Web页面的文件名以.html或.htm结尾）。
Q：我在Internet上看到过一些Web页面在开始处没有<!DOCTYPE>或<html>标签。你说过，页面总是必须以这些标签开头，这是怎么回事？
A：如果你忘记了包括<!DOCTYPE>或<html>标签，许多Web浏览器将会原谅你，并且无论如何都会正确地显示页面。不过，包括它是一个非常好的主意，因为一些软件确实需要它，以将页面识别为有效的HTML。此外，你还希望页面是真正的HTML页面，以使它们遵守最新的Web标准。
Q：我根本不需要使用语义标记吗？你不是在本章中一直都在说有没有它页面都是有效的吗？
A：是的，所有这些元素都不是有效的HTML文档所必需的。你不必使用其中任何标记，但是我强烈建议你不要只考虑把这些标记用于视觉显示，也要考虑用于语义含义。视觉显示对于屏幕阅读器毫无意义，但是语义元素可以通过这些机器传达大量的信息。
Q：假如我把一个样式表链接到我的页面，它指示所有的文本都应该是蓝色的，但是在页面中的某个位置有一个<span style="font-color:red">标签，那么这段文本将显示为蓝色还是红色？
A：红色。本地内联样式总是具有比外部样式表更高的优先级。位于页面顶部的<style>与</style>标签之间的任何样式规范也具有比外部样式表更高的优先级（但是其优先级不高于同一个页面中后面某个位置的内联样式）。这是我在本章前面所提到的样式表的层叠作用。可以把层叠样式表的作用视作开始于外部样式表，它会被内部样式表覆盖，后者又会被内联样式覆盖。
Q：可以把多个样式表链接到单个页面吗？
A：当然可以。例如，你可能具有一个用于格式化（文本、字体、颜色等）的样式表以及另一个用于布局（边距、填充、对齐等）的样式表，对这两个样式表都只包括一个<link>。从技术上讲，CSS标准要求Web浏览器给用户提供一个选项，以便当通过多个<link>标签提供多个样式表时可以在它们之间做出选择。不过，在实际中，所有主流的Web浏览器都只简单地包括每个样式表，除非它具有rel="alternate"属性。用于链接多个样式表的首选技术涉及使用特殊的@import命令。下面显示了一个利用@import导入多个样式表的示例：
@import url(styles1.css);
@import url(styles2.css);与<link>标签类似，@import命令必须放在Web页面的头部。
本测验包含一些问题和练习，可帮助读者巩固本章所学的知识。在查看后面的“解答”一节的内容之前，要尝试尽量回答所有的问题。
1．每个HTML页面都需要哪5个标签？
2．本章中讨论的哪个语义元素适合于包含在文章中使用的词语的定义？
3．在<header>元素内必须使用<h1>、<h2>、<h3>、<h4>、<h5>或<h6>元素吗？
4．在单个页面内可以具有多少个不同的<nav>元素？
5．可以用多少种不同的方式确保将样式规则应用于内容？
1．每个HTML页面都需要<html>、<head>、<title>和<body>标签（以及它们的结束标签</html>、</head>、</title>和</body>），在第一行还需要<!DOCTYPE html>标签。
2．<aside>元素适合于此任务。
3．否。除了另一个<header>元素或<footer>元素之外，一个<header>元素可以包含任何其他的流式内容。不过，标题元素（<h1>～<h6>）在<header>元素中不是必需的。
4．可以根据需要具有许多<nav>元素。诀窍是只“需要”少数几个<nav>元素（也许只需要用于主导航系统和辅助导航系统的<nav>元素），否则含义将会丢失。
5．有3种方式：外部、内部和内联。
