详情
本书是HTML5与CSS3技术的入门级教程，讲解了如何使用最新的HTML与CSS标准来快速而高效地创建高质量的Web页面，重点讲解了HTML5与CSS3的规范和功能，并辅之以大量示例对其进行了演示。本书适合对Web设计感兴趣的初学者学习。
书名：HTML与CSS入门经典（第9版）
ISBN：978-7-115-36529-3
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 [美] Julie Meloni
译 陈宗斌
责任编辑 傅道坤
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
Julie Meloni: Sams Teach Yourself HTML and CSS in 24 Hours
ISBN: 0672336146
Copyright © 2014 by Pearson Education, Inc.
Authorized translation from the English languages edition published by Pearson Education, Inc.
All rights reserved.
本书中文简体字版由美国Pearson公司授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。
版权所有，侵权必究。
本书是经典畅销图书《HTML与CSS入门经典》的最新版本，与过去的版本相同，本书采用直观、循序渐进的方法，为读者讲解使用HTML5与CSS3设计、创建并维护世界级Web站点的过程，以方便读者掌握。
本书分为24章，其涵盖的内容有理解Web的工作方式，构造HTML文档，理解层叠样式表、理解HTML5页面架构，处理文本块和列表，处理字体，处理颜色和边框，使用外部链接和内部链接，使用表格和栏，创建用于Web的图像，在Web站点中使用图像和多媒体，处理边距、填充、对齐和浮动，理解CSS方框模型和定位，创建固定或流动布局，使用CSS进一步处理列表并设计导航，使用鼠标操作修改文本显示，实现CSS3变形、渐变和动画，创建打印友好的Web界面，理解动态Web站点和HTML5应用，处理基于Web的表单，组织和管理Web站点，以及帮助人们找到你的Web页面等内容。
本书语言简洁、内容丰富，适合Web设计开发人员，以及大中专院校相关专业的学生阅读，对Web开发和发布感兴趣的读者也可以从中获益。
2012年，有超过28亿人访问过Internet，仅仅在美国就有2.55亿人，另外还有5.67亿中国用户、6900万德国用户、5400万英国用户、7600万俄罗斯用户和9900万巴西用户，由此可以看出“世界”（World）这个词语在术语“万维网”（World Wide Web，WWW）中的意义。许多Internet用户也在为Web创建内容，你可能就是其中一员。尽管难以得到Web页面总数的准确统计，可我们还是知道Google在2008年中期就突破了1万亿个索引页面标记。
在接下来的24小时，将有数亿个新页面出现在Internet的可访问区域中。其中有许多页面将放置在私有内联网上，它们在那里将被通过局域网连接的商务人士访问。其中每个页面——像已经在线的数十亿个页面一样——都将使用超文本标记语言（Hypertext Markup Language，HTML）编写。
当学完本书后，你的Web页面也会出现在Internet上。本书还可以给你提供一个基础，用于开发当今世界中最有价值的技能之一：精通HTML。
你真的不用借助任何专业软件，而且无需与费用高昂的设计顾问进行交互，就能花费比预期更少的时间，自行学会创建最高质量的Web页面吗？这本篇幅短小、容易阅读的图书真的能让你自学最新的技术，用于开发和发布Web内容吗？
是的。事实上，通过本书前两章的学习，即使是没有任何HTML经验的读者，也可以编写出能够上线运行的Web页面。
怎样才能如此快地学习Web的语言呢？本书基于HTML和CSS，把课程内容组织到简单的步骤中，然后准确显示了如何处理每个步骤。其中许多HTML代码示例都配有由代码运行后生成的图片。你将看到它是如何做到的，它们的工作机制是什么，然后你就可以立即对自己的页面做相同的事情。几分钟后，可以继续执行下一个步骤。
不久以后，你会对自己发布在Internet上的页面感到惊叹。
本书介绍的内容并不仅限于HTML，因为HTML不是今天创建Web内容所需知道的唯一知识。本书的目标是给你提供一个坚实的基础，使你仅通过24章内容的学习，就能掌握创建符合标准的现代Web站点所需的技能。本书将介绍以下关键的技能和技术。
本书之前的8个版本重点讲解了许多基本知识，这个更新版本也不例外。本书中的所有示例都进行了更新，并且对内容中的重要部分进行了修订，以匹配新的示例和新的技术，完全兼容HTML5和CSS3。
本书中的每个示例都分为两个部分进行演示。
你通常根本不必阅读任何相关的文本（尽管强烈建议你阅读其余的文本），就能够修改示例，使之适合于你自己的页面。
本书中的所有示例都符合标准，并且可以与Apple Safari、Google Chrome、Microsoft Internet Explorer、Mozilla Firefox和Opera协同工作。尽管所有的截图都取自Chrome，仍然可以保证所有的代码在所有其他的浏览器中都可以良好运行。
每章末尾都带有与该章内容相关的简短问题以及相应的答案，用于解决读者可能会问到的一些问题。一份简明而完整的测验可以让你测试自己的水平，确保你理解了该章中介绍的所有内容。最后，还提供了一两个可选的练习，使你能够在继续学习后面的内容之前有机会实践新的技能。
Julie Meloni是一位居住在华盛顿特区的软件开发经理和技术顾问。她编写过多本与Web编程语言和数据库相关的图书，并发表了若干篇文章，其中包括畅销书Sams Teach Yourself PHP, MySQL and Apache All in One。
在本章中你将学到：
在学习超文本标记语言（Hypertext Markup Language，HTML）和层叠样式表（Cascading Style Sheet，CSS）的复杂知识之前，对技术有深入的理解很重要，它们有助于把这些纯文本文件转换成你在计算机或手持设备上浏览WWW时看到的丰富的多媒体显示。
例如，如果不使用Web浏览器查看，那么包含标记和客户端代码的HTML和CSS文件将是无用的，并且除非建立Web服务器，否则除你之外的其他人将无法查看你的内容。Web服务器使你的内容可供其他人使用，他们反过来又使用他们的Web浏览器导航到一个地址并等待服务器给他们发送信息。你将密切地参与这个发布过程，因为你必须创建文件，然后把它们放到服务器上，使它们在第一时间可用，并且必须确保你的内容像预期的那样出现在最终用户面前。
在月球上还没有任何人类的足迹之前，一些有远见的人决定看看他们能否连接几个主要的计算机网络。我将和你分享他们的名称和故事（可以说非常丰富），但是最终的结果是“所有网络之母”，我们称之为Internet。
到1990年，通过Internet访问信息相当具有技术性。事实上，它是如此困难，以至于那些拥有博士学位的物理学家在尝试交换数据时也通常会遭受挫折。有这样一位物理学家，即现在非常著名的Tim Berners-Lee爵士，他设计了一种方式，可以通过超文本链接轻松地交叉引用Internet上的文本。
这不是一种新思想，但是他开发的简单HTML却成功地兴盛起来，虽然更多雄心勃勃的超文本项目步履维艰。超文本（hypertext）最初意指以电子形式存储的文本，并且在页面之间具有交叉引用的链接。它现在是一个更宽泛的术语，指可以链接到其他对象的任何几何对象（文本、图像、文件等）。超文本标记语言（Hypertext Markup Language）是一种用于描述如何组织和链接文本、图形以及包含其他信息的文件的语言。
到1993年，全世界只有100台左右的计算机能提供HTML页面。这些互联的页面被称为万维网（World Wide Web，WWW），并且编写了几个Web浏览器程序，允许人们查看Web页面。由于Web日益普及，几个程序员不久编写了可以查看文本以及图形图像的Web浏览器。从此开始，Web浏览器软件的持续开发以及HTML（和XHTML）语言的标准化带领我们进入了今天我们生活的世界，在这个世界里，有超过5亿的Web站点提供数十亿的文本和多媒体文件。
上面几段文字实际上描述了Web发展简史中的一个不同寻常的阶段。今天的大学生从来也不了解WWW不存在的那段时间，并且永远在线的信息和无处不在的计算的思想将对我们以后生活的各个方面产生深远的影响。不要把Web内容创建和管理视作少数技术人员（如果你愿意的话，也可以称他们为怪才）所拥有的一种技能，到学完本书时，你将把它们看作是任何人都可以掌握的技能，而不仅限于那些天生的怪才。
注意：有关WWW发展历史的更多信息，参见关于这个主题的维基百科的文章：http://en.wikipedia.org/wiki/History_of_the_Web。
你可能注意到本书中使用的术语是“Web内容”（web content），而不是“Web页面”（web page），我们是有意这样做的。尽管我们谈论的是“访问Web页面”，但是我们实际的意思是“查看我们计算机上的一个地址上的所有文本和图像”。我们阅读的文本和查看的图像都是通过Web浏览器呈现的，在单独的文件中可以找到关于它们的某些指导。
这些文件可以包含被HTML代码标记（mark up）或包围的文本，告诉浏览器如何显示文本——作为标题、作为段落或者以红色字体显示等。一些HTML标记告诉浏览器显示图像或视频文件，而不是纯文本，由此得出以下结论：发送给Web浏览器的是不同类型的内容，因此仅仅称作Web页面开始不能完全涵盖它们。我们在这里代之以使用Web内容来涵盖完整范围的文本、图像、音频、视频以及在线发现的其他媒体。
在后面几章中，你将学习链接到或创建在Web站点中发现的各种类型的多媒体Web内容。此时，你只需记住你正在控制用户在访问你的Web站点时所查看的内容。从一个文件开始，其中包含要显示的文本或者告诉服务器给用户的Web浏览器发送一幅图形，你将不得不计划、设计和实现最终构成Web形象（web presence）的所有部分。正如你将在整本书中所学到的，它不是一个困难的过程，只要在学习过程中理解每一个小步骤即可。
就其最基本的形式而言，Web内容开始于一个包含HTML标记的简单文本文件。在本书中，你将学习和创建符合标准的HTML5标记。编写符合标准的代码的许多好处之一是，在将来，将无需担心必须要回顾代码，以从根本上改变它。这样，你的代码将（很可能）总是适用的，只要Web浏览器遵守标准即可（在一段较长的时间内有望如此）。
在许多不同的位置会发生多个过程，最终将产生你可以查看的Web内容。这些过程将发生得非常快（以毫秒级的速度），并且是在幕后发生的。换句话说，尽管我们可能认为我们所做的全部事情是打开Web浏览器，输入一个Web地址，并立即查看所请求的内容，后台的技术就会代表我们努力工作。图1.1显示了浏览器与服务器之间的基本交互。
图1.1 浏览器请求和服务器响应
不过，在看到所请求的站点的全部内容之前，这个进程将会涉及多个步骤，并且可能在浏览器与服务器之间会往返多次。
假设你想执行Google搜索，必然会在地址栏中输入“http://www.google.com”，或者从书签列表中选择Google书签。浏览器几乎立即就会显示如图1.2所示的内容。
图1.2 访问www.google.com
图1.2显示了一个包含文本以及一幅图像（Google标志）的Web站点。用于从Web服务器获取文本和图像、并将其显示在屏幕上的过程的简单版本如下。
1．Web浏览器发送一个对位于www.google.com地址上的index.html文件的请求。index.html文件不必是在地址栏中输入的地址的一部分，在学习本章后面的内容时，将会了解关于index.html文件的更多知识。
2．在收到对特定文件的请求后，Web服务器进程将在其目录内容中寻找特定的文件，打开它，并把该文件的内容发送回Web浏览器。
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）、边框类型（border）和替换文本（alt）。在后面的课程中将会学习到关于属性的更多知识。
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托管提供商，它们的基本托管包以相对较低的费用提供丰富的服务器空间和带宽（以及域名和额外的好处）。如果你对它们中的任何一家都不感兴趣，至少可以使用它们基本的托管包描述，作为你货比三家的指导原则。
注意：作者曾使用过以上三家提供商（后来还使用了其他一些提供商），建议使用其中任何一家提供商都没有问题；她主要使用DailyRazor作为Web托管提供商，尤其是对于高级开发环境则更是如此。
良好的托管提供商的一个特点是，它会提供一个“控制面板”，让你管理自己账户的各个方面。图1.3显示了作者自己在Daily Razor上的托管账户的控制面板。许多Web托管提供商都提供了这种特殊的控制面板软件，或者某种在设计上类似的控制面板——清楚标记的图标引导你可以执行的任务，用以配置和管理你的账户。
图1.3 一个控制面板示例
你可能永远也不需要使用控制面板，但是使之可用将能够简化以下操作：安装数据库及其他软件、查看Web统计信息和添加电子邮件地址（以及许多其他的特性）。如果你可以遵循指导，就可以管理你自己的Web服务器——不需要特殊的培训。
刚才讨论了Web内容递送的过程以及如何获得Web服务器，现在回过头来并讨论利用多种Web浏览器测试Web站点似乎有点奇怪。不过，在继续学习关于利用HTML和CSS创建Web站点的所有知识之前，要记住下面这句非常重要的话：你的Web站点的每位访问者将可能使用与你自己不同的硬件和软件配置。他们的设备类型（台式机、笔记本电脑、上网本、智能手机）、屏幕分辨率、浏览器类型、浏览器窗口大小、连接的速度都可能与你不同。记住：当访问者查看你的站点时，你不能控制他们使用的任何方面。因此，在你设置Web托管环境并准备好工作时，要考虑下载多种不同的Web浏览器，以便可以使用本地测试工具套件。下面让我解释为什么这一点很重要。
尽管所有的Web浏览器都会以相同的常规方式处理信息，但是它们当中的一些特定的区别将导致事情在不同的浏览器中看起来并不总是相同的。甚至相同Web浏览器的相同版本的用户也可能通过选择不同的显示选项和/或更改他们的查看窗口的大小，来改变页面的显示方式。所有主流的Web浏览器都允许用户利用他们自己的选择覆盖Web页面作者指定的背景和字体。当页面第一次出现在人们的显示屏幕上时，屏幕分辨率、窗口大小和可选的工具栏也可能改变他们所看到的页面大小。你只能确保自己编写的是符合标准的HTML和CSS。
在任何情况下，都不要花时间创建只会在你自己的计算机上看起来完美无缺的最终设计——除非你在朋友的计算机上、大街上的咖啡店里的计算机上或者你的iPhone上查看它时能够坦然地面对失望。
注意：在第15章中，你将学习一点响应性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服务器上，才能使之为其他人访问。这个过程通常是使用文件传输协议（File Transfer Protocol，FTP）发生的。要使用FTP，需要一个FTP客户端，这个程序用于把你的计算机上的文件传输到Web服务器上。
FTP客户端需要3份信息来连接到Web服务器。在你建立了账户之后，你的托管提供商将把这些信息发送给你。
当你具有了这些信息后，就准备好使用FTP客户端，把内容传输到Web服务器。
无论使用的FTP客户端是什么，它们一般都会使用相同的界面。图1.4显示了一个FireFTP示例，它是Firefox Web浏览器使用的FTP客户端。本地机器（你的计算机）的目录清单出现在屏幕左边，远程机器（Web服务器）的目录清单则出现在右边。通常会看到右箭头和左箭头按钮，右箭头把所选的文件从计算机发送到Web服务器上；左箭头则把文件从Web服务器发送到计算机上。许多FTP客户端还允许简单地选择文件，然后把那些文件拖放到目标机器上。
图1.4 FireFTP界面
许多FTP客户端可以免费使用，但是也可以通过File Manager（文件管理）工具传输文件，它很可能是Web服务器的控制面板的一部分。不过，这种文件传输方法通常会在过程中引入更多的步骤，并且几乎不像在你自己的计算机上安装FTP客户的过程那样流线化（或简单）。
下面列出了一些流行的免费FTP客户端。
当选择一个FTP客户端并在计算机上安装它时，就准备好从Web服务器上传和下载文件。在下一节中，将使用程序清单1.1中的示例文件解释这个过程的工作方式。
下面的步骤说明了如何使用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服务器的内容。
图1.7 通过Classic FTP成功连接到远程Web服务器
5．现在几乎就准备好将文件传输到Web服务器，剩余的全部工作是把目录改为所谓的Web服务器的文档根目录（document root）。Web服务器的文档根目录被指定为Web内容的顶级目录，它是目录结构的起点，在本章后面将了解关于它的更多信息。通常，这个目录被命名为public_html、www（因为www被创建为public_html的别名）或htdocs。你自己不必创建这个目录，托管提供商将为你创建它。
双击文档根目录名称以打开它。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/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服务器之后，就可以创建一个指向它的链接（在第8章将学习这方面的知识）。换句话说，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浏览器（fully functioning web browser）。
注意：在创建和分发本地站点时，分发Web浏览器不是必需的，尽管这样做可以起到锦上添花的作用。可以合理地假定用户具有他们自己的Web浏览器，并且会打开某个目录中的index.html文件，开始浏览超链接的内容。不过，如果你希望在USB驱动器上分发Web浏览器，可以访问http://www.portableapps.com/，并寻找Portable Firefox或Portable Chrome。
可以简单地把USB驱动器的目录结构视作就像是Web服务器的目录结构。USB驱动器的目录结构的顶级目录可以是文档根目录。或者，如果连同内容一起分发Web浏览器，就可能具有两个目录，例如，一个名为browser，另一个名为content。在这种情况下，content目录将是文档根目录。在文档根目录内，可以具有额外的子文件夹，可以在其中放置内容和其他多媒体资源。
就像远程站点一样，使本地站点维持组织有序也很重要，以便可以避免HTML文件中的断开的链接。在第8章中将学习关于把文件链接到一起的具体细节的更多知识。
你可能具有一个被第三方（如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．不是。使用一种目录结构以进行文件组织完全取决于你自己，尽管强烈建议这样做，因为它可以简化内容维护。
在本章中你将学到：
在Web的早期时代，只以一种字体和一种大小显示文本，但是那些日子已经一去不复返了。HTML与CSS的组合使得有可能控制文本外观的所有方面。在本章中，你将学习如何更改字体的视觉显示（它的字体系列、大小和粗细），以及如何把粗体字、斜体字、上标、下标和加删除线的文本纳入到页面中。你还将学习如何更改字形和字体大小。
Try It Yourself：准备示例文本
如果你具有一些可以显示不同字体和颜色并且可以缩进、居中显示或者执行其他操作的示例文本，那么在这一整章中，就可以最大限度地学习如何编排文本样式。它实际上与你将使用的文本类型无关，因为你具有如此多种不同的样式可能性要尝试，以至于它们无论如何都永远不会同时出现在相同的Web页面上（除非你想使访问者陷入疯狂之中）。利用这个机会，感受一下文本级改变可能如何影响内容的外观。
如果你将使用的文本来自字处理或数据库程序，一定要把它以纯文本或ASCII格式保存到一个新文件中。然后在学习本书的过程中可以添加合适的HTML标签和样式属性来格式化它。
任何文本都可以，但是要尽量找到（或输入）一些你想放到Web页面上的文本。公司宣传册或者你的简历中的文本可能是一个好的选择。
任何类型的大纲、演示文稿中的项目编号要点、带编号的步骤、术语表或者数据库中的文本信息的列表都是可以处理的良好材料。
在使用本章中介绍的代码格式化正文文本之前，要添加在前面各章中使用的HTML基本标签集（至少要使用<html>、<head>、<title>和<body>标签）。
在我们急匆匆地介绍字体改变之前，先让我们简要讨论一下字体内的特殊字符。大多数字体都包括用于欧洲语言的特殊字符，比如Café中的重音“é”。你还将发现少量的数学符号和特殊的标点符号，比如圆形项目符号（●）。
注意：在查看其他设计师的Web内容时，你可能注意到其中标记文本的方法不同于本书中讲述的那些方法。一些格式化文本的老方法包括：使用<b></b>标签对来指示何时应该对单词进行加粗，使用<i></i>标签对指示何时应该以斜体格式显示单词，以及使用<font></font>标签对指定字体系列、大小和其他属性。不过，这种方法将被HTML逐步淘汰，并且CSS要强大得多。
在HTML文档中，可以使用如表6.1所示的合适代码在任何位置插入这些特殊字符。在http://www.webstandards.org/learn/reference/named_entities.html上甚至可以找到一个用于多种字符集的更广泛的代码列表。
表6.1 常用的英语特殊字符
| 字符 |
数字代码 |
代码名称 |
描述 |
|---|---|---|---|
| “” |
" |
" |
引号 |
| & |
& |
& |
“与”符号 |
| < |
< |
< |
小于号 |
| > |
> |
> |
大于号 |
| ¢ |
¢ |
¢ |
分币符号 |
| £ |
£ |
£ |
英镑 |
|
|
¦ |
¦或&brkbar; |
间断竖线 |
| § |
§ |
§ |
分节号 |
| © |
© |
© |
版权 |
| ® |
® |
® |
注册商标 |
| o |
° |
° |
度的符号 |
| ± |
± |
± |
加或减 |
| 2 |
² |
² |
上标2 |
| 3 |
³ |
³ |
上标3 |
| • |
· |
· |
中间点 |
| 1 |
¹ |
¹ |
上标1 |
| ¼ |
¼ |
¼ |
1/4 |
| ½ |
½ |
½ |
1/2 |
| ¾ |
¾ |
¾ |
3/4 |
| Æ |
Æ |
Æ |
大写AE连体字母 |
| æ |
æ |
æ |
小写ae连体字母 |
| É |
É |
É |
重读大写字母E |
| é |
é |
é |
重读小写字母e |
| × |
× |
× |
乘号 |
| ÷ |
÷ |
÷ |
除号 |
例如，可以使用以下任何一种方法创建单词“café”：
café
café
提示：你正在寻找版权（©）和注册商标（®）符号吗？它们的代码分别是©和®。要创建未注册的商标（™）符号，可以使用™。
尽管可以通过数字指定字符实体，每个符号还具有一个助记名称，它们通常更容易记住。
HTML使用称为字符实体（character entity）的特殊代码来表示诸如©和®之类的特殊字符。字符实体的指定总是开始于“&”，并且结束于“;”。表6.1列出了最常用的字符实体，尽管HTML支持的字符实体要多得多。
表6.1包括用于尖括号、引号以及“与”符号的代码。如果希望这些符号出现在页面上，就必须使用那些代码；否则，Web浏览器将把它们解释为HTML命令。
程序清单6.1和图6.1显示了表6.1中的几个符号的实际应用。
程序清单6.1 特殊字符代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Punctuation Lines</title>
<style type="text/css">
section {
margin-bottom: 20px;
}
</style>
</head>
<body>
<section>
Q: What should you do when a British banker picks a fight
with you?<br />
A: £ some ¢¢ into him.
</section>
<section>
Q: What do you call it when a judge takes part of a law
off the books?<br />
A: § violence.
</section>
<section>
Q: What did the football coach get from the locker room
vending machine in the middle of the game?<br />
A: A ¼ back at ½ time.
</section>
<section>
Q: How hot did it get when the police detective interrogated
the mathematician?<br />
A: x³°
</section>
<section>
Q: What does a punctilious plagiarist do?<br />
A: ©
</section>
</body>
</html>图6.1 这是程序清单6.1中的HTML页面在大多数Web浏览器中所显示的效果
回到打字机的时代，我们满足于纯文本显示，以及使用临时的下划线来突出重点。今天，粗体（boldface）和斜体（italic）文本在所有纸面交流中都变成了社交礼节所要求的。自然，也可以向Web内容中添加粗体和斜体文本。多个标签和样式规则使文本格式化成为可能。
给文本添加粗体和斜体格式化效果的老派方法——这里将简要讨论，因为如果你选择查看源代码，那么将不可避免地会在许多Web站点的源代码中看到它，包括<b></b>和<i></i>标签对。对于粗体文本，将用<b>和</b>标签包围文本。类似地，要使任何文本以斜体显示，将在<i>和</i>标签内封闭它。尽管这种方法在浏览器中仍然会工作得很好，但它不像用于文本格式化的CSS样式规则那样灵活或强大，应该避免使用。
注意：尽管只要有可能，你都希望使用样式来影响表示，但是在处理粗体和斜体文本时，样式规则的一种替代方法涉及<strong></strong>和<em></em>标签对。在大多数浏览器中，<strong>标签所做的事情与<b>标签相同，而<em>标签就像<i>标签一样，用于把文本格式化为斜体。当然，也可以按你喜欢的方式设置这些标签的样式，但是这些是默认设置。
<strong>和<em>标签被认为是<b>和<i>之上的改进，因为它们只暗示文本应该接受特殊的强调。它们没有明确规定应该如何实现这种效果。换句话说，浏览器不必把<strong>解释为意指粗体或者把<em>解释为意指斜体。这使<strong>和<em>更适合于HTML5，因为它们给文本添加了含义，并且会影响文本的显示方式。
本书第III部分“利用CSS进行高级Web页面设计”更深入地介绍了CSS样式规则，但是这里做一点铺垫是合适的，以便你可以理解一些基本的文本格式化选项。font-weight样式规则使你能够使用一个样式规则设置字体的粗细或鲜明度，用于font-weight的标准设置包括normal、bold、bolder和lighter（其中normal是默认设置）。斜体文本是通过font-style规则控制的，可以把它设置为normal、italic或oblique。如果希望应用多个样式规则，也可以一起指定样式规则，如下面的示例所示：
<p style="font-weight:bold; font-style:italic">This paragraph is bold and italic!</p>在这个示例中，在<p>标签的style属性中指定了两个样式规则。使用多个样式规则的关键是：必须用分号（;）把它们隔开。
不过，并不仅限于在段落中使用字体样式。下面的代码显示了如何把项目符号列表中的文本设置为斜体字：
<ul>
<li style="font-style:italic">Important Stuff</li>
<li style="font-style:italic">Critical Information</li>
<li style="font-style:italic">Highly Sensitive Material</li>
<li>Nothing All That Useful</li>
</ul>也可以在标题内使用font-weight样式，但是一种更粗重的字体通常不会影响标题，因为它们默认已经是粗体。
尽管使用CSS允许对文本应用丰富的格式化效果，但是当不必像CSS所允许的那样具体时，另外几个有效的HTML5标签也适合于给文本添加特殊的格式化效果。下面给出了其中一些标签，所有其他的文本格式化实际上应该都是利用CSS完成的。每个标签的实际应用如程序清单6.2和图6.2所示。
警告：在过去，<u>标签用于创建加下划线的文本，但是你现在将不想使用它，这是由于下面两个原因。第一，用户期望加下划线的文本是一个链接，因此如果加下划线的文本不是链接，那么他们可能会糊涂。第二，<u>标签是过时的，这意味着它将HTML语言逐步淘汰（就像<strike>标签一样）。在Web浏览器中仍然支持这两个标签，并且很可能持续相当长的一段时间，但是使用CSS是创建加下划线和删除线的文本的首选方法。
程序清单6.2 特殊格式化的标签
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Miracle Product</title>
</head>
<body>
<p>
New <sup>Super</sup><strong>Strength</strong> H<sub>2</sub>O
<em>plus</em> will knock out any stain.<br/>Look for new
<sup>Super</sup><strong>Strength</strong> H<sub>2</sub>O <em>plus</em>
in a stream near you.
</p>
<pre>
NUTRITION INFORMATION (void where prohibited)
Calories Grams USRDA
/Serving of Fat Moisture
Regular 3 4 100%
Unleaded 3 2 100%
Organic 2 3 99%
Sugar Free 0 1 110%
</pre>
</body>
</html>图6.2 这是程序清单6.2中的字符格式化的效果
<pre>标签导致文本以等宽字体显示，并且会做另外某件独特而有用的事情。如你在第2章中所学到的，在HTML文件中通常会忽略多个空格和换行符，但是<pre>可以保留额外的间距和换行符。例如，如果没有<pre>，图6.2末尾的文本看起来将如下所示：
calories grams usrda /serving of fat moisture regular
3 4 100% unleaded 3 2 100% organic 2 3 99% sugar free 0 1 110%即使在每一行末尾添加<br />标签，列也不会正确地对齐。不过，当在开头放置<pre>并在末尾放置</pre>时，列将正确地对齐，因为这样会保留精确的空格，而无需使用<br />标签。<pre>标签提供了一种快捷、容易的方式，用于以最少的工作量保留你可能想转换成Web页面的任何等宽文本文件的对齐方式。
CSS提供了一些用于对齐文本（实际上可以对文本做任何事情）的更健壮的方法，在本书整个第III部分将学习关于它们的更多知识。
有时，你可能想对文本的大小和外观进行更多一点控制，而不仅仅是将其设置为粗体或斜体。在我深入讨论使用CSS调整字体的合适方式之前，让我们简要探讨在CSS出现之前是怎样操作的：当你查看其他Web站点的源代码时，仍有可能发现这种方法的一些示例。记住，仅仅由于这些老方法仍在使用并不意味着你应该如法炮制。
在样式表投入使用之前，现在被逐步淘汰的<font>标签用于控制Web页面文本中的字体。
注意：我不能充分强调<font>标签将不会被使用！这里仅仅出于演示和历史目的而使用它。
例如，曾经使用下面的HTML代码更改页面上的一些文本的大小和颜色：
<font size="5" color="purple">This text will be big and purple.</font>可以看到，<font>标签的size和color属性使得可以不用太费力地改变文本的字体。尽管这种方法工作得很好，但是由于CSS样式规则，它已经被一种更高级的字体格式化方法所取代。下面给出了几种用于控制字体的主要的样式规则。
font-family样式规则允许设置用于显示文本的字形。你可以（并且通常应该）为这个样式指定多个值（用逗号隔开），使得如果用户系统上的第一种字体不可用，那么浏览器将可以尝试一种替代字体。
注意：在第7章中将学习关于控制页面上的文本颜色的更多知识。该章还将说明如何创建你自己的自定义颜色，以及控制文本链接的颜色。
提供替代字体系列很重要，因为每个用户都可能会安装不同的字体集，至少会超越常用的基本核心字体集（如Arial、Times New Roman等）。通过提供替代字体列表，当无法找到理想的字体时，就有更好的机会使页面优雅地转而依靠一种已知的字体。下面给出了一个font-family样式的示例，它用于设置一个文本段落的字形：
<p style="font-family:arial, sans-serif, 'times roman'">这个示例具有几个有趣的部分。第一，将arial指定为主字体。大小写不影响字体系列，因此arial与Arial或ARIAL没有什么不同。关于这段代码的另一个有趣的方面是：字体名称“times roman”是用单引号括住的，因为它中间有一个空格。不过，由于'times roman'出现在sans-serif的通用规范之后，将不太可能使用它。由于sans-serif位于第二个位置，因此它告诉浏览器：“如果这台机器上没有安装Arial，那么就使用默认的sans-serif字体。”
font-size和color样式规则也常用于控制字体的大小和颜色。font-size样式可以设置为一种预先定义的大小（如small、medium或large）；color则可以设置为一种预先定义的颜色（如white、black、blue、red或green），或者可以把它设置为一种特定的十六进制颜色（如#ffb499）。下面是前一个段落示例的更好版本，并且指定了字体大小和颜色：
<p style="font-family:arial, 'times roman', sans-serif; font-size:14pt;
color:green">程序清单6.3中的示例Web内容以及如图6.3所示的结果，使用了一些字体样式规则来创建一份基本的在线简历的开始部分。
注意：在第7章将学习十六进制颜色。目前，只需理解color样式规则允许指定精确的颜色，而不仅仅是使用green、blue、orange等。
程序清单6.3 使用字体样式规则创建基本的简历
<!DOCTYPE html>
<html lang="en">
<head>
<title>Résumé for Jane Doe</title>
<style type="text/css">
body {
font-family: Verdana, sans-serif;
font-size: 12px;
}
header {
text-align: center;
}
h1 {
font-family:, serif;
font-size:28px;
text-align:center;
}
p.contactinfo {
font-size:14px;
}
p.categorylabel {
font-size:12px;
font-weight:bold;
text-transform:uppercase;
}
div.indented {
margin-left: 25px;
}
</style>
</head>
<body>
<header>
<h1>Jane Doe</h1>
<p class="contactinfo">1234 Main Street, Sometown,
CA 93829<br/>
tel: 555-555-1212, e-mail: jane@doe.com</p>
</header>
<section>
<p class="categorylabel">Summary of Qualifications</p>
<ul>
<li>Highly skilled and dedicated professional offering a
solid background in whatever it is you need.</li>
<li>Provide comprehensive direction for whatever it is
that will get me a job.</li>
<li>Computer proficient in a wide range of industry-related
computer programs and equipment. Any industry.</li>
</ul>
</section>
<section>
<p class="categorylabel">Professional Experience</p>
<div class="indented">
<p><strong>Operations Manager,
Super Awesome Company, Some City, CA [Sept 2002 –
present]</strong></p>
<ul>
<li>Direct all departmental operations</li>
<li>Coordinate work with internal and external
resources</li>
<li>Generally in charge of everything</li>
</ul>
<p><strong>Project Manager,
Less Awesome Company, Some City, CA [May 2000 - Sept
2002]</strong></p>
<ul>
<li>Direct all departmental operations</li>
<li>Coordinate work with internal and external
resources</li>
<li>Generally in charge of everything</li>
</ul>
/div>
</section>
<section>
<p class="categorylabel">Education</p>
<ul>
<li>MBA, MyState University, May 2002</li>
<li>B.A, Business Administration, MyState University,
May 2000</li>
</ul>
</section>
<section>
<p class="categorylabel">References</p>
<ul>
<li>Available upon request.</li>
</ul>
</section>
</body>
</html>图6.3 这是程序清单6.3中使用的代码所显示的效果
使用CSS，如你在第3章中所学到的，它把样式集组织成类，可以看到文本格式化是如何应用于这段内容的不同区域的。如果密切查看div.indented类的定义，将会看到margin-left样式的使用。这个样式对元素的左边应用一定的空间量（在这个示例中是25像素），这个空间将导致图6.3中所示的缩进效果。
注意：如果查看前面的链接位置，可以看到Google的@font-face定义已经为我们完成了。确切地讲，其定义如下：
在上一节中，看到我们十分确信所用的字体系列驻留在每个人的计算机上。也就是说，可以保证大多数计算机都会呈现Arial或Times New Roman，或者具有用于serif和sans-serif的所必需的默认字体，如果这是样式表所需要的话。但是，利用CSS3中包括的@font-face特性，甚至可以对在线放置的内容发挥更大的设计能力。
简而言之，@font-face特性允许在HTML5标记中定义要使用的字体，使得无论用户是否在他们的计算机上安装了那些字体（并且很有可能用户没有在他们自己的计算机上安装你所选的奇特字体），都会显示出它们。字体的定义可以是本地的（对于你的Web服务器而言，如果你在意在那里包括字体文件的话），或者是远程的（可以链接到许多字体存储的位置）。
@font-face {
font-family: 'Cherry Swash';
font-style: normal;
font-weight: 400;
src: local('CherrySwash'), local('CherrySwashRegular'), url(http://themes.
googleusercontent.com/static/fonts/cherryswash/v1/HqOk7C7J1TZ5i3LejF0vnhCUOGz
7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
font-family: 'Cherry Swash';
font-style: normal;
font-weight: 700;
src: local('Cherry SwashBold'), local('CherrySwashBold'), url(http://themes.
googleusercontent.com/static/fonts/cherryswash/v1/CfyMyQqfucZPQNB0nvYyHl4twX
kwp3_u9ZoePkT564.woff)
format('woff');
}在样式表中，要定义在整个页面中使用的新字体，可以简单地使用下面的结构：
@font-face {
font-family: 'some_name_goes_here';
src: url('some_location_of_the_font_file');
}在定义它之后，可以在样式表中的其他任何位置引用font-family，如下所示：
h1 {
font-family:some_name_goes_here;
font-size:28px;
text-align:center;
}但是，你可能会问，从哪里获得字体呢？可以从许多位置获得字体——有一些字体是免费的，其他字体则不然。一个广泛流行的位置是Google Web Fonts（http://www.google.com/fonts），这不仅是因为这里的字体是免费的，而且因为Google被广泛认可为提供了一个稳定的平台，如果你的Web排版样式依赖于驻留在别人的Web服务器上的字体，这就很重要。其他一些用于获得字体的可靠的付费站点是TypeKit（www.typekit.com/）和Fontspring（www.fontspring.com）。付费站点不一定很糟糕，艺术家们也必须挣钱。我在TypeKit上进行了个人订购，并且对它们的服务非常满意，但是我也把Google Web Fonts用于许多项目。
让我们试着修改程序清单6.3中的代码，包括进一种Google Web Font字体，用于h1元素。如果转到http://www.google.com/fonts，并选择一种你喜欢的字体，Google提供了要在HTML和CSS中包括的代码。我选择了一种名为Cherry Swash的字体，Google建议我在自己的HTML模板中的<head>区域中包括以下代码：
<link href='http://fonts.googleapis.com/css?family=Cherry+Swash:400,700'
rel='stylesheet' type='text/css' />既然我的代码知道在哪里寻找字体，我们就只需引用它即可：
h1 {
font-family:'Cherry Swash';
font-size:28px;
text-align:center;
}图6.4显示了使用Web字体的新简历。
图6.4 这份简历在标题中使用Cherry Swash作为字体
本章讲解了如何使文本显示为粗体或斜体，以及如何编码上标、下标、特殊符号和重音字母。本章还讲解了如何在预先格式化的等宽文本段落中使文本正确对齐，以及如何控制Web页面上的任何文本区域的大小、颜色和字形。本章还介绍了一些用于指定许多HTML标签的选项和特殊行为的属性，并且讲解了结合使用style属性和CSS样式规则来影响文本的外观。最后，本章介绍如何使用Web字体，来丰富页面的表示。
表6.2总结了本章中讨论的标签和属性。
表6.2 本章介绍的HTML标签和属性
| 标签/属性 | 作用 |
|---|---|
| <em>...</em> | 强调（通常是斜体） |
| <strong>...</strong> | 更重的强调（通常是粗体） |
| <pre>...</pre> | 预先格式化的文本（将保留精确的换行符和间距，通常以等宽字体呈现） |
| <sub>...</sub> | 下标 |
| <sup>...</sup> | 上标 |
| 属性 | |
| style="font-family:typeface" | 字体的字形（系列），它是字体的名称，比如Arial（也可用于<p>、<h1>、<h2>、<h3>等） |
| style="font-size:size" | 字体的大小，可以设置为small、medium、large、x-small、x-large等，也可以设置为具体的磅大小（比如12pt） |
| style="color:color" | 更改文本的颜色 |
问：我怎样查找自己的计算机上所安装的字体的准确名称？
答：在Windows计算机上，打开“控制面板”，并单击Fonts文件夹，这将列出系统上的字体（Vista用户可能不得不切换到“控制面板”中的“经典视图”）。在Mac上，在Applications文件夹中打开Font Book。当在font-family样式规则中指定字体时，可以使用字体名称的准确拼写。不过，字体名称不区分大小写。
问：我怎样把日文、阿拉伯语、中文和其他非欧洲字符放在我的页面上？
答：首先，需要阅读你的页面上的这些字符的用户必须安装合适的语言字体。他们还必须为其Web浏览器选择该语言字符集及其关联的字体。在Windows中可以使用“字符映射表”程序（或者其他操作系统中的类似程序），获取任何语言字体中的每个字符的数字代码。要找到“字符映射表”，可以单击“开始”>“所有程序”>“附件”>“系统工具”命令（在Mac上，可以打开Applications文件夹中的Font Book）。如果你想要的字符具有代码214，就使用Ö把它放在Web页面上。如果找不到“字符映射表”程序，可以使用操作系统的内置“帮助”功能查找特定的位置。
在亚洲语言中包括短消息（比如“We Speak Tamil-Call Us!”）的最佳方式是将其作为图形图像来包括它。这样，每个用户都将会看到它，即使他们使用英语作为Web浏览的主要语言也是如此。但是，甚至对于在图形中使用一种语言字体，也可能不得不为操作系统下载特定的语言包。同样，可以检查系统的“帮助”功能，获取特定的指导。
本测验包含一些问题和练习，可帮助读者巩固本章所学的知识。在查看答案之前，要尝试尽量回答所有的问题。
1．怎样使用样式代替<b>或<strong>标签创建一个段落，并使其中前3个单词显示为粗体？
2．怎样表示水的化学公式？
3．怎样在Web页面上显示“© 2013, Webwonks Inc.”？
4．怎样居中显示整个页面上的所有文本？
1．可以使用下面这段代码：
<p><span style="font-weight: bold">First three words</span> are bold.</p>2．使用以下代码：
H<sub>2</sub>O3．可以使用以下代码之一：
© 2013, Webwonks Inc.或
© 2013, Webwonks Inc.4．如果考虑把<div style="text-align:center">或者另一个容器元素紧接着放在页面顶部的<body>标签后面，并在页面底部的</body>标签之前使用</div>，那么你就是正确的。不过，在<body>标签中也直接支持text-align样式，这意味着可以放弃<div>标签，并且style="text-align:center"样式直接放在<body>标签中。这样，整个页面将迅速居中显示。
