作者：（美）劳拉 莱梅（Laura Lemay）、雷夫 科尔本（Rafe Colburn）、珍妮弗 凯瑞恩（Jennifer Kyrnin）
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
21天学通HTML+CSS+JavaScript Web开发(第7版)试读：
前言
在过去的十年中，Web已成为人类社会不可分割的一部分：企业大多都有网站，而电视广告很少有不显示URL的。最能说明问题的一个简单事实是大多数人都知道URL是什么；几年前不知道互联网为何物的人现在通过FaceBook又与高中同学联系上了。
Web最大的优点是，即便不是什么大公司，也能在Web上发布信息。您只要有一台能够访问互联网的网站并愿意学习，就能创建自己的网站。您既然选择了阅读本书，显然是对Web发布感兴趣。您之所以学习Web发布，可能是出于工作需要，也可能是旨在寻找新的自我表达途径，还可能是想将小宝宝的照片发布到Web上，让居住在全国各地的亲戚能够了解孩子的最新情况。问题是您如何开始学习呢？
网上有关如何像久经沙场的专业人员一样发布网站的信息浩如烟海，有教程，有参考手册，有数不胜数的示例，还有简化Web发布工作的免费工具。为何要选择阅读本书呢？这样做的优点在于，它集合了创建网站所需的全部知识，并以循序渐进的方式呈现出来。本书涵盖了精通HTML、将网站发布到Web服务器、创建用于Web的图形以及确保网站平稳运行所需的全部知识。
然而，这些还不是本书的全部内容。其他介绍如何创建网页的图书只涉及基本的技术细节，如将文本设置为粗体，而在本书中，您还将学习使用特殊效果的原因以及该在什么情况下使用它们。除页面本身外，本书提供了网站整体结构设计方面的提示、建议和示例。本书并非仅仅介绍如何创建网站，而将介绍如何创建卓越的网站以及如何吸引访客来访问它。
本书的示例都符合HTML5和CSS3标准，并尽可能使用所有最新浏览器都支持的标签。每当使用已摒弃或HTML5不支持的标签时，都会明确地指出这一点。注意为方便获得本书最新的修订、下载或勘误，请访问www.informit.com/register并注册。针对的读者
本书适合您阅读吗？这取决于：● 如果您访问过Web，并想将自己的内容也发布到Web上，那么本
书就是为您而写的；● 如果您所在的公司要创建网站，可您不知道从何处着手，那么本
书正是为您而写的；● 如果您是信息开发人员（如技术作者），并想知道Web可为您在
线提供信息提供什么样的帮助，那么本书就是为您而写的；● 如果您只是对Web的工作原理好奇，那么本书的有些部分就是为
您而写的，虽然您在网上也能找到所需的信息；● 如果您以前创建过包含文本、图像和链接的网页，还偶尔捣鼓过
表格和简单的表单，那么可跳过本书的前半部分，但在第2部分
您将找到大量有用的信息。涵盖的内容
本书各章以合理的顺序排列，让您从完成最简单的任务着手，最终掌握复杂的技巧。● 第1部分“起步”：在这部分，您将大致了解万维网及其用途，
并使用HTML和CSS编写一个基本的网页。● 第2部分“创建网页”：在这部分，您将学些如何使用HTML编写
简单的文档以及如何使用CSS设置样式。您将学习如何在页面中
创建文本段落和列表，还将学习如何使用超文本链接将页面链接
起来。● 第3部分“HTML和CSS的高级用法”：在这部分，您将学习网页
创建精髓。您将学习如何使用CSS设置文本格式和页面样式；学
习如何在页面中添加图像、表格和表单；还将学习如何使用CSS
设置页面布局，使其能够能够根据查看设备自动调整。● 第4部分“使用JavaScript和jQuery”：在这部分，您将学习如何
使用JavaScript来拓展网页的功能。这部分首先概述JavaScript和
jQuery，然后提供一些您可在页面中使用的JavaScript示例，最
后介绍内嵌框架和链接窗口。● 第5部分“一个都不能少”：这部分提供有关如何创建结构良好
的网站的建议，您将学习如何针对移动设备进行设计，还将学习
如何确保网站是无障碍的，让残障人士也能够轻松地使用他们。● 第6部分“发布到Web”：在这部分，您将学习如何将网站发布到
Web上，包括如何推广；您将学习如何使用Web服务器提供的功
能来减轻工作负担；还将学习如何进行搜索引擎优化（SEO），
让大多数流行的搜索引擎都能够轻松地搜索您的网站。对读者的要求
市面上有很多介绍如何使用Web的图书，但本书不是这样的。要阅读本书，读者必须能够连接到互联网，安装了Chrome、Safari、Firefox、Opera、Internet Explorer 10或Microsoft Edge等现代浏览器，并熟悉Web和互联网的基本工作原理，还必须对电子邮件和FTP等互联网的其他方面略知一二，因为本书经常会提及它们。
换而言之，您必须使用过Web来提供内容。如果您符合这种要求，就接着往下阅读吧！
本书的很多屏幕截图都是在Macintosh计算机上截取的，但如果您使用的是Windows或Linux计算机，也可完成所有这些工作。您只要熟悉您使用的操作系统的工作原理，并能找到常用的程序就可以了。第1部分起步第1章 何为Web发布
千里之行，始于足下；这是学习编写、设计和发布网页之旅的第一站，但实际踏上旅程前，您应学习一些简单的基础知识，包括：● 万维网（World Wide Web）的工作原理；● Web浏览器是做什么用的，用户通常使用哪些浏览器；● 何为Web服务器，您为何需要它；● 一些有关统一资源定位符（URL）的知识。
当前Web无处不在，因此本章的内容可能有点老生常谈。如果您这么认为，可大致地扫一眼，再进入第2章，迈出创建网页的第一步。1.1 像Web发布者一样思考
从用户的角度看，您很可能很熟悉Web。您使用喜欢的Web浏览器访问网站，通过它们查找信息、购物或了解朋友的最新动态。您还可能使用Web浏览器来查看邮件、了解日程安排以及完成工作。
要成为Web发布者，就必须明白用户在Web浏览器中输入地址或单击链接以访问网站时发生的情况。从技术角度阐述Web前，先来给它下个定义。
Web是：● 一个超文本信息系统；● 跨平台的；● 分布式的；● 动态的；● 交互式的。
下面从您如何将Web用作发布媒介的角度详细说说上述说法的含义。1.1.1 Web是一个超文本信息系统
超文本的含义是，不像看书那样以线性方式阅读，而是可以轻松地从一个地方跳到另一个地方：您可获取更详细的信息、再回过头去阅读、跳到其他主题或根据兴趣阅读。
超文本让您能够根据兴趣以非线性方式阅读文字和可视化信息。
看到术语超文本时，将其视为链接即可；事实上，现在还有人将链接称为超链接。访问网页时，您很可能发现其中充斥链接。有些链接指向当前网页的其他地方，有些指向当前网站的其他网页，还有些指向其他网站的网页。超文本这个概念在Web面世前就存在，它早已被用于HyperCard等应用程序和各种帮助系统中。然而，万维网重新定义了超文本系统的规模。即便只考虑一个大型网站这样的超文本系统，其规模也是前所未见的；如果再考虑到这样一点，即从位于美国的服务器链接到位于澳大利亚的服务器上的文档时，并不比链接到当前目录中的文档更难，就可以想象出Web的规模有多大了。 几乎所有的大中型企业和组织都使用Web技术来管理项目、订购原材料以及在无纸环境中发布信息。通过将文档放在安全的私有Web服务器（内联网）上，这些企业和组织既利用了万维网提供的技术，又确保了其信息不向外传播。1.1.2 Web是跨平台的
只要能够访问Internet，就能够访问万维网，不管您使用的是智能手机、平板电脑、全新的笔记本电脑还是在跳蚤市场购买的台式机。不管您喜欢Windows还是Macintosh的菜单和按钮，亦或认为Macintosh和Windows都弱爆了，都没有关系，因为万维网不在乎访问设备是什么，也不在乎它是哪家公司生产的——它完全是跨平台的。
跨平台意味着不管使用的是什么计算机硬件，也不管它运行的是哪种操作系统，装备的是什么显示器，都可以一样地访问Web信息。跨平台是一种理想在纯粹主义者看来，Web的核心就是跨平台。然而，理想很丰满，现实很骨感。多年来，随着众多特殊功能、技术和媒体类型的推出，Web的跨平台特征遭到了损害。Web发布者可选择使用非标准特性，如Flash，但这样做将缩小其网站的受众范围，如果考虑到越来越多的人转而使用智能手机和移动设备来访问Web，这一点尤其明显。Web发布者还必须做出如下选择：专门创建用于移动设备的应用程序，还是打造跨平台兼容性更强的Web应用程序。该不该为特定平台提供更强大的功能而降低跨平台灵活性呢？这完全由各个发布者决定。1.1.3 Web是分布式的
Web内容可能消耗大量的存储空间，其中包含图像、音频和视频时尤其如此。为存储发布到Web上的所有信息，需要海量的磁盘空间，而要对所有这些信息进行管理，几乎是一项不可能完成的任务（有人尝试过）。
Web为何能成功地提供海量信息呢？因为这些信息分布在全球的数百万个网站中，而每个网站都分别存储其发布的信息。每个网站驻留在一台或多台被称为Web服务器的计算机上。Web服务器也是计算机，只是负责侦听并响应来自Web浏览器的请求。作为信息消费者时，您请求服务器提供资源以便查看它。您只是将浏览器指向网站，别的什么都没有做。
网站是Web上一个发布信息的位置。您浏览网页时，浏览器连接到网站以获取该网页。
每个网站、网站的每个网页乃至每项信息都有独一无二的地址，这种地址被称为统一资源定位符（URL）。有人让您访问网站http://www.nytimes.com/时，他只是给您提供了一个URL。每当您使用浏览器访问网站时，都使用URL。本章后面的“统一资源定位符”一节将更详细地介绍URL。1.1.4 Web是动态的
对于存储在Web上的信息，要获取其永久性拷贝，您必须将其存储到本地，因为这些内容可能随时发生变化，甚至在您查看网页时就发生了变化。
浏览信息时，您无须安装帮助系统的新版本，不必再买本新书，也不用致电技术支持以获取最新的使用指南，您只需启动浏览器即可。
发布到Web时，您可确保信息始终是最新的，而无须花大量时间重新发布更新后的文档。另外，没有材料成本：您无须让人根据装订数量或输出质量进行报价；也不会因为是彩印而需要额外花钱。不会有顾客因为购买了4年前的过期版本而打电话投诉。
来看完全在线发布的图书，如Cory Doctorow的著作Little Brother（其发布网址为http://craphound.com/littlebrother/）。作者可更正该书的任何错误，并将修订后的文本上传到网站，这样读者马上就能看到。有翻译版上市后，作者可发布广告，如图1.1所示。图1.1 发布图书Little Brother的网站 本书的屏幕截图都是在运行在OS X上的Google Chrome或Safari上截取的，这只是因为我编写本书时使用的是Apple Macintosh。如果您使用的是其他操作系统，不要觉得自己受了冷落。前面说过，Web的优点在于，不管您使用的是哪种平台，看到的信息都相同。
对于有些网站来说，能够随时动态更新正是它们存在的原因所在。图1.2显示了BBC新闻频道的主页，这个网站24小时更新，实时地报告最新发生的新闻。这个网站能够发布最新发生的新闻，其及时性是报纸无法比拟的。BBC新闻频道的网址为http://www.bbc. co.uk/news/world/。图1.2 BBC新闻频道
当前，用户甚至都无须重新加载网页就能看到最新的信息。通过使用第17章将讨论的JavaScript，您可实时地更新网页的内容。在图1.3所示的NBA比赛网页中，比分和统计信息与比赛同步更新。图1.3 CBS体育网站实时更新比赛情况1.1.5 Web是交互式的
交互性指的是能够与Web服务器“对讲”。电视等传统媒体丝毫没有交互性，受众能做的只是坐下来观看——播什么就看什么。除了更换频道，受众没有多大的选择权。Web天生就是交互式的，这种交互性是通过单击链接跳到其他网页实现的。然而，除了这种简单的交互性外，Web还让您能够同发布者和其他用户交流。
事实上，当前最流行的网站都旨在让用户能够与其他用户（而不是发布者）交互，这就是所谓的社交媒体。当前，网站不再花钱雇佣作者和摄影师，而雇佣程序员来营造空间，让大家能够分享自己创建的内容。如果您看到有人对着电视大声朗读Twitter或Facebook上的帖子，不要大惊小怪，这正是社交媒体的发展现状。
作为Web发布者，您需要决定您的网站该提供什么样的交互。您可发布不给用户提供任何交互空间的网页；可让用户提交非公开的反馈；可让用户发布公开的评论、与您唱反调或彼此斗嘴；可提供论坛，让用户彼此直接交互；可提供游戏或其他交互性功能；还可集成其他网站的交互功能，从而将您的网站与这些网站关联起来。例如，图1.4显示了一个被集成到第三方网站的Facebook小部件。图1.4 一个Facebook小部件1.2 Web浏览器
前面说过，Web浏览器是一款应用程序，您使用它来浏览网页以及在万维网中导航。Web浏览器有很多，适用于您想象得到的任何平台的都有。例如，Windows自带Microsoft Internet Explorer，OS X自带Safari，而Mozilla Firefox、Google Chrome和Opera都可免费下载。另外，通过移动设备和平板电脑使用浏览器的人越来越多。iPhone和iPad自带了Mobile Safari，Android移动平台也自带浏览器。还有其他移动平台（如BlackBerry和Windows Phone）以及用于Android和iPhone的第三方浏览器。就在几年前，Internet Explorer还在Windows浏览器中占据统治地位，OS X的市场份额不到5%，而移动浏览器的功能很有限，根本就不能显示常规网页。那个时候，很多开发人员都选择支持Internet Explorer，而根本不考虑其他浏览器。现在，这样的做法再也不可行了。 仅当您确定只有使用特定浏览器（如Internet Explorer）的用户访问您的网站时，选择针对该浏览器进行开发才是合适的。在实现内联网的组织中，这种开发方式很常见。在这种情况下，完全可以认为组织的所有用户都将使用提供给他们的浏览器，因此设置内联网上的网页时，可以使用该浏览器特有的功能。1.2.1 Web浏览器的作用
Web浏览器的核心目标是连接到Web服务器并请求文档，再妥善地设置这些文档的格式并显示它们。Web浏览器还可显示本地计算机中的文件、下载并非用于显示的文件，甚至让用户能够发送和接收电子邮件。然而，浏览器最擅长的还是获取并显示Web文档。所有网页都是使用超文本标记语言（HTML）编写的，这种语言指定网页包含的文本、描述网页的结构、指定到其他文档和图像等多媒体的链接。对于从Web服务器获取的信息，浏览器设置其格式以便显示。即便是同一个文件，不同浏览器设置其格式和显示它的方式也可能不同，这取决于系统的功能以及浏览器的配置。1.2.2 概述一些流行的Web浏览器
您很可能只使用一两款浏览器，例如，在计算机上使用一款浏览器，在移动设备上使用另一款浏览器。然而，访问您的网站的浏览器可能五花八门，要成功地发布到Web，一定要考虑这一点。本节描述一些最流行的Web浏览器，但市面上的浏览器绝非只有这些，如果您使用的浏览器未在这里提及，不要认为您必须转而使用这里提及的浏览器。使用什么浏览器都可以，只要适合您就好。Google Chrome
Google Chrome是当前最流行的Web浏览器，凭借出色的性能和稳定性以及更新频繁，还有适用于台式机和移动设备，其市场份额的增长速度令人难以置信。它和Apple Safari使用的是同一个HTML引擎——开源引擎WebKit。这款浏览器可从http://www.google.com/ chrome/免费下载。在本书的一些屏幕截图中，使用的就是Google Chrome，从第2章开始，我将讨论它的独特之处。Microsoft Internet Explorer
Microsoft Windows自带了浏览器Microsoft Internet Explorer，这是第二流行的Web浏览器。由于新版本发布频率没有Google Chrome和Mozilla Firefox那么高，其市场份额逐渐被其他浏览器抢占。然而，很多人还在使用Internet Explorer，它与Chrome、Firefox和Safari等其他浏览器有很大的不同。根据网站CanIUse.com的说法，Internet Explorer 10支持49%的HTML5功能，而Internet Explorer 11支持58%的HTML5功能。 如果您很看重Web设计，应在系统中安装所有流行的浏览器，并使用它们来查看发布的网页。这样，您就可确定一切是否运行正常。即便某款浏览器您平时不太用，但访问您网站的用户会经常使用。如果您要检查跨平台兼容性问题，请从Microsoft Internet Explorer和Mozilla Firefox开始，再将Google Chrome也囊括进来。
图1.5显示了在Windows 10中运行的Microsoft Edge——Internet Explorer的继承者。
对于Internet Explorer，需要指出的一个要点是，其不同的版本差别很大。Internet Explorer 10是2012年发布的，但很多用户都还在使用Internet Explorer 9、Internet Explorer 8甚至Internet Explorer 7。不同版本的Internet Explorer差别很大，因此为确保网站能够正常运行，必须使用每个版本进行测试。Web发布者不再支持Internet Explorer 6，大多数发布者不再支持Internet Explorer 7，因此Microsoft建议所有用户都升级到更新的版本。2015年，Microsoft发布了新款浏览器Microsoft Edge，这是Windows 10默认使用的浏览器。图1.5 Microsoft Edge（Windows 10）Mozilla Firefox
Mozilla Firefox是一款免费的开源Web浏览器。截止到2015年7月，它在浏览器市场大约占据了15%的份额。Netscape Navigator是第一款流行的商业Web浏览器，其1.0版发布于1994年。1998年，Netscape Communications公开了其Web浏览器的源代码，并让一些员工专门负责对其进行改进。经过7年的多次改版，这款浏览器最终变成了Mozilla Firefox。自从被美国在线收购后，Netscape Communications便不再与独立的非盈利组织Mozilla Foundation有任何瓜葛了。
在很大程度上说，Firefox得以流行是因为它不存在困扰Internet Explorer的安全问题。另外，大量的Firefox扩展改善了这款浏览器的使用体验，在遵循不断发展的Web安全方面，Firefox做得非常出色。Firefox可用于Windows、Mac OS X和Linux，您可从http://www.mozilla.com/免费下载它。Apple Safari
Safari是OS X默认使用的浏览器，这款浏览器还有一个移动版本，被用于Apple iPhone 和iPad。它基于开源技术，对Web标准的支持可与Firefox媲美。当前，Safari占据大约9%的浏览器市场份额。移动浏览器
如果不说说移动浏览器，对浏览器的讨论就不完整。三大移动浏览器巨头分别是Chrome、Safari和Android；截止到2015年7月，Chrome占据了31%的移动浏览器市场份额，而Safari和Android分别为24%和15%。
Google Chrome在2014年之前进入移动市场，在2015年初是最流行的移动浏览器。它使用与桌面版相同的引擎，其性能和稳定性符合用户对Chrome的期望。Safari是Apple在iPhone和iPad等iOS设备中提供的浏览器，对HTML5的支持极强，除屏幕尺寸较小外，其使用体验与桌面浏览器几乎没什么不同。同样，Android提供的浏览器也提供了极佳的Web体验。和桌面版Safari和Chrome一样，这三款浏览器也都基于渲染引擎WebKit。有关创建对移动设备友好的网站时需要考虑的因素，将在第21章讨论。其他浏览器
截止到2015年7月，Google Chrome在桌面和移动Web浏览器市场都占据了大部分市场份额，而其他浏览器占据的份额都较小——不超过13%。例如，Opera（http://www. operasoftware.com/）占据的市场份额很小，只有5%；这是一款小巧、快速、免费的浏览器，可用于包括Windows、Mac OS X和Linux在内的很多平台，并遵循了相关的标准。对使用KDE的UNIX用户来说，有浏览器Konqueror；有各种从Mozilla发展而来的浏览器，如用于Mac OS X的Camino；有提供全文本网页视图的命令行浏览器，如Lynx和Links；还有众多让有特殊要求的用户能够访问Web的浏览器。要支持这些五花八门的浏览器，编写代码时必须遵循通用标准。1.3 Web服务器
要查看和浏览网页，只需要一款Web浏览器；要将网页发布到Web上，需要一个Web服务器。
Web服务器是在计算机上运行的程序，负责响应Web浏览器的请求——向它提供URL指定的内容。要将文档发布到Web上，需要一个Web服务器。运行服务器程序的计算机也被称为服务器，这容易让人混淆。因此，如果有人说Web服务器，他指的可能是用于响应请求的程序，也可能是运行该程序的计算机。
您使用浏览器请求网页时，浏览器使用HTTP建立一条到服务器的Web连接。服务器接受连接，发送请求的文件，再关闭连接。接下来，浏览器对从服务器获取的信息设置格式。
在服务器端，可能有很多不同的浏览器连接到同一个服务器，该服务器负责处理所有这些请求。
Web服务器不仅提供文件，还负责管理表单输入以及将表单和浏览器关联到运行在服务器上的数据库等程序。
与浏览器一样，也有很多用于不同平台的服务器，它们的功能各不相同。就当前而言，您只需知道服务器是做什么用的，有关Web服务器的更详细信息将在第23章介绍。1.4 统一资源定位符
前面说过，URL指向Web上的一些数据，该数据可以是Web文档、图像、样式表或JavaScript脚本，这些都将在本书后面介绍。URL为查找并访问信息提供了统一而一致的方法。
除在浏览器中直接输入URL来访问网页外，您还可使用URL在文档中创建到另一个文档的超文本链接。因此，无论从什么角度看，URL对您和浏览器在Web上导航来说至关重要。
URL包含有关如下方面的信息：● 如何获取信息（使用哪种协议：FTP、HTTP还是file）；● 该信息所在计算机的Internet主机名（www.ncsa.uiuc.edu、
ftp.apple.com、netcom16. netcom.com等）；● 该信息位于网站的哪个目录或位置。
您还可使用特殊的URL来完成发送邮件（Mailto URL）和运行JavaScript代码等任务。第6章将全面介绍URL及其每个部分的含义。1.5 广义的Web发布
Web刚面世时，Web发布指的只有一件事情：创建由单个文件组成的网页，并将其上传到服务器，让用户能够通过浏览器进行查看。但从此以后，几乎一切都变了。
有些网站依然只包含手工创建并上传的网页，但大多数网站都是使用运行在服务器上的软件创建的。网页更复杂了，网站亦如此。当前，网页的大部分内容都是使用应用程序创建的，而这些应用程序也驻留在Web上。例如，在WordPress.com，您可创建博客并通过WordPress的Web界面立即发布这些内容。
无论是在Twitter发布状态更新、在新闻网站发表评论、使用工具发布博客还是编辑维基百科上的文章，都是在将内容发布到Web上。在大多数情况下，您都无须直接编写HTML。一般而言，网页都是根据别人创建的模板生成的，而您通常可以设置内容的格式——使用图形编辑器或让您能够避免使用HTML的简化标记。
然而，您输入的内容最终都将转换为HTML，以便向用户显示。因此，如果您发布的内容看起来不妥，要修复问题就必须懂HTML。您需要区分由您控制的页面部分和您使用的发布应用程序生成的部分。如果您要进一步控制网站的外观，可能就需要懂HTML，这样才能修改用于指定网页外观的模板。
因此无论采用什么样的Web发布方法，全面了解Web发布的工作原理都将让您受益。您也许永远都不会手工创建网页，但明白如何这样做将让您能够使用工具来创建网站——不管您最终选择的工具是什么。1.6 小结
要发布到Web，您必须明白与Web的各部分相关的基本概念。在本章中，您学习了三个重要的概念。首先，您学习了用于发布信息的Web的一些重要特征。其次，您学习了Web浏览器和Web服务器以及它们如何交互来传递网页。最后，您学习了URL是什么，以及为何它对Web浏览和Web发布来说都很重要。1.7 作业
本书的每章都有作业，旨在帮助您复习刚学习的主题。在本节的第一个小节中，将回答一些与Web相关的常见问题。接下来，将由您来回答一些有关Web的问题，而随后列出了这些小测验的答案。在每章的最后都有几个练习，旨在帮助您记住刚学到的Web知识。1.7.1 问与答
问：Web有谁负责运营？这些协议都是由谁控制的？这一切都是由谁管理的？
答：万维网并非由某个组织拥有或控制。鉴于向Web提供信息的独立网站数不胜数，任何单个组织都无法制定相关的规则或指南。然而，有两类组织给Web的外观和发展方向带来了重大影响。
第一个这样的组织是万维网联盟（W3C），它有两个总部，分别位于美国的麻省理工学院和欧洲的INRIA。W3C的成员为有志于支持和定义Web语言和协议（如HTTP、HTML、XHTML等）的个人和组织；W3C还提供浏览器、服务器等产品，可供任何人免费使用。W3C负责制定万维网标准和实施相关的规则，其网站地址为http://www.w3.org/。
影响Web的第二类组织是浏览器开发商，其中最著名的是Google、Apple、Microsoft和Mozilla Foundation。为成为最流行、最先进的Web浏览器，这些开发商展开了激烈的竞争。一些关心Web未来的个人和公司成立了一个名为WHATWG（Web Hypertext Application Technology Working Group，Web超文本应用技术工作组）。HTML5规范就是由WHATWG和W3C一起制定的。
从现在开始，WHATWG放弃了给HTML规范制定版本号，相反，HTML将是一个“流动的标准”，将涵盖实验性功能和得到广泛支持的功能，旨在确保该规范紧跟发展步伐，涵盖浏览器开发商一致同意在其浏览器中添加的功能。如果提议添加的功能未得到一致同意，该功能将从HTML规范中删除。这旨在避免以前遇到的问题，即HTML规范制定流程与浏览器开发商所做的工作脱节的问题。
问：我听说Web发展迅速，要跟上潮流几乎不可能。本书会注定一出版就过时吗？
答：确实，Web在不断变化，但本书介绍的大部分知识您以后都用得着。当前，HTML像以前一样很稳定，一旦您掌握与超文本标记语言（HTML）、级联样式表（CSS）和JavaScript相关的核心技术，可根据需要补充新的知识。1.7.2 小测验
1．URL是什么？
2．要将文档发布到Web上，必须有什么？1.7.3 小测验答案
1．URL（统一资源定位符）是一个指向Internet上特定文档或信息的地址。
2．您必须能够访问Web服务器。Web服务器是在Web上提供文档的程序，它响应Web浏览器发出的获取文件的请求，能够将请求的网页发送给众多不同类型的浏览器。它们还负责管理表单输入以及处理数据库集成。1.7.4 练习
1．从现在开始，每当您在网上冲浪时都更多地从Web发布的角度考虑考虑。看看URL由哪些部分组成，注意网页的结构。这样，您很快就将对网页是如何创建的了如指掌。
2．下载一款您通常不使用的浏览器，并尝试使用一段时间。如果您当前使用的是Internet Explorer，请尝试使用Firefox、Chrome、Safari乃至命令行浏览器Lynx或Links。要真正明白现在情况有何不同，还有未升级浏览器的用户的Web体验是什么样的，请从http://browsers.evolt.org/下载一款老式浏览器并尝试使用它。第2章 准备好工具
无论是编写图书还是给房间刷漆，您都不会草率行事，抓起刷子就干或立即坐在计算机前敲字，而是先制定完成项目的计划并搜集完成项目所需的材料。您的计划可能很简单——先刷墙再刷天花板，也可能很复杂——详细列出您要写到书中的每项内容。
搜集材料方面亦如此。如果您要给房间刷漆，就需要刷子和油漆，还有防止油漆落在其他地方的东西。同样，如果您要编写图书，就需要安装字处理程序，还可能需要搜集为写作提供支持的研究材料。与其他大多数项目一样，设计并编写网页也需要思考并制定计划，然后再着手处理文本和图形并将它们链接起来。同样，您需要确保创建网页需要的一切都在计算机中，还有一个可用于托管网站的地方。
要为发布到Web做好准备，您必须：● 了解Web服务器、网站、网页和主页之间的差别；● 配置计算机，以便能够开始创建网页。2.1 网站剖析
首先，介绍一下本书都将使用的一些简单术语。您必须知道下述术语的含义及其在您开发的Web产品所处的位置。● 网站：一个或多个网页，它们以有意义的方式组织起来，一起描
述了一项信息或营造出一种效果，如图2.1所示。图2.1 网站和网页● Web服务器：Internet或内联网中的计算机，在收到浏览器的请
求时提供网页或其他文件（内联网是使用Internet协议但不对公
众开放的网络）。● 网页：网站上的单个文档，通常由超文本标记语言（HTML）文
档和其中显示的内容（如内嵌图像或样式表）组成。● 主页：网站的入口页面，可链接到当前网站或其他网站的页面。
网站都由Web服务器托管。在本书的前几章，您将学习如何开发深思熟虑、设计良好的网站。然后，您将学习如何将网站发布到Web服务器。
就像纸张页是图书和报纸的构成元素一样，网页也是网站的构成元素，虽然网页不像纸张页那样长度是固定的。网页有时也被称为Web文档，这两个术语说的是一码事。网页由HTML文档和其他部分（如图像或其他多媒体）组成。 当今的大多数网站都不是由不同的网页组成的，而是使用应用程序创建的，这些应用程序根据一组常用模板发布存储在数据库中的Web内容。网站上的URL充当了发布应用程序的输入。在本书中，您将创建传统意义上的网页，因为这是最容易的学习方式。
如果您是发布到网站，主页将是网站的首页或最顶层页面，它是让用户能够访问网站其他网页的入口，如图2.2所示。图2.2 主页 大多数用户都将通过主页访问您的网站，但有些用户将通过其他网页进入您的网站。用户可链接到您的网站的任何网页，这是Web的本质决定的；如果并非主页的网页包含有趣的信息，用户可能直接链接到该网页；因此，在这些网页中，不应假设访客见过您的主页。
主页通常概述了通过这个起点可以访问的网站内容，例如，它可能是一个目录或一组图标。如果网站的内容不多，它们可能都包含在一个网页中；在这种情况下，主页和网站指的是一回事。个人主页可能包含到简历的链接以及到Twitter账户和Flickr上照片的链接。餐馆的主页可能包含营业时间和位置，还有显示菜单和行车路线的链接。公司的主页通常描述了公司从事的业务，并包含诸如About the Company、Products and Services和Customer Support等链接。2.2 为发布到Web准备好计算机
首先，如果您只想通过网页发布文本或图片，就根本不需要对计算机做任何配置。您只需打开浏览器，找到让您能够发布这些内容的网站，如Tumblr或Wix，然后直接通过浏览器进行发布。
如果您要学习如何从空白开始创建网站，就需要配置计算机，以便能够在本地创建和查看网页。要尝试Web发布，只有两款工具是必不可少的，就是文本编辑器和Web浏览器。Web浏览器在前一章简要地介绍过，因此下面先来说说文本编辑器。2.2.1 文本编辑器
HTML文件属于纯文本文件，应使用处理纯文本文件的工具对其进行编辑。这意味着学习HTML时，不应使用Microsoft Word等字处理程序或Google Docs等在线应用程序来编辑文件。这些程序让您能够设置格式，并将结果保存为Microsoft Word等专用文档格式。令人迷惑的是，在这些应用程序中，也可以将文档保存为HTML文档。从生成文档的角度看，这样做虽然能够满足您的要求，但对完成您的目标——学习HTML毫无帮助。
如果您以前使用过文本编辑器，很可能有自己喜欢的一款。在什么样的文本编辑器是良好的文本编辑器方面，大家的看法常常非常武断。如果您根本没有使用过文本编辑器或用得不多，就需要有人推荐。刚开始时，您可使用计算机的操作系统自带的文本编辑器——所有操作系统都自带了文本编辑器。
如果您是Windows用户，可使用“记事本”；如果您使用的是OS X，可先用用TextEdit；如果您是Linux用户，可先用用vi或Emacs。“记事本”、TextEdit和vi提供的功能都极其有限，如果您需要做大量的文本编辑工作，可能想寻找其他功能更强大的文本编辑器。下面列出了网站开发人员常用的一些文本编辑器。● Komodo Edit：流行的Komodo IDE的免费开源版，可用于
Windows、Macintosh和Linux，提供了IDE的大量功能，可从
http://komodoide.com/komodo-edit/下载。● HTML-Kit：一款流行的专用于创建网页的Windows文本编辑器，
可从http://www.htmlkit.com/下载。您可免费使用较旧的版本，也
可付费使用最新、最强大的版本。● Notepad++：一款极其流行的免费开源Windows编辑器，可从
http://notepad-plus-plus.org/下载。● TextWrangler：一款流行的免费OS X文本编辑器，由Bare
Bones Software开发，可从该公司的网站http://
www.barebones.com/products/textwrangler/下载。您还可能对
BBEdit感兴趣，它是一款功能更强大的文本编辑器，但需要收取
许可费。● Coda：一款专用于创建网页的文本编辑器，由Panic开发，提供
了大量的开发功能，如源代码控制和数据库连接。您可在http://
panic.com/coda/找到它；这款编辑器也收取许可费。
现在，您该找到您要使用的文本编辑器并启动它。如果使用的是OS X文本编辑器TextEdit，请确保它处于纯文本模式。如果文档窗口包含选择字体或设置其他格式的控件，请选择菜单Format>Make Plain Text。启动文本编辑器后，就可以输入一些内容了；如果您愿意，还可以保存编辑的文件。需要指出的重点是，您只能通过键盘输入字符，而没有任何设置格式的选项，这就是纯文本的含义。 只需使用“记事板”或TextEdit就可完成本书介绍的所有任务，但大多数Web开发人员都发现，使用功能更强大的工具可极大地提高效率。很多文本编辑器都突出特定的文本，让文档阅读起来更容易；它们还让您能够同时打开多个文档以及将一组文件视为一个项目。当前，您都还未开始创建网页，因此很难确定哪个工具适合您，但强烈建议您在阅读本书的过程中尝试不同的编辑器。很多商业编辑器都可免费试用，您可先试用，再决定是否购买。
图2.3是OS X文本编辑器TextEdit的一个屏幕截图，这个屏幕截图最引人瞩目的地方是，根本没有设置文本格式的菜单，也没有工具栏。这正是您对文本编辑器的要求，它让您能够编辑文件的内容，而又不会设置任何格式。图2.3 OS X文本编辑器2.2.2 Web浏览器
前一章说过，有很多流行的Web浏览器，在Web上冲浪时，您可根据喜好使用任何一款。然而，阅读本书时，建议您使用浏览器Google Chrome，其主要原因是Google Chrome为帮助创建网站提供了大量功能强大的工具。其他浏览器也提供了类似的工具，但本书说的都是Google Chrome 开发者工具，因此如果您也使用Google Chrome，阅读起来将更容易。如果您充满自信，也可使用其他浏览器；在这种情况下，每当本书提及Google Chrome时，您都需要将其替换为您选择的浏览器。不管您最终决定使用哪款浏览器，我都建议您下载Google Chrome并阅读下一节；如果您对这些工具根本不熟悉，就更应该这样做。您可从http://google.com/chrome下载Google Chrome。2.3 使用Google Chrome 开发者工具
下载并安装Google Chrome后，启动它并访问http://getbootstrap.com/。Bootstrap是一个通用的网页框架，将在本书后面讨论。就当前而言，它很有用，因为这个网页的源代码易于理解。在Chrome中，选择菜单“更多工具”>“开发者工具”，这将打开开发[1]者工具，如图2.4所示。图2.4 Google Chrome开发者工具 有一个打开开发者工具的快捷键，在Windows中为Ctrl + Shift + I，在OS X中为Command + Option + I。您经常会用到开发者工具，因此绝对值得记住这个快捷键。
开发者工具是作为浏览器中的一个面板打开的，覆盖了网页的下半部分。如果您愿意，可单击右上角的按钮，将开发者工具与浏览器窗口分离。这让您能够在两个窗口中看到更多内容，但必须在它们之间切换。如果您愿意，还可以将开发者工具移到浏览器窗口右边，而不是让它位于底部。请将开发者工具放在您认为看起来最舒服的地方。
从Web面世起，浏览器就支持一种名为“查看源代码”的功能，它显示当前网页的HTML源代码。在Google Chrome中，要查看当前网页的源代码，可选择菜单“更多工具”> “查看源代码”。图2.5显示了http://getbootstrap.com/的源代码。图2.5 http://getbootstrap.com/的源代码
开发者工具是这种概念的扩展，但功能强大得多。开发者工具包含很多选项卡，默认显示的是选项卡Elements，其中包含的内容类似于网页的源代码。浏览器下载网页时，将其进行转换，让设置HTML格式并显示它的引擎能够明白。根据网页的有效性程度，这种转换所做的修改很少。Elements选项卡显示的是浏览器看到的HTML，而“查看源代码”显示的是浏览器下载的HTML，如果您比较“查看源代码”窗口和Elements选项卡中的内容，将发现它们有几个不同的地方，这佐证了我前面的说法。
现在暂时不要考虑这些HTML是做什么的，我马上就会详细介绍；当前的重点是开发者工具。如果您将鼠标指向Elements选项卡中的元素，相应的网页部分将呈高亮显示，让您知道网页各部分与HTML源代码的对应关系。如果您单击Elements选项卡中的元素，右边的窗格将更新以显示该元素的样式信息，等您开始使用级联样式表时，这种功能将很有帮助，因为它准确地指出了浏览器是如何解读样式的。
最后，开发者工具面板的右上角有三个按钮，其中最右边的那个用于将开发者工具窗口和浏览器窗口分离和合并，而最左边的那个按钮显示/隐藏第17章将开始介绍的JavaScript 控制台。另外，左上角还有两个按钮，其中左边的那个像放大镜，如果您单击它，再单击网页的内容，将在Elements选项卡中选中相应的HTML元素，在您需要审查网页上的特定元素时，这很有用。练习2.1：使用审查器（Inspector）
这里有必要研究一下审查器的工作原理，看看如何使用开发者工具来查找Elements选项卡中与网页内容对应的HTML元素。如果您当前在浏览器中访问的不是http://getbootstrap.com/，请打开该网站，再打开Chrome开发者工具。您可能想尝试前面的“提示”所说的键盘快捷键。前面说过，您将经常这样做。
打开开发者工具后，单击左上角的审查器按钮—放大镜，它将变成蓝色，表明开发者工具为审查您单击的元素做好了准备。现在，在浏览器窗口中移动鼠标，将其指向网页顶部附近的大标题，浏览器窗口将类似于如图2.6所示。图2.6 审查Bootstrap主页
正如您看到的，该标题呈高亮显示，且工具提示中显示了一些有关该元素尺寸的信息。这个元素正是您要审查的，因此请在浏览器中找到并单击它。您刚打开开发者工具时，Elements选项卡显示的网页源代码几乎处于完全折叠的状态，如图2.4所示；但当您审查元素时，源代码将展开到足够的程度，让您能够看到被单击的网页元素对应的HTML源代码。现在，开发者工具窗口应显示用来创建您单击的标题的HTML标签，如图2.7所示。图2.7 使用开发者工具审查图标B
我并不奢望您现在就理解开发者工具窗口中的众多内容，但这里需要指出一些重点。在左边的窗格中，显示的是网页的HTML源代码；右边窗口显示的样式信息指出了为何选定元素有当前这样的外观。在左边窗格的底部，指出了选定元素在网页结构中的位置：选定的元素显示在最后，它是包含B的span元素，在网页中被嵌套了4层，并对其应用了3个CSS类。
您经常要求助于开发者工具，尤其是在网页的外观不符合预期时。它指出了浏览器眼中的网页是什么样的，让您能够轻松地向下挖掘，找到您要寻找的元素，这在网页庞大而复杂时尤其有用。2.4 您要在Web上做什么
这个问题好像问得很傻。如果您都不知道自己要发布什么，就不会购买本书了，但也许并非完全知道自己要向Web发布什么，或者说您的想法模糊而不具体。也许您突然间接手了负责公司网站的工作，有人将本书交到您手中说，这本书可提供帮助；也许您原本是软件开发人员，突然间被要求负责开发产品的Web界面或Web应用程序；又也许您看到一些网页后觉得很酷，想做些类似的东西。
对于您要发布到Web的东西，我在本书中都称之为内容。内容是一个包罗万象的术语，可以指文本、图形、多媒体、表单等。告诉别人您的网页是做什么用的时，您其实就在描述其内容。
您想象得到的任何东西都可发布到Web。事实上，如果您要做的事情看似越荒唐古怪，就越有理由去尝试。最有趣的网站都是那些拓展了Web原有功能的网站。
通过研究与您要创建的网站类似的网站，也可能获得灵感。如果您要打造公司网站，就研究竞争对手的网站，看看它们都提供了哪些功能。如果您要打造个人网站，就访问让您敬佩的网站，看看能否从中找到灵感。找出这些网站让您喜欢并想模仿的方面，还有可以改善的方面。
当前，很多类型的网站的创建门槛都很低。如果您要发布文本和图片，有很多免费的博客软件可供使用，您只需选择适合自己的博客软件，打造自己的网站就是分分钟的事。尝试比以前任何时候都容易；请先尝试尝试，如果管用，就接着往下做。
如果您根本不知道要向Web发布什么，请不要就此止步；先将本书放在一边，等有想法后再继续阅读。也许通过阅读本书您会有些想法，因此即便您原本没有想法，本书也很有用。我个人发现，要想出点子，最佳的方式是花一个下午在网上冲浪，看看别人都做了些什么。2.5 绘制网站线框图
网站规划的下一步是确定如何在网页之间分配内容，并制定在网页之间导航的方案。如果有很多需要以复杂的方式链接起来的内容，请坐下来制定具体的内容分配计划，这对您以后开发和链接网页大有裨益。2.5.1 线框图是什么，为何需要绘制线框图
线框图是网站完成后的大致轮廓，指出了内容在网页之间的分配情况以及内容是如何彼此关联起来的。有了线框图后，开发每个网页时就无须牢记它在整个网站所处的准确位置，也无须牢记它与其他网页之间的复杂关系。
在网站特别大的情况下，如果有线框图，就可将网站不同部分的开发工作分配给不同的人去完成。清晰的线框图让您能够最大限度地避免重复工作，减少每个人都必须牢记的上下文信息。
如果网站较小，或者网站是使用提供了具体结构的内容管理应用程序创建的，也许不需要线框图。然而，对于复杂的大型网站，线框图可节省大量的时间，避免众多的弯路。如果您无法牢记内容的各个部分以及它们之间的关系，就应考虑绘制线框图。
线框图什么样呢？一般而言，它们是成组的文档或图像，每组表示网站中一种特定类型的网页。文档包含网页的粗略示意图，指出了网页各个部分处于什么位置、占据多大空间以及将发挥的作用。例如，报纸网站的线框图包括主页示意图、各个版面的主页以及文章页面的线框图。线框图还可能包括网站的注册表单以及购买广告版面的页面。图2.8是一个使用工具Balsamiq创建的线框图。图2.8 报纸主页的线框图
线框图并非必须非常漂亮，也并非一定要使用线框图绘制软件来创建。绘制线框图的关键在于，将网页以适合您的方式组织起来。如果您喜欢索引卡和细绳，使用这些工具就是了；如果在纸上或计算机中绘制简单的草图更佳，这样做就是了。2.5.2 线框图绘制小贴士
绘制线框图时，需要考虑如下几点。● 如何在网页之间分配主题？
确定一个网页包含多少信息可能比较棘手。有些网站将所有内容都放在一个设计巧妙的冗长网页中，有些网站将内容分配到大量不同的网页中，还有些网站使用新技术按需动态地加载网页的各个部分，用户根本不需要从一个网页切换到另一个网页。为避免过于花哨，最佳的做法是这样组织内容，即让每个页面都包含一个主题的信息。如果页面有好几屏长，也许该将相应的主题按逻辑分成多个子主题。● 在网页之间导航的主要方式是什么？
为了让访客能够在页面之间导航，您需要哪些链接。这些是文档中的主链接，让访客能够实现您确定的目标。向前、向后、向上、向下的链接以及到主页的链接都属于主要的导航方式。● 要提供其他哪些导航方式？
除简单的导航链接外，有些网站还包含与主要Web内容平行的额外信息，如术语表、按字母顺序排列的概念索引、版权信息或职员页面。制定计划时一定要考虑这些额外的信息，想想要如何将它们链接到主要内容。● 要在主页上放置哪些内容？
鉴于主页是访问网站其他信息的入口，需要考虑要将哪些信息放在主页上。一篇博客？即将推出的产品摘要？一系列到其他主题的链接？无论您决定将哪些内容放在主页上，都必须确保它们有足够的吸引力，让目标受众留下来。● 如何让访问内部网页的用户知道他身处何方？
除非您的网站要求访客注册才能访问，否则访客很可能是通过搜索引擎进入网页的。务必要让访客能够知道他访问的是哪个网站，并指出该网站还有更多他可能感兴趣的信息。通常，您可通过设计和导航实现这个目标。● 您的目标是什么？
设计网站的框架时，别忘了您要达成的目标，并避免您的目标因额外的信息或内容而变得模糊不清。 有多个实用工具和包可帮助创建线框图。下面是一些免费的工具：Mockingbird （http://gomockingbird.com/）、Denim （http://dub.washington.edu:2007/denim/）、Gliffy （https://www.gliffy.com/
试读结束[说明：试读内容隐藏了图片]