作者：[美]Julie Meloni 著
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML与CSS入门经典(第9版)试读：
前言
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，因为HTML不是今天创建Web内容所需知道的唯一知识。本书的目标是给你提供一个坚实的基础，使你仅通过24章内容的学习，就能掌握创建符合标准的现代Web站点所需的技能。本书将介绍以下关键的技能和技术。● HTML5是用于创建Web页面的最新建议，本书中的每个示例都
使用HTML5验证过。● 经测试，本书中的所有示例都与每种主流的Web浏览器兼容，包
括Apple Safari、Google Chrome、Microsoft Internet Explorer、
Mozilla Firefox和Opera。你将从头开始学习与过去的标准保持兼
容，同时为将来也做好准备。● 本书广泛介绍了层叠样式表（Cascading Style Sheet，CSS）的
最新建议，它允许仔细控制布局、字体、颜色以及Web页面每个
方面的格式化效果，包括文本和图像。在创建引人注目的Web页
面时，CSS远远超过了仅凭传统的HTML本身可以做的事情。● 上述的技术知识不足以解决所有问题，因此本书还包括了在建立
Web站点来实现目标时所需了解的建议。本书足够深入地介绍了
所有的关键细节，包括设计有效的页面布局、利用FTP软件把页
面发布到Internet上、组织和管理多个页面，以及使页面在所有
主流的Internet搜索站点中出现在查询列表中的较高位置，它们
使你能够轻松跨越通常会使初学者感到挫败的障碍。
本书之前的8个版本重点讲解了许多基本知识，这个更新版本也不例外。本书中的所有示例都进行了更新，并且对内容中的重要部分进行了修订，以匹配新的示例和新的技术，完全兼容HTML5和CSS3。可视化示例
本书中的每个示例都分为两个部分进行演示。● 首先显示创建HTML页面的文本，并且会着重显示HTML和CSS
代码。● 然后给出用户利用世界上最流行的Web浏览器查看时所显示的结
果Web页面。
你通常根本不必阅读任何相关的文本（尽管强烈建议你阅读其余的文本），就能够修改示例，使之适合于你自己的页面。
本书中的所有示例都符合标准，并且可以与Apple Safari、Google Chrome、Microsoft Internet Explorer、Mozilla Firefox和Opera协同工作。尽管所有的截图都取自Chrome，仍然可以保证所有的代码在所有其他的浏览器中都可以良好运行。问题、测验和练习
每章末尾都带有与该章内容相关的简短问题以及相应的答案，用于解决读者可能会问到的一些问题。一份简明而完整的测验可以让你测试自己的水平，确保你理解了该章中介绍的所有内容。最后，还提供了一两个可选的练习，使你能够在继续学习后面的内容之前有机会实践新的技能。关于作者
Julie Meloni是一位居住在华盛顿特区的软件开发经理和技术顾问。她编写过多本与Web编程语言和数据库相关的图书，并发表了若干篇文章，其中包括畅销书Sams Teach Yourself PHP, MySQL and Apache All in One。第1章 理解Web的工作方式
在本章中你将学到：● 万维网（World Wide Web，WWW）简史；● 术语Web页面（web page）的含义是什么，为什么这个术语并
不总会反映所涉及的全部内容；● 内容怎样从你的个人计算机到达别人的Web浏览器上；● 怎样选择Web托管提供商；● 不同的Web浏览器和设备类型可能怎样影响内容；● 怎样使用FTP把文件传输到Web服务器上；● 应该把文件存放在Web服务器上的什么位置；● 在不涉及Web服务器的情况下怎样分发Web内容；● 怎样使用其他发布方法，比如博客；● 关于测试Web内容的外观和功能的提示。
在学习超文本标记语言（Hypertext Markup Language，HTML）和层叠样式表（Cascading Style Sheet，CSS）的复杂知识之前，对技术有深入的理解很重要，它们有助于把这些纯文本文件转换成你在计算机或手持设备上浏览WWW时看到的丰富的多媒体显示。
例如，如果不使用Web浏览器查看，那么包含标记和客户端代码的HTML和CSS文件将是无用的，并且除非建立Web服务器，否则除你之外的其他人将无法查看你的内容。Web服务器使你的内容可供其他人使用，他们反过来又使用他们的Web浏览器导航到一个地址并等待服务器给他们发送信息。你将密切地参与这个发布过程，因为你必须创建文件，然后把它们放到服务器上，使它们在第一时间可用，并且必须确保你的内容像预期的那样出现在最终用户面前。1.1 HTML和WWW简史
在月球上还没有任何人类的足迹之前，一些有远见的人决定看看他们能否连接几个主要的计算机网络。我将和你分享他们的名称和故事（可以说非常丰富），但是最终的结果是“所有网络之母”，我们称之为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。1.2 创建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浏览器遵守标准即可（在一段较长的时间内有望如此）。1.3 理解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代码看起来如下所示。
这个HTML标签提供了一些属性，告诉浏览器显示这个标志所必需的信息：文件源地址（src）、宽度（width）、高度（height）、边框类型（border）和替换文本（alt）。在后面的课程中将会学习到关于属性的更多知识。
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托管提供商，它们的基本托管包以相对较低的费用提供丰富的服务器空间和带宽（以及域名和额外的好处）。如果你对它们中的任何一家都不感兴趣，至少可以使用它们基本的托管包描述，作为你货比三家的指导原则。● A Small Orange（www.asmallorange.com）：它的Tiny和Small托
管包是新的Web内容发布者的完美起点。● DailyRazor（www.dailyrazor.com）：甚至它的Rookie个人托管包
也是全功能的和可靠的。● LunarPages（www.lunarpages.com）：它的Basic托管包非常适
合于许多个人和小企业的Web站点。注意：作者曾使用过以上三家提供商（后来还使用了其他一些提供商），建议使用其中任何一家提供商都没有问题；她主要使用DailyRazor作为Web托管提供商，尤其是对于高级开发环境则更是如此。
良好的托管提供商的一个特点是，它会提供一个“控制面板”，让你管理自己账户的各个方面。图1.3显示了作者自己在Daily Razor上的托管账户的控制面板。许多Web托管提供商都提供了这种特殊的控制面板软件，或者某种在设计上类似的控制面板——清楚标记的图标引导你可以执行的任务，用以配置和管理你的账户。图1.3 一个控制面板示例
你可能永远也不需要使用控制面板，但是使之可用将能够简化以下操作：安装数据库及其他软件、查看Web统计信息和添加电子邮件地址（以及许多其他的特性）。如果你可以遵循指导，就可以管理你自己的Web服务器——不需要特殊的培训。1.5 利用多种Web浏览器执行测试
刚才讨论了Web内容递送的过程以及如何获得Web服务器，现在回过头来并讨论利用多种Web浏览器测试Web站点似乎有点奇怪。不过，在继续学习关于利用HTML和CSS创建Web站点的所有知识之前，要记住下面这句非常重要的话：你的Web站点的每位访问者将可能使用与你自己不同的硬件和软件配置。他们的设备类型（台式机、笔记本电脑、上网本、智能手机）、屏幕分辨率、浏览器类型、浏览器窗口大小、连接的速度都可能与你不同。记住：当访问者查看你的站点时，你不能控制他们使用的任何方面。因此，在你设置Web托管环境并准备好工作时，要考虑下载多种不同的Web浏览器，以便可以使用本地测试工具套件。下面让我解释为什么这一点很重要。
尽管所有的Web浏览器都会以相同的常规方式处理信息，但是它们当中的一些特定的区别将导致事情在不同的浏览器中看起来并不总是相同的。甚至相同Web浏览器的相同版本的用户也可能通过选择不同的显示选项和/或更改他们的查看窗口的大小，来改变页面的显示方式。所有主流的Web浏览器都允许用户利用他们自己的选择覆盖Web页面作者指定的背景和字体。当页面第一次出现在人们的显示屏幕上时，屏幕分辨率、窗口大小和可选的工具栏也可能改变他们所看到的页面大小。你只能确保自己编写的是符合标准的HTML和CSS。
在任何情况下，都不要花时间创建只会在你自己的计算机上看起来完美无缺的最终设计——除非你在朋友的计算机上、大街上的咖啡店里的计算机上或者你的iPhone上查看它时能够坦然地面对失望。注意：在第15章中，你将学习一点响应性Web设计的概念，其中将依赖于用户的行为和查看环境（屏幕大小、设备等）自动转换和改变站点的设计。
应该总是尽可能多地在下面这些Web浏览器上测试你的Web站点。● 用于Mac和Windows的Apple Safari（http://www.apple.com/
safari/）。● 用于Windows的Google Chrome（http://www.google.com/
chrome）。● 用于Mac、Windows和Linux的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 WebServer.
为了利用这些内容，可以打开所选的文本编辑器，比如“记事本”（在Windows上）或TextEdit（在Mac上）。不要使用“写字板”、Microsoft Word或者其他全功能的字处理软件，因为这些程序创建的文件类型不同于我们用于创建Web内容的纯文本文件。
输入在程序清单1.1中看到的内容，然后使用sample.html作为文件名保存文件。.html扩展名告诉Web服务器你的文件的确完完全全是HTML。当把文件内容发送给请求它的Web浏览器时，浏览器也会知道它是HTML，并将相应地呈现它。
既然你已经有了一个要使用的示例HTML文件——并且希望把它放到某个地方，比如Web托管账户，现在就让我们发布你的Web内容。1.7 使用FTP传输文件
就像你迄今为止所学到的，必须把Web内容放到Web服务器上，才能使之为其他人访问。这个过程通常是使用文件传输协议（File Transfer Protocol，FTP）发生的。要使用FTP，需要一个FTP客户端，这个程序用于把你的计算机上的文件传输到Web服务器上。
FTP客户端需要3份信息来连接到Web服务器。在你建立了账户之后，你的托管提供商将把这些信息发送给你。● 你将连接到的主机名或地址。● 你的账户的用户名。● 你的账户的密码。
当你具有了这些信息后，就准备好使用FTP客户端，把内容传输到Web服务器。1.7.1 选择FTP客户端
无论使用的FTP客户端是什么，它们一般都会使用相同的界面。图1.4显示了一个FireFTP示例，它是Firefox Web浏览器使用的FTP客户端。本地机器（你的计算机）的目录清单出现在屏幕左边，远程机器（Web服务器）的目录清单则出现在右边。通常会看到右箭头和左箭头按钮，右箭头把所选的文件从计算机发送到Web服务器上；左箭头则把文件从Web服务器发送到计算机上。许多FTP客户端还允许简单地选择文件，然后把那些文件拖放到目标机器上。图1.4 FireFTP界面
许多FTP客户端可以免费使用，但是也可以通过File Manager（文件管理）工具传输文件，它很可能是Web服务器的控制面板的一部分。不过，这种文件传输方法通常会在过程中引入更多的步骤，并且几乎不像在你自己的计算机上安装FTP客户的过程那样流线化（或简单）。
下面列出了一些流行的免费FTP客户端。● 用于Mac和Windows的Classic FTP（http://www.nchsoftware.com/
classic/）。● 用于Mac的Cyberduck（http://cyberduck.ch/）。● 用于Mac的Fetch（http://fetchsoftworks.com/）。● 用于所有平台的FileZilla（http://filezilla-project.org/）。● 用于所有平台的FireFTP（http://fireftp.mozdev.org/）Firefox扩
展。
当选择一个FTP客户端并在计算机上安装它时，就准备好从Web服务器上传和下载文件。在下一节中，将使用程序清单1.1中的示例文件解释这个过程的工作方式。1.7.2 使用FTP客户端
下面的步骤说明了如何使用Classic FTP连接到Web服务器并传输文件。不过，所有的FTP客户端都使用类似的（如果不是完全相同的话）界面。如果理解了下面的步骤，就应该能够使用任何FTP客户端。
记住，首先需要主机名、账户的用户名和账户的密码。
1．启动Classic FTP程序，并单击Connect按钮，将提示你填写与你想连接到的站点相关的信息，如图1.5所示。图1.5 在Classic FTP中连接到新的站点
2．填写图1.5中显示的每个项目，如下所示。● FTP服务器是需要发送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服务器的内容。图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客户端具有不同的界面选项，来实现相同的目标。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服务器之后，就可以创建一个指向它的链接（在第8章将学习这方面的知识）。换句话说，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浏览器（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章中将学习关于把文件链接到一起的具体细节的更多知识。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标签的消息，
然后再打开图像加载功能以加载图像，并且再次仔细地检查页
面。● 使用浏览器的字体大小设置，以不同的字体大小查看每个页面，
如果用户利用他们自己的字体规范覆盖了你的字体规范，确保你
的布局不会散架。● 等待每个页面完全加载完成，然后一直向下滚动，以确保所有的
图像都出现在它们应该出现的位置。● 测定每个页面在加载时要花多长的时间。它要花几秒钟以上的时
间才能加载完吗？如果是这样，那个页面上的信息是否有足够的
价值，从而可以使用户在页面加载完之前不会去往别的地方？诚
然，宽带连接很普遍，但是这并不意味着应该加载带有1MB图像
的页面。
如果你的页面通过了所有这些测试，你就可以高枕无忧了，你的站点已经准备好被公众查看。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的语义元素；● 怎样验证Web内容。
在第1章中，你基本了解了创建Web内容并且在线（或者在本地，如果还没有Web托管提供商的话）查看它的背后的过程。在本章中，我们将言归正传，解释必须出现在HTML文件中的各种元素，使之在Web浏览器中适当地显示。
一般来讲，本章将快速总结HTML的基础知识，并给出一些实用的提示，帮助你最大限度地利用你的时间，成为Web页面作者和发布者。不过，本章并不全是介绍理论知识，你将看到真实的Web页面及其背后的HTML标记。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.bing.com）之类的流行的搜索引擎搜索它。注意：如第1章中所讨论的，如果计划把Web内容放在Internet上（与在CD-ROM或本地内联网上发布它相对），将需要把它传输
试读结束[说明：试读内容隐藏了图片]