作者：(美)Elizabeth Castro,Bruce Hyslop
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5与CSS3基础教程(第8版)试读：
前言
无论你是刚开始涉足网站制作，还是曾经做过网站、而今又想让自己的技能与时俱进，都会对这个领域振奋人心的进展感同身受。
在过去的几年里，为网页编写代码和添加样式的方式、浏览网页所用的浏览器以及使用浏览器的设备都发生了明显的变化。以前，我们只能通过台式机或笔记本浏览万维网，而如今我们可以通过很多设备访问万维网：手机、平板电脑，当然也包括笔记本、台式机，以及很多别的设备。
这是意料之中的事，因为万维网始终秉持消除边界的宗旨——无论是在城市还是在乡村，通过任何能访问万维网的设备，任何人都可以自由地分享和获取信息。总之，万维网的宗旨是普适性。万维网的覆盖范围不断扩大，过去，通信技术还未曾普及农村，而现在却已经实现了。
更伟大的是，万维网是属于每一个人的，任何人都可以自由地创建和发布网站。本书将指导读者创建和发布网站，是没有任何HTML和CSS知识的建站初学者的理想教程。书中内容结构清晰，浅显易懂，将一步一步地教会你如何创建网页。总之，本书是开发人员手头案边的必备指南。若想了解某个主题的更多信息，可以通过查找目录直接跳到相关页面。HTML和CSS简介
万维网成功的根基，是一种基于文本的标记语言，它简单易学，并且能被任何带有基本Web浏览器的设备识读，它就是HTML。每个网页都或多或少会用一点儿HTML，否则也就不能称为网页了。
随着不断深入细致地学习，你会了解到，HTML用于定义内容的含义，而CSS用于定义内容和网页如何显示。HTML页面和CSS文件（样式表，stylesheet）都是文本文件，因此很容易编辑。后面的“如何学习本书”会向你展示一些HTML和CSS的代码片段。
从第1章起，我们开始学习基本的HTML页面；从第7章起学习用CSS定义页面样式。关于本书各章内容概述及主题汇总，请参见“本书涉及内容”。
HTML一词通常泛指这门语言本身，而HTML5则指代这一特定版本的HTML，比如讨论HTML早期版本所没有的HTML5新特性时。这样的规则也适用于CSS（泛指）和CSS3（特指CSS3）。1．HTML与HTML5
了解一些有关HTML起源的基础知识对于理解HTML5很有帮助。
HTML诞生于20世纪90年代初，用于详细规定少量构建网页的元素。这些元素中的大多数都用于描述网页内容，如标题、段落、列表、指向其他网页的链接等。随着更多元素的引入以及对语法规则本身的调整，HTML这门语言的版本号也在更新。当前最新的版本便是HTML5。
HTML5是HTML早期版本的自然延续，它尽可能地满足了当前网站和未来网站的需求。它从以前的版本中继承了大部分特性，这意味着，如果你在HTML5出现之前编写过HTML，那么你已经知道很多关于HTML5的知识了。这也意味着，HTML5的大部分内容都可以兼容新旧浏览器。向后兼容是HTML5的一项重要设计原则（参见www.w3.org/TR/html-design-principles/）。
HTML5还增加了大量新的功能。很多新功能都很简单，比如用于描述内容的辅助元素（如article、main、figure等）；还有一些用来协助创建强大Web应用程序的新功能则较为复杂。只有牢牢掌握了创建网页的技能，才能去学习HTML5更复杂的功能，这也是本书强调基础知识的原因。HTML5还引入了原生的音频和视频播放功能，书中也会讲到。2．CSS与CSS3
CSS的第一个版本是在HTML诞生几年后才出现的，正式推出是1996年。同HTML5与其早期版本的关系一样，CSS3也是CSS早期版本的自然延续。
CSS3比CSS早期版本更为强大，它引入了大量的视觉效果，如阴影、圆角、渐变等。（关于本书涵盖这方面信息的详细情况，请参见“本书涉及内容”。）Web浏览器
无论是使用电脑（如图0.2.1所示）、手机，还是其他的设备，我们都是通过Web浏览器访问网站的。不过，你使用的浏览器可能与其他用户使用的浏览器不同。
图0.2.1 Firefox的桌面版
Windows预装了微软公司的浏览器Internet Explorer，OS X则预装了苹果公司的浏览器Safari。不过，用户可以免费下载其他浏览器替换上面的两种浏览器，如Chrome（谷歌出品）、Firefox（Mozilla出品）、Opera（Opera出品）。以上讨论的都是用于桌面电脑的浏览器。
至于移动设备，用户可以使用Safari的移动版（用于iPhone、iPad和iPod touch），各种Android默认浏览器——用于Android的Chrome、Firefox以及Opera Mini等。
本书会提到各种各样的浏览器。在大多数情况下，各个浏览器的最新版本对本书所讲的HTML和CSS特性的支持情况都是相似的。不过有时某个特性可能在一个或多个浏览器上不起作用（或表现不一致）。出现这些情况我会进行提示，并给出解决办法。这类情况主要发生在Internet Explorer 8上，这是目前开发人员还有必要关注的浏览器中最老的一个。（它的使用率仍在不断降低，因此2014年前后这种情况可能发生改变。）
20.2节会详细说明如何获取不同的浏览器，哪些浏览器对测试最重要，以及如何测试页面等问题。
浏览器的版本号
同HTML和CSS一样，浏览器也有版本号。版本号的数字越大，对应的浏览器就越新。
例如，Safari 7比Safari 6要新，而Safari 6则比Safari 5要新。Internet Explorer 10比Internet Explorer 9新。不过Internet Explorer 10并不比Safari 7新。
出现这种情况是因为微软、苹果以及其他浏览器厂商并不会相互协调各自浏览器的版本号，也不会协商新版浏览器的发布时间。Chrome和Firefox每隔六周就会更新一次，而其他浏览器大约要间隔一年才更新一次，因此Chrome和Firefox的版本号自然比其他浏览器的版本号要大得多。
很明显，无论是哪家厂商发布浏览器，新版本的浏览器对HTML和CSS特性的支持情况（当然也包括对其他特性的支持情况）都要好过先前的版本。Web标准与规范
你可能在想，是谁第一个创造了HTML和CSS，又是谁在持续地发展它们。由万维网和HTML的发明者Tim Berners-Lee主持的万维网联盟（W3C）便是负责带领Web标准发展的组织。
W3C发布的说明Web标准的文档称为规范（specification，缩写为spec）。这些规范对HTML、CSS等语言的参数进行了定义。也就是说，规范对语言规则进行了标准化。要了解W3C的活动，请访问www.w3.org（如图0.3.1所示）。
图0.3.1 W3C的网站是业内Web标准规范的主要信息来源
W3C与WHATWG
由于种种原因，另一个组织，Web超文本应用技术工作组（WHATWG），在负责开发HTML5规范的大量内容。W3C将WHATWG的工作纳入了其正在开发的规范的正式版本之中。可以通过www.whatwg.org访问WHATWG。
如果你想仔细查看这些规范（推荐你这样做），可访问下面列出的这些规范最新版本的网址。
HTML5（W3C） http://www.w3.org/TR/html5/
HTML5.1（W3C） http://www.w3.org/TR/html51/
开发中的HTML标准（WHATWG）http://www.whatwg.org/specs/web-apps/current-work/multipage/
开发中的HTML标准包含了一些比HTML5.1规范更新的特性，这些特性尚处于开发状态（很多部分还在不断变动）。最终，这些内容会融入HTML5.1规范。
CSS的规范太多了，无法全部列在这里，不过可以通过这个网址找到CSS规范的列表：http://www.w3.org/standards/techs/css#w3c_all。
HTML4和HTML5的区别
如果你之前接触过HTML4，并想了解它与HTML5的区别，可以查看W3C为此创建的文档（http://www.w3.org/TR/html5-diff）。
本书会提到很多HTML4和HTML5的区别。这些内容对HTML的初学者来说并不重要，因为实际上现在大家都会使用HTML5。不过，如果你想进一步研究，这些内容也很有趣。
利用已经完成的标准，我们可以根据一套成形的规则创建网页，而浏览器也能根据这套规则显示这些页面。（整体上，浏览器对标准的支持是良好的。Internet Explorer的早期版本，尤其是Internet Explorer 8，则存在一些问题。）
经过几个阶段的发展，规范最终会被确定下来，成为推荐标准（Recommendation，www.w3.org/2005/10/Process-20051014/tr）。
尽管一部分HTML5和CSS3规范仍未最终敲定，但这并不意味着你不能使用这些规范。标准化的过程需要经历一些时间（准确地说需要数年）。浏览器会在规范成为推荐标准之前很久便实现其功能，这也是规范发展过程的反映。因此，浏览器已经包括了大量HTML5和CSS3的功能，尽管它们还没有成为推荐标准。
总之，本书涉及的功能都是规范中相对明确规定的，因此它们在推荐标准推出之前发生改变的可能性极小。很多HTML5和CSS3功能已经实际使用一段时间了，开发者完全可以放心使用。渐进增强：一种最佳实践
我在前言的开头处就讲到了万维网的普适性——万维网上的信息应该能被所有人访问。渐进增强（progressive enhancement）的理念能帮助你构建具有普适性的网站。这不是一门语言，而是一种建站方法，它由Steve Champeon于2003年提出（http://en.wikipedia.org/wiki/Progressive_enhancement）。
这个想法很简单，但也很强大：开始用所有人都能访问的HTML内容和行为构建网站（如图0.4.1所示），再用CSS加入你的设计（如图0.4.2所示），最后用JavaScript（一种编程语言）添加额外的行为。这些组件都是分离的，但可以同时发挥作用。
图0.4.1 一个基本的HTML页面，未对其应用任何自定义的CSS。通常，只有比较旧的浏览器才会以这种方式显示。这个页面可能并不是很好看，但信息都是可访问的，这一点非常重要
图0.4.2 同一个页面在支持CSS的浏览器中的显示效果。信息是相同的，只是呈现的方式不同（将页面向下滚动，右侧内容在图0.4.1中也是可见的）
更多例子
遵循渐进增强的原则，可以让网站的布局适应不同设备的屏幕尺寸和浏览器功能。这样，网页在移动设备、桌面电脑甚至更高级的设备上看起来都很不错。如果你对这个主题很感兴趣，可以先阅读第12章。
第14章介绍了如何让旧的浏览器显示简化的设计而现代浏览器显示包含CSS3效果的增强版本。
在本书的其他部分，你也会学到用于构建渐进增强网页的其他技术。
这样做的结果就是，那些只能访问基本页面的设备和浏览器得到的是简化的、默认的体验（如图0.4.1所示）。即便是20多年前万维网刚诞生时的浏览器也能显示这个页面，因此最早配备Web浏览器的手机也能显示它。此外，屏幕阅读器（可以为视障访问者读出网页内容的软件）也能轻松地处理这个页面。
同时，那些能够浏览更健壮的网站的设备和浏览器将看到增强的版本（如图0.4.2所示）。还有一些浏览器的处理能力介于二者之间，它们也能显示这个页面。不必要求网站对所有人来说体验都是一样的，关键是网站的内容是可访问的。
本质上，渐进增强背后的涵义是共赢。目标读者
本书假定读者没有任何创建网站的知识。因此，从这一点上说，本书适合零起点初学者。你将从最基础的HTML和CSS知识学起。在这个过程中，你也会学到HTML5和CSS3的新特性，尤其是那些设计师和开发者在日常工作中经常用到的特性。
不过，即使你对HTML和CSS很熟悉，依然可以从本书获益，阅读本书可以快速了解HTML5的新元素、一些CSS3效果、响应式Web设计以及各种最佳实践。1．本书涉及内容
全书各章是按照如下方式进行组织的。
第1章～第6章及第15章～第18章讲解创建HTML页面的原则和我们需要使用的HTML元素，并清楚地说明什么时候该使用这些元素，以及如何使用。
第7章～第14章讲解CSS，从创建第一条样式规则开始，最终讲到运用CSS3增强视觉效果。
第19章演示如何向页面添加预先写好的JavaScript。
第20章讲解在将页面放到万维网上之前如何对其进行测试和调试。
第21章讲解如何保护自己的域名，以及如何把网站放到万维网上让其他所有人都能看到。
本书涵盖以下主题。
创建、保存、编辑HTML和CSS文件。
编写语义化HTML的含义及其重要性。
如何把页面的HTML内容、CSS表现和JavaScript行为分离（这是渐进增强的关键所在）。
通过一种有含义的方式，使用那些存在多年的HTML元素和新增的HTML5元素对内容进行结构化。
从一个网页链接到另一个网页，或从页面的一部分链接到另一部分。
在页面中添加图像，并针对万维网对其进行优化。这其中还包括了创建适应苹果的Retina显示屏及其他高分辨率显示屏的图像。
使用ARIA（无障碍富因特网应用）地标角色和其他好的编码实践提升网站的可访问性。
为文字添加样式（大小、颜色、粗体、斜体等），添加背景颜色和背景图像。
实现多栏布局。
构建响应式网页。响应式网页可以根据访问者的屏幕大小收缩或放大布局，从而按照开发者希望的方式适应不同的设备。这样做的结果是页面在手机、平板电脑、笔记本电脑、台式机以及其他可访问万维网的设备上看起来效果都很不错。
使用@font-face为页面添加自定义Web字体，使用Font Squirrel和Google Fonts提供的字体服务。
应用CSS3效果，如透明度、背景alpha透明、渐变、圆角、外阴影、内阴影、文字阴影以及多背景图像。
使用CSS生成内容和sprite以减少页面所需图像文件的数量，让页面加载得更快。
创建表单来获取访问者输入的内容，包括使用一些HTML5中新增的输入类型。
使用HTML5的audio和video元素向页面插入媒体，对旧的浏览器使用备用的Flash播放器。
还有很多主题。
这些主题都配有很多代码示例，说明如何基于业内最佳实践来实现HTML5和CSS3的各个特性。2．本书未涉及内容
近年来，HTML和CSS领域的发展很迅猛，我们不得不舍弃一些主题。除了几处例外，我们坚持把那些极少用到、仍可能变化、缺乏广泛浏览器支持或者需要JavaScript知识的主题，以及一些高级主题排除在本书范围以外。
本书没有涉及下列主题。
HTML5的details、summary、menu、command、output和keygen元素。W3C将其中的几个元素列入了2014年HTML5最终定稿时可能不包含的功能，应该尽量避免使用这里提到的元素。
HTML5的canvas，这个元素允许我们使用JavaScript绘制图像（甚至创建游戏）。此外，还有可缩放矢量图形（SVG）。第17章对这两个主题进行了简要说明，还包含了一些涉及相关详细信息的网址。
需要JavaScript知识或者与HTML5新增的语义化元素没有直接关联的HTML5 API和其他高级特性。
CSS3变换、动画和过渡效果。要了解更多信息，参见www.htmlcssvqs.com/resources/。
CSS3中新的布局模型，如FlexBox、Grid等。这些技术致力于改变我们对页面进行布局的方法（前提是规范进一步发展，浏览器的支持程度更高一些）。参见Zoe Mickley Gillenwater的演示文档（www.netmagazine.com/features/pros-guide-css-layouts）。如何使用本书
本书几乎所有章节都有实战代码示例（如图0.6.1和图0.6.2所示）。通常情况下，随后还会展示这些代码对应的页面在浏览器中显示的屏幕截图（如图0.6.3所示）。..
图0.6.1 本书大部分章节都给出了一些HTML代码片段，且会突出显示跟相应章节内容对应的部分。省略号（……）表示出于简洁而省略的额外代码或内容。通常，可在其他代码示例中看到省略的部分body font-family: Georgia, "Times New Roman" ➝ serif/* 站点导航 */.nav-main list-style: none padding: .45em 0 .5em.nav-main li border-left: 1px solid #c8c8c8.nav-main a color: #292929 font-size: 1.125em font-weight: bold
图0.6.2 如果示例有CSS代码，会将它们单独显示出来，对应内容也会突出显示
图0.6.3 用于演示代码如何影响页面的一种或多种浏览器的屏幕截图
大多数屏幕截图用的都是当下最新版本的Firefox。不过，这并不是说与其他浏览器相比，我们更推荐Firefox。本书的代码示例在最新版本的Chrome、Internet Explorer、Opera和Safari中看起来都是相似的。
代码和屏幕截图下面都有对相应HTML元素和CSS属性的描述，以便于对示例背景进行说明，并加强你对它们的理解。
在很多情况下，你会发现只要理解说明和代码示例就可以使用HTML和CSS特性了。但如果你需要关于如何使用这些特性的明确指导，也可以阅读书中列出的详细步骤。
最后，大部分章节都有一些提示，为读者提供额外的用法信息、最佳实践、对本书相关部分的引用、对其他资源的链接等。本书约定
本书遵循以下约定。
需要开发人员输入值的占位符或代码以斜体显示。大多数占位符出现在步骤讲解中。例如，输入padding: x，这里的x是要添加的内边距。
需要准确输入的代码（即HTML和CSS代码）使用等宽字体（如this font）。
代码图中的箭头（→）代表延续上一行的代码（这一行代码由于篇幅原因而进行了折行），如图0.6.2所示。箭头并非代码的一部分，不需要输入。实际使用中应该连续输入这一行代码，而无需像印刷页面中这样折行。
对于首次出现的词，在定义时使用黑体显示。
IE是对Internet Explorer的简称。例如，IE9与Internet Explorer 9同义。
对HTML5和CSS3最新特性支持较好的浏览器统称为现代浏览器（modern browser）。通常，“Web浏览器”一节中提到的浏览器的最新版本都属于现代浏览器（IE8除外）。
浏览器的版本号后面出现加号（+）指的是该版本及其之后的所有版本。例如，IE8+指的是Internet Explorer 8及其后续版本。本书配套网站
本书的配套网站上有本书的目录、本书涉及的（以及其他一些不方便放入书中的）完整代码示例、引用资源的链接（以及一些额外资源的链接）、勘误表等。
下面是本书网站一些重要页面的URL。
主页：www.htmlcssvqs.com。
代码示例：www.htmlcssvqs.com/8ed/examples/。
读者可以直接在网页上查看这些代码，也可以把它们下载到自己的电脑里。读者可以获取书中涉及的所有HTML和CSS文件。
有时，我们会在代码里插入一些注释，解释对应代码的含义和用法。限于篇幅，我们对书中大量的代码示例进行了删减，但配套网站列出了完整的代码。
读者可随意使用这些代码，对它们进行修改使之满足自己项目的需要。
希望该网站对你有用。第1章网页的构造块
尽管网页变得越来越复杂，但是其底层结构依然相当简单。正如前言中提到的，创建网页是离不开HTML的。你即将了解到，HTML包含网页内容并说明这些内容的意义，Web浏览器则会将HTML包着的内容呈现给用户。
一个网页主要包括以下三个部分。
文本内容（text content）：在页面上让访问者了解页面内容的纯文字，比如关于业务、产品、家庭度假的内容，以及页面关注的其他任何内容。
对其他文件的引用（references to other files）：我们使用这些引用来加载图像、音频、视频文件，以及样式表（控制页面的显示效果）和JavaScript文件（为页面添加行为）。这些引用还可以指向其他的HTML页面和资源。
标记（markup）：对文本内容进行描述并确保引用正确地工作。（HTML一词中的字母M就代表标记。）
此外，在每个HTML页面的开头都有一些主要用于浏览器和搜索引擎（如Bing、Duck Duck Go、Google、Yahoo等）的信息。浏览器不会将这些信息呈现给访问者。
需要注意的是，网页的这些成分都仅由文本构成。这意味着网页可以保存为纯文本格式，可以在任何平台（无论是台式机、手机、平板电脑还是其他平台）上用任何浏览器查看。这个特性也确保了很容易创建HTML页面。
本章会带你创建一个基本的HTML页面，讲解HTML基础（包括上述三种主要成分），并讨论一些最佳实践。
注意 正如在前言中提到的，本书使用HTML泛指这门语言本身。如果需要突出HTML某一版本独有的特殊属性，则使用它们各自的名称。例如，“HTML5引入了一些新的元素，并重新定义或删除了HTML 4和XHTML 1.0中的某些元素。”1.1 HTML思想
设想这样一种场景：你在厨房里，一只手上拿着便利贴，上面的每一页都写着一个单词。有的贴纸上写的是“汤”，有的写着“燕麦片”、“盘子”、“酱汁”等。
你打开一个橱柜，为里面的每一样物品都贴上最能描述它的便利贴。一只黄色的装燕麦片的盒子贴上了写有“燕麦片”的贴纸。还有一个红色的盒子也是装燕麦片的，也为它贴上写有“燕麦片”的贴纸。其他的物品也采用类似的做法。
编写HTML与这个过程是很相似的。不同的是，编写HTML并非向食物和餐具上贴标签，而是为网页内容打上能够描述它们的标签。你无需自己创建标签名称，HTML已经完成了这一工作，它有一套预先定义好的元素。p元素用于段落，abbr元素用于缩略词，li元素用于列表项目。本书后面会进一步介绍这些元素，以及很多其他的元素。
注意，便利贴上的用词是“燕麦片”这样的，而不是“黄色的谷物盒子”、“红色的谷物盒子”。类似地，HTML元素描述的是内容是什么，而非看起来是什么样。CSS（从第7章开始讲解）才控制内容的外观（如字体、颜色、阴影等）。因此，不管你最后让段落显示为绿色还是橙色，它们都是p元素，这才是HTML唯一关心的。
在学习本书和创建网页时，应该始终牢记这一思想。接下来即将讲到的基本网页就是这样做的。1.2 基本的HTML页面
来看一个基本的HTML页面，大概了解一下本章及后面的内容。我们会对本节中的代码进行讲解。不过，即便你现在不能完全理解这些代码也不必担心，这只是让你初步了解HTML，本书接下来的部分会对其进行详细说明。当然，随着你进一步阅读本书的后续内容，还会了解到更多的细节。此外，每个人的学习方法都不同，或许有的读者认为先阅读下一节，再返回来读这一节会更有效。
每个网页都由图1.2.1中所示的结构开始构建。这个HTML相当于一张白纸（参见图1.2.2），因为访问者看到的内容位于主体（body）部分（即
和之间的部分），而这一部分现在是空着的。我们马上就会给它填上内容。<！DOCTYPE html>图1.2.1 每个网页都包含DOCTYPE、html、head和body元素，它们是网页的基础。在这个页面中，可以定制的内容包括两项，一是赋予lang属性的语言代码，二是
图1.2.2 除非你是一个极简主义者，否则这不会是一个多么令人激动的页面
首先，简单说明一下（下一节会详细解释），HTML使用<和>包围HTML标签。开始标签（如
）用于标记元素的开始，结束标签（如）用于标记元素的结束。有的元素没有结束标签，如meta（参见图1.2.1）。1．网页的顶部和头部前面提到，页面内容位于主体部分，那么其他的代码有什么作用呢？实际上，
开始标签以上的内容都是为浏览器和搜索引擎准备的。<！DOCTYPE html>部分（称为DOCTYPE）告诉浏览器这是一个HTML5页面。DOCTYPE应该始终位于页面的第一行。接下来是html元素，它包着页面的其余部分，即和结束标签（表示页面的结尾）之间的内容。在这里可以为网页指定其他语言，这一内容将在3.1节作详细说明。
再接下来是文档的头部，即
和之间的区域。会在1.4节进行讲解。主体前面的代码中，有一部分是用户可见的，即3.1节和3.2节会对DOCTYPE和头部进行详细的讲解。
这就是网页的基础，并不太难，对吧？2．网页的主体：你的内容
接下来为页面添加一些内容（如图1.2.3所示）。图1.2.4显示了桌面浏览器呈现这段HTML的效果（如果添加CSS，页面看起来会更漂亮）。<！DOCTYPE html>
The Ephemeral Blue Flax
I am continually amazed at the beautiful, delicate Blue Flax that somehow took hold in my garden．They are awash in color every morning, yet not a single flower remains by the afternoon．They are the very definition of ephemeral.
图1.2.3 这个页面包含了本章开头提到的三种成分：文本内容、对其他文件的引用（图像的src值和链接的href值）及标记。我突出显示了主体部分的标记，读者可以很方便的区分标记和页面的文本内容。同时，请注意，行与行之间通过回车符分开了，这并不是必需的，不影响页面的呈现效果
图1.2.4 页面典型的默认呈现效果。这是页面在Firefox中显示的效果，在其他浏览器中的效果也是相似的。1.9节解释了不同文本看起来不一样的原因
前面提到过（参见图1.2.2），使用浏览器查看网页时，不会显示包围文本内容的标记。不过这些标记是非常有用的，我们就是使用它们来描述内容的。例如，
标记用于表示段落的开始，具体的解释参见1.8节。
对HTML进行缩进
代码的缩进（参见图1.2.3）与内容在浏览器中的显示效果（参见图1.2.4）没有任何关系（第4章会讲到，pre元素是一个例外）。不过，对嵌套在父元素中的代码进行缩进是一种惯例，这样我们在编写和阅读代码时就会更容易看出元素之间的层级关系。
HTML提供了很多这样的元素。图1.2.3所示的例子演示了六种最为常见的元素：a、article、em、h1、img和p。每个元素都有各自的含义，例如，h1是标题，a是链接，img是图像。
我们暂时不会对示例代码做过多的探讨。在此之前，要进一步介绍HTML的基础知识，如通常意义上的元素、属性、文件名、URL等。介绍完这些，再回过头来解释为什么要以这样的方式标记这些内容。我们还会介绍浏览器在默认情况下如何显示这些网页。1.3 标签：元素、属性、值及其他
见识了一些HTML之后，我们来仔细看看标签的组成：元素（element）、属性（attribute）和值（value）。我们还将讨论父元素和子元素的概念。你在上文的基本HTML页面中已经见到了上面这些概念的例子，不过你可能并没有意识到。1．元素
我们在便利贴的例子中讲到，元素就像描述网页不同部分的小标签一样：这是一个标题，那是一个段落，而那一组链接是一个导航。我们在前面已经讨论过一些元素，有的元素有一个或多个属性，属性用来进一步描述元素。
大多数元素既包含文本，也包含其他元素（就像基本页面中的p元素）。如前面提到的，这些元素由开始标签、内容和结束标签组成。开始标签是放在一对尖括号中的元素的名称及可能包含的属性，结束标签是放在一对尖括号中的斜杠加元素的名称（参见图1.3.1）。
图1.3.1 这是一个典型的HTML元素。开始标签和结束标签包着描述元素的文字。习惯上，标签采用小写字母
还有一些元素是空元素（empty element或void element），既不包含文本也不包含其他元素。它们看起来像是开始标签和结束标签的结合，由左尖括号开头，然后是元素的名称和可能包含的属性，然后是一个可选的空格和一个可选的斜杠，最后是必有的右尖括号（参见图1.3.2）。
图1.3.2 空元素（如这里显示的img元素）并不包含任何文本内容（alt属性中的文字是元素的一部分，并非显示在网页中的内容）。空元素只有一个标签，同时作为元素的开始标签和结束标签使用。结尾处的空格和斜杠在HTML5中是可选的。不过，元素最后面的>是必需的
在HTML5中，空元素结尾处的空格和斜杠是可选的。XHTML要求空元素结尾处必须有斜杠。以前用XHTML的人恐怕仍然倾向于在HTML5中继续使用斜杠，而其他人可能已经不用了。不管选择哪种方式，建议始终保持一致。
按照惯例，元素的名称都用小写字母。不过，HTML5对此未做要求，也可以使用大写字母。只是现在已经很少有人用大写字母编写代码了，因此，除非无法抗拒，否则不推荐使用大写字母，这是一种过时的做法。2．属性和值
属性包含了元素的额外信息（参见图1.3.3和图1.3.4）。在HTML5中，属性值两边的引号是可选的，但习惯上大家还是会写上，因此建议始终这样做。跟元素的名称一样，尽量使用小写字母编写属性的名称。
图1.3.3 这是一个label元素（关联文本标签与表单字段），它有一个简单的属性–值对。属性总是位于元素的开始标签内，属性的值通常放在一对括号中
图1.3.4 有的元素（比如图1.3.2中的a和img）可以有多个属性，每个属性都有各自的值。属性的顺序并不重要。不同的属性–值对之间都用空格隔开
本书会对大多数属性可接受的值进行详细说明，不过不妨先看看都有哪些类型的值。
有的属性可以接受任何值，有的则有限制。最常见的还是那些仅接受预定义值（也称为枚举值）的属性。也就是说，必须从一个标准列表中选一个值（参见图1.3.5）。一定要用小写字母编写枚举值。
图1.3.5 有的属性只接受特定的值。例如，只能将link元素里的media属性设为all、screen、print等值中的一个（参见第8章），不能像href属性和title属性那样可以输入任意值
有许多属性的值需要设置为数字，特别是那些描述大小和长度的属性。数字值无需包含单位，只需输入数字本身。图像（参见图1.3.2）和视频的宽度和高度是有单位的，默认为像素。
有的属性（如href和src）用于引用其他文件，它们只能包含URL（统一资源定位符，是万维网上文件的唯一地址）形式的值。本章后面会详细介绍URL。
最后，还有一种特殊的属性称为布尔属性（Boolean attribute）。这种属性的值是可选的，因为只要这种属性出现就表示其值为真（图1.3.6）。如果一定要包含一个值，就写上属性名本身（这样做的效果是一样的）。布尔属性也是预先定义好的，无法自创（你应该没那么叛逆吧？）。
图1.3.6 这段代码提供了一个让用户输入电子邮件地址的输入框（参见第18章）。布尔属性required代表用户必须填写该输入框。布尔属性不需要属性值，如果一定要加上属性值，则写作required="required"3．父元素和子元素
如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。子元素中包含的任何元素都是外层的父元素的后代（参见图1.3.7）。这种类似家谱的结构是HTML代码的关键特性，它有助于在元素上添加样式（从第7章开始讨论）和应用JavaScript行为（不在本书介绍范围）。 …… continually amazed …… delicate Blue Flax ……The Ephemeral Blue Flax
图1.3.7 在这段HTML代码中，article元素是h1、img和p元素的父元素。反过来，h1、img和p元素是article元素的子元素（也是后代）。p元素是em和a元素的父元素。em和a元素是p元素的子元素，也是article元素的后代（但不是子元素）。反过来，article元素是它们的祖先
值得注意的是，当元素中包含其他元素时，每个元素都必须嵌套正确，也就是子元素必须完全地包含在父元素中。使用结束标签时，前面必须有跟它成对的开始标签。换句话说，先开始元素1，再开始元素2，就要先结束元素2，再结束元素1（参见图1.3.8）。
图1.3.8 元素必须正确地嵌套。如果先开始p，再开始em，就必须先结束em，再结束p1.4 网页的文本内容
元素中包含的文本可能是网页上最基本的成分。如果你用过文字处理软件，那么你一定输入过文本。不过，HTML页面中的文本有一些重要的差异。
首先，浏览器呈现HTML时，会把文本中的多个空格或制表符压缩成单个空格，把回车符和换行符转换成单个空格，或者将它们一起忽略（参见图1.4.1和图1.4.2）。..
I am continually amazed at the beautiful, delicate Blue Flax that somehow took hold in my gardenThey are awash in color every morning, yet not a single flower remains by the afternoonThey are the very definition of ephemeral.
© Blue Flax Society.
图1.4.1 页面的文本内容（粗体部分）几乎就是标签以外的所有东西。在这个例子中，注意每个句子都至少包含一个回车符，有的词之间隔了好几个空格（在此只是为了说明HTML如何处理回车符和空格）。另外，第二段还包含一个表示版权符号的特殊字符引用（©）
图1.4.2 注意，使用浏览器查看这份文档时，多余的回车和空格都被忽略了，字符引用也替换成了对应的符号（©）
其次，HTML过去只能使用ASCII字符。ASCII只包括英语字母、数字和少数几个常用的符号。开发人员必须用特殊的字符引用来创建重音字符（在很多西欧语言中很常见）和许多日常符号，如é（表示é）、©（表示©）等。完整列表见www.elizabethcastro.com/html/extras/entities.html。
Unicode极大缓解了特殊字符问题。用UTF-8对页面进行编码（参见图1.4.3），并用同样的编码保存HTML文件（参见2.3节）已成为一种标准做法。推荐你也这样做。在图1.4.3中将charset值指定为UTF-8和utf-8的结果是一样的。<！DOCTYPE html>
图1.4.3 直接在head开始标签后面指明文档的字符编码。charset属性用来设置编码类型（通常为UTF-8）
有时还是会使用字符引用，如版权符号（因为©既好记又好输入），参见图1.4.1。1.5 链接、图像和其他非文本内容
显然，万维网充满生机的部分原因是页面之间的链接，以及图像、视频、音乐等。外部文件（如图像）实际上并没有放在HTML文件中，而是单独保存的，页面只是简单地引用了这些文件（参见图1.5.1）。..
The Ephemeral Blue Flax
I am continually amazed at the beautiful, delicate Blue Flax that somehow took hold in my garden．They are awash in color every morning, yet not a single flower remains by the afternoon．They are the very definition of ephemeral.
图1.5.1 在我们的基本HTML文档中，有一个对图像文件blueflax.jpg的引用（位于img标签的src属性），浏览器在加载页面其他部分的同时，会请求、加载和显示这个图片。该页还包括一个指向关于Blue Flax的维基百科页面的链接（位于a标签的href属性）
浏览器可以轻而易举地处理链接和图像（参见图1.5.2）。然而，它们无法处理其他任何文件类型。例如，对有的浏览器来说，要查看PDF就需要在系统中预先装好Adobe Reader，要查看电子表格就需要预先装好OpenOffice这样的软件。
图1.5.2 从网页引用图像和其他非文本内容，浏览器会将这些内容与文本一起显示。你在前面已经看到过了，默认情况下，链接文本的颜色与其他文本的颜色是不一样的，而且还带有下划线
过去，HTML没有内置的方法播放视频和音频文件。结果，各个厂商都开发出了相应的软件，用户可以下载并安装这些软件，从而弥补缺失的功能。这样的软件称为插件（plugin）。
在这些插件中，使用最为广泛的当数Flash。多年以来，Flash驱动了无数万维网上的视频。不过，这个插件也有一些问题，其中最为突出的就是它会耗费较多的计算资源。
幸好，HTML5已经为缓解这一问题迈出了一大步。HTML5提供了audio和video元素，这样，无需使用插件就可以播放音频和视频。不过，现代浏览器也提供了内置的媒体播放器，你仍然可以使用Flash播放器作为旧浏览器的备用工具。HTML5的音频和视频还不完美，但至少开始向着无插件的目标前进了，而且还在继续前进。
本书将在第5章讨论图像，在第6章讨论链接，在第17章讨论HTML5的音频和视频。1.6 文件名和文件夹名
同其他文本文件一样，网页也有文件名。对网页文件命名时要记住几点，这些要点有助于对文件进行组织，使访问者更容易找到并访问你的页面，确保他们的浏览器能正确地处理页面，以及增强搜索引擎优化（SEO），参见图1.6.1和图1.6.2。（注意，本书会替换使用“文件夹”和“目录”，它们表示的含义相同。）
图1.6.1 记住，文件名全部使用小写字母，用短横线分隔单词，用.html作为扩展名。混合使用大小写字母会增加访问者输入正确地址以及找到页面的难度
图1.6.2 文件夹的名称也应全部用小写字母。关键是保持一致。如果使用小写字母，访问者和创建者就不必在大写字母和小写字母之间转换浪费时间了1．文件名采用小写字母
网页的文件名决定了访问者在访问你的页面时需要输入的文本，因此，文件名和文件夹名只用小写字母可以最大程度地避免访问者的输入错误。这样做对创建页面之间的链接也有很大的帮助。如果所有的文件名都用小写字母，你就少了一件需要操心的事情。2．使用正确的扩展名
浏览器主要通过查看文件的扩展名得知需要读取的文本文档是一个网页。尽管也可以使用.htm作为网页的扩展名，但通常使用的是.html。如果页面使用其他的扩展名（如.txt），浏览器会将其当做文本处理，相当于将你的代码直接呈现给访问者。3．用短横线分隔单词
不要在文件名和文件夹名中使用空格分隔单词。应该使用短横线，例如company-history.html和my-favorite-movies.html。有的网站使用下划线（_），我们不推荐这种做法，因为短横线是搜索引擎更容易接受的方式。
提示 SEO可以让网页在搜索引擎的搜索结果中排名靠前。
提示 Mac OS和Windows有时不会显示文档的扩展名。如需查看扩展名，请更改文件夹选项。1.7 URL
URL（Uniform Resource Locator，统一资源定位符）是地址的别名。它包含关于文件存储位置和浏览器应如何处理它的信息。互联网上的每个文件都有唯一的URL。
URL的第一个部分称为模式（scheme）。模式告诉浏览器如何处理需要打开的文件。最常见的模式是HTTP（Hypertext Transfer Protocol，超文本传输协议）。根据你上网的经验，你应该可以猜到，HTTP是用于访问网页的（参见图1.7.1）。HTTPS是从HTTP衍生来的，用于电子商务网站等安全网页。它的格式同HTTP一样，只是用https替代了http。
图1.7.1 基本的URL包含模式、主机名称和路径。路径包含一个或多个目录（文件夹），最后是一个文件名
URL的第二个部分是文件所在的主机的名称，紧接着是路径，路径包含到达这个文件的文件夹以及文件自身的名称（这些都是可选的）。如果A中的路径是tofu/soft/index.html，就表示index.html位于soft目录，而soft目录则位于tofu目录，就像你在自己的电脑上组织文件和文件夹那样。
有时，URL路径不以文件名结尾，而以一个目录结尾（可以包含一个结尾的斜杠，也可以不包含），如图1.7.2所示。在这种情况下，URL指的是路径中最后一个目录中的默认文件，通常为index.html。（通常情况下，所有Web服务器的配置都将index.html作为默认文件名，因此你不必修改任何服务器配置。）
图1.7.2 以一个斜杠而非文件名结尾的URL指向最后一个目录（在这个例子中是tofu目录）中的默认文件。最常见的默认文件名是index.html。因此，这个URL与上一个例子中的URL指向的是同一个页面
其他常见的模式有用于下载文件的ftp（File Transfer Protocol，文件传输协议），如图1.7.3所示；用于发送电子邮件的mailto，如图1.7.4所示（参见第6章）。
图1.7.3 当用户点击这个URL时，浏览器会开始按FTP模式传输文件proposal.pdf（有时需要先输入用户名和密码）
图1.7.4 用于电子邮件地址的URL包括mailto模式，紧接着是一个冒号（没有斜杠），然后是电子邮箱地址本身
模式后面通常紧跟一个冒号和两个斜杠。mailto是个例外，它后面只有一个冒号。
在上述模式中，最常用到的是http（也包括https），其次是mailto，再次是ftp。其他模式则只有在特殊情况下才会用到，你很少会碰到它们。1．绝对URL
URL可以是绝对的，也可以是相对的。绝对URL（absolute URL）包含了指向目录或文件的完整信息，包括模式、主机名和路径（图1.7.1和图1.7.2）。绝对URL就像是完整的通信地址，包括国家、州、城市、邮政编码、街道和姓名。无论邮件来自哪里，邮局都能找到收件人。就URL来说，这意味着绝对URL本身与被引用文件的实际位置无关，无论是在哪个主机上的网页中，某一文件的绝对URL都是完全一样的。
引用别人Web服务器上的文件时，应该总是使用绝对URL。当你通过电子邮件跟你的朋友分享新闻或YouTube视频的URL时，如果只给他们URL的一部分，他们就无法看到相应的内容。这也就是为什么我们的基本页面（参见图1.7.5）中指向维基百科页面的href值是完整的URL而不是简单的Linum_lewisii。
I am continually amazed at the beautiful, delicate Blue Flax that somehow took hold in my garden ．．.
图1.7.5 由于我们的基本页面并不在en.wikipedia.org，因此在链
试读结束[说明：试读内容隐藏了图片]