作者：[美]朱莉 梅洛尼（Julie Meloni）
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML、CSS和JavaScript入门经典(第2版)试读：
内容提要
本书采用直观的、逐步深入的方法介绍如何使用HTML、CSS（Cascading Style Sheet，层叠样式表）和JavaScript设计、创建和维护世界级的网站，并且提供了清晰的指导。
本书信息丰富，涵盖了HTML、CSS和JavaScript的基础知识和高级应用，还介绍了如何组织和管理网站以及帮助人们找到你的Web页面的知识。在每一章末尾还配有相应的问答题和作业，可以帮助你检验所学的知识。
本书示例丰富，操作步骤简洁、明了，非常适合于从事Web设计和网站开发的初学者阅读，对于有一定经验的读者，也有很大的参考价值。
关于作者
Julie C. Meloni是一位居住在美国华盛顿特区的软件开发经理和技术顾问。她编写过多本图书和若干篇文章，都是关于基于Web的程序设计语言和数据库等主题的，包括畅销书Sams Teach Yourself PHP, MySQL and Apache All in One。▶▶第1章理解Web的工作方式
在本章中你将学到：● WWW（World Wide Web，万维网）简史；● 术语Web页面的含义是什么，为什么这个术语并不总会反映所涉
及的全部内容；● 怎样把内容从你的个人计算机发送到别人的Web浏览器上；● 怎样选择Web托管提供商；● 不同的Web浏览器和设备类型可能怎样影响内容；● 怎样使用FTP把文件传输到Web服务器上；● 应该把文件存放在Web服务器上的什么位置；● 在不涉及Web服务器的情况下怎样分发Web内容；● 怎样使用其他发布方法，比如博客；● 关于测试Web内容的外观和功能的提示。
在学习HTML（Hypertext Markup Language，超文本标记语言）、CSS（Cascading Style Sheets，层叠样式表）和JavaScript的复杂知识之前，获得对技术的稳固理解很重要，它们有助于把这些纯文本文件转换成你在计算机或手持设备上浏览WWW时看到的丰富的多媒体显示。
例如，如果不使用Web浏览器查看，那么包含标记和客户端代码的HTML和CSS文件将是无用的，并且除非使用Web服务器，否则除你之外的其他人将无法查看你的内容。Web服务器使你的内容可供其他人使用，他们反过来又使用其Web浏览器导航到一个地址并等待服务器向自己发送信息。你将密切地参与这个发布过程，因为你必须创建文件，然后把它们放到服务器上，使它们在第一时间可用，并且必须确保你的内容像预期的那样出现在最终用户面前。1.1 HTML和WWW简史
在月球上还没有任何人类足迹的时候，一些有远见的人决定去看看他们是否能够连接几个主要的计算机网络。我将和你分享它们的名称和故事（可以说非常丰富），但是最终的结果是“所有网络之母”，我们称之为Internet。
到1990年，通过Internet访问信息还相当具有技术性。事实上，它是如此困难，以至于那些拥有博士学位的物理学家们在尝试交换数据时也通常会遭受挫折。有这样一位物理学家，即现在非常著名的Tim Berners-Lee爵士，他设计了一种方式，可以通过超文本链接轻松地交叉引用Internet上的文本。
这不是一种新思想，但是他开发的简单HTML却成功地兴盛起来，虽然更多雄心勃勃的超文本项目步履维艰。超文本最初意指以电子形式存储的文本，并且在页面之间具有交叉引用的链接。它现在是一个更宽泛的术语，指可以链接到其他对象的任何几何对象（文本、图像、文件等）。超文本标记语言（Hypertext Markup Language）是一种用于描述如何组织和链接文本、图形以及包含其他信息的文件的语言。
到1993年，全世界只有100台左右的计算机被配备成提供HTML页面。这些互连的页面被称为WWW（World Wide Web，万维网），并且编写了几个Web浏览器程序，允许人们查看Web页面。由于Web日益普及，几个程序员不久之后编写了可以查看文本以及图形图像的Web浏览器。从此，Web浏览器软件的持续开发以及HTML（和XHTML）语言的标准化带领我们进入了今天的世界，在这个世界里，有超过5亿个Web站点提供数十亿个文本和多媒体文件。
上面几段文字实际上描述了Web发展简史中的一个不同寻常的阶段。今天的大学生从来也不了解WWW不存在的那段时间，并且永远在线的信息和无处不在的计算的思想对我们以后生活的各个方面产生深远的影响。不要把Web内容创建和管理视作少数技术人员（如果你愿意的话，也可以称他们为怪才）所拥有的一组技能，到学完本书时，你将把Web看作是任何人都可以掌握的技能，而不仅限于那些天生的怪才。
注意：有关WWW发展历史的更多信息，参见关于这个主题的维基百科的文章：http://en.wikipedia.org/wiki/History_of_the_Web。1.2 创建Web内容
你可能注意到本书中使用的术语是“Web内容”（Web content），而不是“Web页面”（Web page），我们是有意这样做的。尽管我们谈论的是“访问Web页面”，但是实际的意思是“查看我们计算机上的一个地址上的所有文本和图像”。我们阅读的文本和查看的图像都是通过Web浏览器呈现的。浏览器将按照文件中的指示来呈现它们。
这些文件可以包含被HTML代码标记或包围的文本，告诉浏览器如何显示文本——作为标题、作为段落或者以红色字体显示等。一些HTML标记告诉浏览器显示图像或视频文件，而不是纯文本，由此得出以下结论：发送给Web浏览器的是不同类型的内容，因此仅仅称作Web页面将无法完全涵盖它们。我们在这里代之以使用Web内容这个术语，以涵盖文本、图像、音频、视频以及在线发现的其他媒体的完整范围。
在后面几章中，你将学习链接到或创建在Web站点中发现的各类多媒体Web内容的基础知识。此时，你只需记住你正在控制用户在访问你的Web站点时所查看的内容。从一个文件开始，其中包含要显示的文本或者告诉服务器给用户的Web浏览器发送一幅图形，你将不得不计划、设计和实现最终构成Web状态（Web presence）的所有部分。如你将在整本书中所学到的，它不是一个困难的过程，只要在学习过程中理解每一个小步骤即可。
就其最基本的形式而言，Web内容开始于一个包含HTML标记的简单文本文件。在本书中，你将学习和创建符合标准的HTML5标记。编写符合标准的代码的一个好处是：在将来，将无需担心必须要回顾代码，以从根本上改变它。这样，你的代码将（很可能）总是适用的，只要Web浏览器遵守标准即可（在一段较长的时间内有望如此）。1.3 理解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代码看起来如下所示：
这个HTML标签提供了一些属性，告诉浏览器显示这个标志所必需的信息：文件源地址（src）、宽度（width）和高度（height）。在后面各章中将会学习关于属性的更多知识。
4．浏览器查看标签中的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服务器，就可以顺利学完本书中的所有课程，但是这样的话，除你自己之外其他任何人都将无法查看你的杰作。1.4 选择Web托管提供商
尽管刚才告诉你无需具有Web服务器也可以顺利地学完本书中的所有课程，我们还是建议你使用Web服务器继续学习下面的内容。不要担心，获得托管提供商通常是一个快速、轻松并且相对廉价的过程。事实上，只需支付比你正在阅读的这本书稍微多一点的费用，就能获得你自己的域名和为期一年的Web托管。
如果在所选的搜索引擎中输入“web hosting provider”（Web托管提供商），将获得数百万条纪录和无穷无尽的倡议性搜索结果（也称为广告）。如果不这样，许多Web托管提供商将从世界上消失，尽管事实可能并非如此。即使正在查看托管提供商的经过管理的列表，它也可能令人不知所措，尤其是当你所寻找的只是一个位置，用于托管你自己或者你的公司或组织的简单Web站点时。
你将希望在寻找提供商时缩小搜索的范围，并且选择最适合自己需要的提供商。对于Web托管提供商的一些选择标准如下。● 可靠性/服务器“正常运行时间”：如果具有一种在线状态（online presence），你将希望确保人们实际上能够以一致的方式
到达那里。● 客户服务：寻找用于联系客户服务的多种方法（电话、电子邮件、
聊天），以及针对常见问题的在线文档。● 服务器空间：托管包将会包括足够的服务器空间以存放你计划在
Web站点（如果有的话）中包括的所有多媒体文件（图像、音频、
视频）吗？● 带宽：托管包将会包括足够的带宽从而可以满足所有人访问你的
站点并下载文件，而无需额外付费吗？● 域名购买和管理：托管包将会包括域名吗，或者你必须单独通过
托管账户购买和维护域名吗？● 价格：不要为托管支付过多的费用。你将会看到所提供的广泛价
格，并且应该立即就想知道：“它们有什么区别？”通常，它们
之间的区别几乎与服务的质量无关，而只与公司的系统开销以及
公司认为它可以怎样侥幸地逃避收费有关。一个良好的经验法则
是：如果每年为基本的托管包和域名支付75美元以上的费用，
那么你支付的费用就可能太高了。
下面列出了3家可靠的Web托管提供商，它们的基本托管包以相对较低的费用提供丰富的服务器空间和带宽（以及域名和额外的好处）。如果你不中意其中任何一家Web托管提供商，至少可以使用它们基本的托管包描述，作为你货比三家的指导原则。● A Small Orange（www.asmallorange.com）：它的Tiny和Small托
管包是新的Web内容发布者的完美起点。● DailyRazor（www.dailyrazor.com）：甚至它的Rookie个人托管包
也是全功能的和可靠的。● LunarPages（www.lunarpages.com）：它的Basic托管包非常适
合于许多个人和小企业的Web站点。 注意：
本书作者多年来使用了所有这些提供商（后来还使用了其他一些提供商），建议使用其中任何一家提供商都没有问题。她主要使用DailyRazor作为Web托管提供商，尤其是对于高级开发环境则更是如此。
良好的托管提供商的一个特点是：它会提供一个“控制面板”，让你管理自己账户的各个方面。图1.3显示了我自己在DailyRazor上的托管账户的控制面板。许多Web托管提供商都提供了这种特殊的控制面板软件，或者某种在设计上类似的控制面板——清楚标记的图标引导你可以执行的任务，用以配置和管理你的账户。图1.3 一个示范性的控制面板
你可能永远也不需要使用控制面板，但是使之可用将能够简化以下操作：安装数据库及其他软件、查看Web统计信息和添加电子邮件地址（以及许多其他的特性）。如果你可以遵循指导，在无需特殊培训的情况下就可以管理你自己的Web服务器。1.5 利用多种Web浏览器执行测试
刚才讨论了Web内容递送的过程以及如何获得Web服务器，现在回过头来并讨论利用多种Web浏览器测试Web站点似乎有点奇怪。不过，在继续学习关于利用HTML和CSS创建Web站点的所有知识之前，要记住下面这句非常重要的话：你的Web站点的每位访问者将可能使用与你自己不同的硬件和软件配置——他们的设备类型（台式机、笔记本电脑、上网本、智能手机、iPhone）、屏幕分辨率、浏览器类型、浏览器窗口大小、连接的速度，等等。记住：当访问者查看你的站点时，你不能控制他们的任何行为。因此，在设置Web托管环境并准备好工作时，要考虑下载多种不同的Web浏览器，以便可以使用本地测试工具套件。下面让我解释为什么这一点很重要。
尽管所有的Web浏览器都会以相同的常规方式处理信息，但是它们当中的一些特定的区别将导致事情在不同的浏览器中看起来并不总是相同的。甚至相同Web浏览器的相同版本的用户也可能通过选择不同的显示选项和/或更改他们的查看窗口的大小，来改变页面的显示方式。所有主流的Web浏览器都允许用户利用他们自己的选择覆盖Web页面作者指定的背景和字体。当页面第一次出现在人们的显示屏幕上时，屏幕分辨率、窗口大小和可选的工具栏也可能改变他们所看到的页面大小。你只能确保自己编写的是符合标准的HTML和CSS。
在任何情况下，都不要花时间创建只会在你自己的计算机上看起来完美无缺的最终设 计——除非你在朋友的计算机上、大街上的咖啡店里的计算机上或者你的iPhone上查看它时能够坦然地面对失望。 注意：
在第12章中，你将学习一点响应性Web设计的概念，其中将依赖于用户的行为和查看环境（屏幕大小、设备等）自动转换和改变站点的设计。
应该总是尽可能多地在下面这些Web浏览器上测试你的Web站点。● 用于Mac的Apple Safari（http://www.apple.com/safari/）。● 用于Mac、Windows和Linux/UNIX的Google Chrome（http://
www.google.com/chrome）。● 用于Mac、Windows和Linux/UNIX的Mozilla Firefox（http://
www.mozilla.com/firefox/）。● 用于Windows的Microsoft Internet Explorer（http://
www.microsoft.com/ie）。● 用于Mac、Windows和Linux/UNIX的Opera（http://
www.opera.com/）。
既然你已经建立了开发环境，或者对将来想要建立的开发环境至少有了某种想法，现在就让我们继续创建一个测试文件。1.6 创建一个示例文件
在开始前，让我们看看程序清单1.1。这个程序清单是一份简单的Web内容，其中包含几行HTML代码，用于在两行上以大号、加粗字母打印“Hello World! Welcome to My Web Server.”，并在浏览器窗口内居中显示它们。在继续学习本书后面的内容时，你将对这个文件内使用的HTML和CSS有更多的了解。程序清单1.1 我们的示例HTML文件
Hello World!
Welcome to My Web Server.
为了利用这些内容，可以打开所选的文本编辑器，比如“记事本”（在Windows上）或TextEdit（在Mac上）。不要使用“写字板”、Microsoft Word或者其他全功能的字处理软件，因为这些程序创建的文件类型不同于我们用于创建Web内容的纯文本文件。
输入在程序清单1.1中看到的内容，然后使用sample.html作为文件名保存文件。.html扩展名告诉Web服务器，你的文件的确是HTML。当把文件内容发送给请求它的Web浏览器时，浏览器也会知道它是HTML，并将相应地呈现它。
既然你已经有了一个要使用的示例HTML文件，并且希望把它放到某个地方，如Web托管账户，现在就让我们发布你的Web内容。1.7 使用FTP传输文件
就像你迄今为止所学到的，必须把Web内容放到Web服务器上，使之可供其他人访问。这个过程通常是使用FTP（File Transfer Protocol，文件传输协议）完成的。要使用FTP，需要一个FTP客户端，这个程序用于把你的计算机上的文件传输到Web服务器上。
FTP客户端需要3份信息来连接到Web服务器，在你建立了账户之后，你的托管提供商将把下面这些信息发送给你。● 你将连接到的主机名或地址。● 你的账户的用户名。● 你的账户的密码。
当你具有了这些信息后，就准备好使用FTP客户端，把内容传输到Web服务器。1.7.1 选择FTP客户端
无论使用的FTP客户端是什么，它们一般都会使用相同类型的界面。图1.4显示了一个FireFTP示例，它是Firefox Web浏览器使用的FTP客户端。本地机器（你的计算机）的目录清单将出现在屏幕左边，远程机器（Web服务器）的目录清单则出现在右边。通常会看到右箭头和左箭头按钮，如图1.4所示。右箭头把所选的文件从计算机发送到Web服务器上，左箭头则把文件从Web服务器发送到计算机上。许多FTP客户端还允许简单地选择文件，然后把那些文件拖放到目标机器上。
许多FTP客户端可以免费使用，但是也可以通过基于Web的File Manager（文件管理）工具传输文件，该工具很可能是Web服务器的控制面板的一部分。不过，这种文件传输方法通常会在过程中引入更多的步骤，并且几乎不像在你自己的计算机上安装FTP客户端的过程那样流线化（或简单）。
下面列出了一些流行的免费FTP客户端。● 用于Mac和Windows的Classic FTP（http://www.nchsoftware.com/
classic/）。● 用于Mac的Cyberduck（cyberduck.ch）。● 用于Mac的Fetch（fetchsoftworks.com）。● 用于所有平台的FileZilla（filezilla-project.org）。● 用于所有平台的FireFTP（fireftp.mozdev.org）Firefox扩展。
当选择一个FTP客户端并在计算机上安装它时，就准备好从Web服务器上传和下载文件。在下一节中，将使用程序清单1.1中的示例文件解释这个过程的工作方式。图1.4 FireFTP界面1.7.2 使用FTP客户端
下面的步骤说明了如何使用Classic FTP连接到Web服务器并传输文件。不过，所有的FTP客户端都使用类似的（如果不是完全相同的）界面。如果理解了下面的步骤，就应该能够使用任何FTP客户端。
记住，首先需要主机名、账户的用户名和账户的密码。
1．启动Classic FTP程序，并单击Connect按钮，将提示你填写想连接到的站点相关的信息，如图1.5所示。图1.5 在Classic FTP中连接到新的站点
2．填写图1.5中显示的每个项目，如下所述。● FTP Server是需要向其发送Web页面的Web服务器的FTP地址，
你的托管提供商将给你提供这个地址。它可能是yourdomain.com，
但是要检查你在签订服务合同时接收到的信息。● 使用托管提供商提供的信息完成User Name框和Password框。
3．你可能要切换到Advanced选项卡，并修改以下可选的项目，如图1.6所示。● Site Label是你将用于称呼自己站点的名称。其他任何人都不会
看到这个名称，因此可以输入你想要的任何名称。● 可以更改Initial Remote Directory on First Connection和Initial
Local Directory on First Connection的值，但是你可能要等待，直
到你习惯了使用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。你自己不必创建这个目录，托管提供商将为你创建它。
双击文档根目录名称打开它。FTP客户端界面的右边将变成显示该目录的内容（此时它可能是空的，除非Web托管提供商代表你在该目录中放置了占位符文件）。图1.7 通过Classic FTP成功连接到远程Web服务器
6．这里的目标是把你以前创建的sample.html文件从你的计算机传输到Web服务器上。在FTP客户端界面的左边列出的目录中查找文件（如果需要，可以进行导航），并单击它一次，以高亮显示文件名。
7．单击FTP客户端界面中间的右箭头按钮，把文件发送到Web服务器。当文件传输完成时，客户界面的右边将会刷新，以显示发送到目的地的文件。
8．单击Disconnect按钮关闭连接，然后退出Classic FTP程序。
无论何时想通过FTP把文件发送到Web服务器上，从概念上讲都要采取这些类似的步骤。也可以使用FTP客户端在远程Web服务器上创建子目录。要使用Classic FTP创建子目录，可以单击Remote菜单，然后单击New Folder按钮。不同的FTP客户端具有不同的界面选项，来实现相同的目标。1.8 了解在Web服务器上放置文件的位置
维护Web内容的一个重要方面是确定将如何组织该内容——不仅便于用户查找，而且便于你维护服务器上的内容。把文件放在目录中有助于管理那些文件。
在Web服务器上命名和组织目录以及开发文件维护的规则完全取决于你自己。不过，在这个漫长的过程中，维护一个组织良好的服务器可以使其内容管理更高效。1.8.1 基本的文件管理
在你浏览Web时，可能注意到当你在Web站点中导航时URL会改变。例如，如果查看一家公司的Web站点，并且单击通往公司的产品或服务的图形导航元素，URL可能会从http://www.companyname.com/变为http://www.companyname.com/products/或http://www.companyname.com/services/。
在上一节中，我使用了术语文档根目录（document root），但是没有真正解释它的有关含义。Web服务器的文档根目录实质上是完整URL中的末尾斜杠。例如，如果域是yourdomain.com，并且URL是http://www.yourdomain.com/，那么文档根目录就是通过末尾斜杠（/）表示的目录。文档根目录是你在Web服务器上创建的目录结构的起点，Web服务器将从这个位置开始寻找Web浏览器请求的文件。
如果像前面所指示的那样把sample.html文件放在文档根目录中，将能够通过Web浏览器利用以下URL访问它：http://www.yourdomain.com/sample.html。
如果把这个URL输入到Web浏览器中，将会看到呈现的sample.html文件，如图1.8所示。图1.8 通过Web浏览器访问的sample.html文件
不过，如果在文档根目录内创建一个新目录，并把sample.html文件放在该目录中，则将利用下面这个URL访问该文件：http://www.yourdomain.com/newdirectory/sample.html。
如果把sample.html文件放在一连接到你的服务器时最初就看到的目录中，也就是说，你没有改变目录并把文件放在文档根目录中，那么将不能从你的Web服务器利用任何URL访问sample.html文件。该文件仍然位于你称为Web服务器的机器上，但是由于文件不在服务器软件知道从此开始寻找文件的文档根目录中，永远都没有人能够通过Web浏览器访问它。
底线就是：在开始传输文件之前，总是要导航到Web服务器的文档根目录。
对于图形和其他多媒体文件尤其如此。Web服务器上的一个公共目录被称为images，如你可能想到的，其中将存放所有的图像资源以便检索。其他流行的目录包括用于存放样式文件的css（如果使用多个样式表文件的话），以及用于存放外部JavaScript文件的js。此外，如果你知道在Web站点上将具有一个区域，访问者可以从中下载许多不同类型的文件，就可能简单地把该目录命名为downloads。
无论它是一个包含你的艺术选辑的ZIP文件，还是一个带有销售数字的Excel电子数据表，在Internet上发布不仅仅是Web页面的文件通常都是有用的。为了使一个不是HTML文件的文件在Web上可用，只需把该文件像一个HTML文件一样上传到Web站点，并遵循本章前面给出的关于上传文件的指导即可。在把文件上传到Web服务器之后，就可以创建一个指向它的链接（在第7章中将学习这方面的知识）。换句话说，Web服务器不仅仅能提供HTML文件。
下面给出了一段示例HTML代码，在本书后面将学习关于它的更多知识。下面的代码将用于一个名为artfolio.zip的文件，它位于Web站点的downloads目录中，并且会显示链接文本“Download my art portfolio!”：Download my art portfolio!1.8.2 使用索引页面
在你想到索引时，可能会想起本书后面的那一节，它告诉你在哪里寻找各个关键词和主题。Web服务器目录中的索引文件可以服务于此目的——如果你这样设计它的话。事实上，该名称最初就起源于此。
index.html文件，或者采用它通常的叫法即索引文件（index file），是你给一个页面提供的名称，当人们导航到你的Web站点中的特定目录时，你希望他们把该页面视为默认的文件。
索引文件的另一个作用是：访问你的站点上的某个目录的用户将具有一个索引页面，但是没有指定该页面仍将登录到用于站点的那个区域（或者用于站点本身）的主页上。
例如，可以输入以下URL之一，并登录到Apple的iPhone信息页面上：
http://www.apple.com/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”消息或者其他某种意外的后果）。1.9 在不涉及Web服务器的情况下分发内容
在线发布HTML和多媒体文件显然是学习HTML和创建Web内容的主要原因。不过，在另外一些情况下，其他的发布形式简直是不可行的。例如，你可能希望在商品展示会上分发CD-ROM、DVD-ROM或USB驱动器，其中带有设计为Web内容的市场营销材料——即可以通过Web浏览器查看的超链接的文本，但是不涉及Web服务器。你还可能希望在可移动媒体上包括基于HTML的指导手册，以便在培训研讨会上给学生演示它们。这些只是说明在不涉及Internet的发布场景中如何使用HTML页面的两个示例。
这个过程也称为创建本地（local）站点，即使没有涉及Web服务器，仍然可以把这一大堆超文本内容称为站点（site）。之所以使用本地这个术语，是因为文件是在本地而不是在远程（通过Web服务器）访问的。1.9.1 在本地发布内容
让我们假定你需要创建一个希望在USB驱动器上分发的本地站点。现在，甚至最便宜的USB驱动器也能够保存如此多的数据（而且基本的超文本文件相当小），以至于可以在一个小驱动器上分发整个站点和全功能的Web浏览器。 注意：在创建和分发本地站点时，分发Web浏览器不是必需的，尽管这样做可以起到锦上添花的作用。可以合理地假定用户具有他们自己的Web浏览器，并且会打开某个目录中的index.html文件，开始浏览超链接的内容。不过，如果你希望在USB驱动器上分发Web浏览器，可以访问www.portableapps.com，并寻找Portable Firefox或Portable Chrome。
可以简单地把USB驱动器的目录结构视作就像是Web服务器的目录结构。USB驱动器的目录结构的顶级目录可以是文档根目录。或者，如果连同内容一起分发Web浏览器，就可能具有两个目录，例如，一个名为browser，另一个名为content。在这种情况下，content目录将是文档根目录。在文档根目录内，可以具有额外的子文件夹，可以在其中放置内容和其他多媒体资源。
就像远程站点一样，使本地站点维持组织有序也很重要，以便可以避免HTML文件中的断开的链接。在第7章中将学习关于把文件链接到一起的更多具体细节。1.9.2 在博客上发布内容
你可能具有一个被第三方（比如WordPress、Tumblr或Blogger）托管的博客，因此在没有专用的Web服务器或者甚至不知道任何HTML的情况下已经发布了内容。除了源代码编辑器（source editor）之外，这些服务还提供可视化编辑器（visual editor），这意味着可以输入你的文字，并添加展示性的格式化效果，如粗体、斜体或字体颜色，而不必知道用于这些动作的HTML代码。当你单击这些编辑器中的Publish（“发布”）按钮时，内容仍然会变成实际的HTML代码。
不过，利用你在全书中获得的知识，可以增强你写博客的能力，因为你将能够为博客帖子内容和博客模板使用源代码编辑器，从而可以对该内容的外观和感觉提供更多的控制。这些动作的发生不同于你学习用于创建HTML文件并通过FTP把它上传到你自己的专用Web服务器的过程，但是如果我没有指出写博客事实上是一种Web发布形式，那我就是不负责任的。1.10 关于测试Web内容的提示
无论何时把文件传输到Web服务器上或者把它们存放在可移动媒体上以便于本地浏览，都应该立即彻底地测试每个页面。下面的检查表有助于确保Web内容像你期望的那样工作。注意：此时，有一些术语你可能还不熟悉，但是在你逐步学习本书并创建更大的项目时，可以回过头来看看这个检查表。● 在传输文件之前，要在本地机器上测试它们，以确保链接都会工
作，并且内容反映了你想要的视觉设计。在把页面传输到Web服
务器或可移动设备上之后，要把它们都再次测试一遍。● 利用尽可能多的浏览器执行这些测试，Chrome、Firefox、
Internet Explorer、Opera和Safari就构成了一个良好的列表，并
且要同时在Mac和Windows两种平台上执行测试。如果可能，要
在低分辨率（800×600像素）和高分辨率（1920×1080像素）下
检查页面。● 在开始测试之前，要关闭Web浏览器中的自动图像加载功能，以
便可以查看每个页面在没有图形时的外观。检查alt标签的消息，
然后再打开图像加载功能以加载图像，并且再次仔细地检查页
面。● 使用浏览器的字体大小设置，以不同的字体大小查看每个页面，
如果用户利用他们自己的字体规范覆盖了你的字体规范，确保你
的布局不会散架。● 等待每个页面完全加载完成，然后一直向下滚动，以确保所有的
图像都出现在它们应该出现的位置。● 测定每个页面在加载时要花多长的时间。它要花几秒钟以上的时
间才能加载完吗？如果是这样，那个页面上的信息是否有足够的
价值，从而可以使用户在页面加载完之前不会去访问别的地方？
诚然，宽带连接很普遍，但是这并不意味着应该加载带有1 MB
图像的页面。
如果你的页面通过了所有这些测试，你就可以高枕无忧了，你的站点已经准备好被公众查看。1.11 小结
本章介绍了使用HTML标记文本文件来制作Web内容的概念。你应该获悉Web内容不仅仅是“页面”，Web内容还包括图像、音频和视频文件。所有这些内容都存在于Web服务器上，它是一台通常远离你自己的计算机的远程机器。在你的计算机或其他设备上，你使用Web浏览器请求、获取并且最终在屏幕上显示Web内容。
你学习了在确定Web托管提供商是否适应你的需求时要考虑的标准。在选择了Web托管提供商之后，就可以使用FTP客户开始把文件传输到Web服务器，你也学习了如何执行该操作。你还学习了一点关于Web服务器目录结构和文件管理的知识，以及给定的Web服务器目录中的index.html文件的非常重要的用途。此外，你还学习了可以在可移动媒体上分发Web内容，并且学习了如何动手构造文件和目录，以实现在不使用远程Web服务器的情况下查看内容的目标。
最后，你学习了在把你的工作成果放到Web服务器上后，在多种浏览器中对其进行测试的重要性。编写有效的、符合标准的HTML和CSS代码有助于确保你的站点对于所有的访问者看上去都是相当相似的，但是如果没有接收到来自开发团队之外的潜在用户的输入，那么仍然不应该进行设计——当你是设计团队中的一员时，获取其他人的输入甚至更重要！1.12 问与答
问：我查看了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.13 测验
本测验包含一些问题和练习，可帮助读者巩固本章所学的知识。在查看后面的“答案”一节的内容之前，要尝试尽量回答所有的问题。1.13.1 问题
1．你将需要把多少个文件存储在Web服务器上，用以产生单个Web页面，并且它上面具有一些文本和两幅图像？
2．在选择Web托管提供商时，要关注的一些特点是什么？
3．通过FTP连接到Web服务器需要哪3份信息？
4．index.html文件的用途是什么？
5．Web站点必须包括一种目录结构吗？1.13.2 答案
1．将需要3个文件：一个用于Web页面本身，它包括文本和HTML标记，还有两个文件分别用于每一幅图像。
2．要关注可靠性、客户服务、Web空间和带宽、域名服务、站点管理的额外事项和价格。
3．需要主机名、你的账户的用户名和你的账户的密码。
4．index.html文件通常是用于Web服务器内的某个目录的默认文件。它允许用户访问http://www.yourdomain.com/somedirectory/，而不必使用末尾的文件名，并且最终仍然会到达合适的位置。
5．不是。使用一种目录结构以进行文件组织完全取决于你自己，尽管强烈建议这样做，因为它可以简化内容维护。1.13.3 练习● 按次序获得你的Web托管——你将在自己的计算机上通过在本
地查看文件来学习本书中的各章内容吗，或者你将使用Web托管
提供商吗？注意：大多数Web托管提供商在你购买托管计划的当
天就能使你正常运行自己的站点。● 如果你使用的是外部托管提供商，那么就使用FTP客户端，在
Web站点的文档根目录内创建一个子目录。把sample.html文件
的内容粘贴进另一个名为index.html的文件中，把
标签之间的文本更改成新的内容，以及把
与
标签之间的文本更改成新的内容。保存文件，并把它上传到新的子目录。
使用Web浏览器导航到Web服务器上的新目录，并且会看到显示
的是index.html文件中的内容。然后，使用FTP客户端，从远程
子目录中删除index.html文件。利用Web浏览器返回到那个
URL，重新加载页面，并且查看在没有index.html文件的情况下
服务器如何做出响应。● 使用在上一个练习中创建的相同文件集，把这些文件放在一个可
移动的媒体设备上，例如，CD-ROM或USB设备。使用浏览器导
航你的示例Web站点的这个本地版本，并且考虑你将不得不利用
这个可移动媒体分发的指导，以便其他人可以使用它。▶▶第2章构造HTML文档
在本章中你将学到：● 怎样用HTML创建一个简单的Web页面；● 怎样包括每个Web页面必须具有的所有HTML标签；● 怎样利用段落和换行符组织页面；● 怎样利用标题组织内容；● 怎样使用HTML5的语义元素；● 怎样使用语义标签指示标头和脚注内容；● 怎样使用语义标签指示导航和辅助内容；● 怎样使用语义标签更好地构造主体内容。
在第1章中，你基本了解了创建Web内容并且在线（或者在本地，如果还没有Web托管提供商的话）查看它的幕后过程。在本章中，我们将言归正传，解释必须出现在HTML文件中的各种元素，使之在Web浏览器中适当地显示。
一般来讲，本章将快速总结HTML的基础知识，并给出一些实用的提示，帮助你最大限度地享受自己作为Web页面开发人员的时间。在你学习HTML5元素时，它们可让你增强在标记过的文本中所提供的信息的语义（含义），你将开始更深入一点地研究它背后的理论。你将密切观察6个元素，它们构成了文档的稳固语义结构的基础，这6个元素是：
在本书余下的全部内容中，你将看到在代码示例中如何适当地使用这些标签，因此在继续学习后面的内容之前，本章将确保你很好地领会了它们的含义。2.1 准备工作
下面回顾了在你准备学习本书余下的内容之前需要做什么。
1．获得一台计算机。我使用一台Windows笔记本电脑测试示例Web内容，并且抓取了本书中的图片，但是你可以使用任何Windows、Macintosh或者Linux/UNIX机器创建和查看你的Web内容。
2．获得通往Internet的连接。无论你是使用拨号、无线还是宽带连接，都不影响你创建和查看Web内容，但是连接的速度越快，总的体验将越好。提供Internet连接的Internet服务提供商（ISP）、学校或企业将给你提供详细的信息，可以帮助你正确地设置它。此外，许多公共空间（如咖啡店、书店和图书馆）还提供了免费的无线Internet服务，如果你的笔记本电脑具有Wi-Fi网络支持，那么就可以使用它们。
3．获得Web浏览器软件。这是计算机获取和显示Web内容所需的软件。如你在第1章中所学到的，最流行的浏览器软件（按字母顺序）是：Apple Safari、Google Chrome、Microsoft Internet Explorer、Mozilla Firefox和Opera。安装其中多个浏览器是一个好主意，这样就可以试验并且确保内容跨所有这些浏览器看起来是一致的，不能假设其他人将使用何种浏览器。 警告：尽管所有的Web浏览器都以相同的常规方式处理信息，但是它们之间的一些特定的区别意味着事物在不同的浏览器中看起来并不总是相同的。一定要在多个浏览器中检查Web页面，以确保它们看起来基本上是一致的。
4．浏览！使用Web浏览器在Internet上转转，寻找与你要创建的那些内容或外观相似的Web站点。注意一些页面是怎样使你受挫的，是什么吸引你并使你继续阅读其他页面，以及是什么使你回过头来反复查看某些页面的。如果特定的主题使你感兴趣，可以考虑使用诸如Google（www.google.com）或Bing（www.bing.com）之类的流行的搜索引擎搜索它。 注意：如第1章中所讨论的，如果计划把Web内容放在Internet上（与在CD-ROM或本地内联网上发布它相对），将需要把它传输到一天24小时都连接到Internet的计算机上。为你提供Internet访问的同一个公司或学校也可能提供Web空间，如果不是这样，将可能需要给托管提供商付费来获得服务。2.2 从一个简单的Web页面开始
在第1章中，你学习到Web页面只是一个被HTML代码标记（或包围）的文本文件，这些代码告诉浏览器如何显示文本。要创建这些文本文件，可以使用诸如“记事本”（在Windows上）或TextEdit（在Mac上）之类的文本编辑器，不要使用“写字板”、Microsoft Word或其他全功能的字处理软件，因为它们创建的文件类型与我们用于创建Web内容的纯文本文件不同。
在开始工作前，应该从你想要放在Web页面上的一些文本开始。
1．查找（或者编写）几个关于你自己、你的家庭、你的公司、你的垒球队或者你感兴趣的其他某个主题的文本段落。
2．把这段文本另存为标准的ASCII纯文本。“记事本”（在Windows上）和大多数简单的文本编辑器总是把文件另存为纯文本，但是如果使用另一个程序，则可能需要选择这种文件类型作为一个选项（在选择“文件”>“另存为”命令之后）。
在学习本章的过程中，将给文本文件添加HTML标记（称为标签，tag），从而把它转变成Web内容。
在保存包含HTML标签的文件时，总是要给它们提供以.html结尾的名称。这很重要：如果在保存文件时忘记了在文件名末尾输入.html，大多数文本编辑器都会给它提供某个其他的扩展名（比如.txt）。如果发生这种情况，当尝试利用Web浏览器查看文件时，也许不能找到它，即使找到文件，也肯定不能正确地显示。换句话说，Web浏览器期望Web页面文件具有.html文件扩展名并且具有纯文本格式。 警告：我们反复申明这一点，因为它对于结果和学习过程本身非常重要：不要利用Microsoft Word或者任何其他HTML兼容的字处理器创建第一个HTML文件，其中大多数程序都试图以怪异的方式为你重写HTML代码，这可能会把你完全搞糊涂。在使用Microsoft Word和“另存为”HTML时也是如此—你很可能获得充斥大量HTML代码的冗长且不兼容的文件，它将不会经过验证，并且会在编辑时让你头痛。此外，我还建议不要使用所见即所得（what-you-see-is-what-you-get，WYSIWYG）的图形编辑器，比如Adobe Dreamweaver。你很可能发现，在开始学习HTML时，从一个简单的文本编辑器入手将更容易，并且更有教育意义。
在访问Web站点时，还可能遇到文件扩展名为.htm的页面，它是另一个可接受的文件扩展名。你还可能发现在Web上使用的其他文件扩展名，比如.jsp（Java Server Pages）、.asp（Microsoft Active Server Pages）或.php（PHP：Hypertext Preprocessor），但是这些文件类型使用服务器端技术，它们超出了HTML和整本书中的课程的范围。不过，除了程序设计语言之外，这些文件中也包含HTML。尽管这些文件中的程序设计代码是在服务器端编译的，并且你在客户端看到的一切都是HTML输出，但是如果查看源文件，很可能会看到程序设计代码和标记代码错综复杂地交织在一起。
程序清单2.1显示了一段可以输入并保存的文本示例，用于创建一个简单的HTML页面。如果利用Chrome打开这个文件，将会看到如图2.1所示的页面。你创建的每个Web页面都必须包括一个 声明，以及、
、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.