第 1 章

　　Internet和Web基础

　　Internet和Web是我们日常生活的一部分。它们是如何产生的？是什么网络协议和程序设计语言在幕后控制着网页的显示？本章讲述了网页开发人员必须掌握的基础知识，并指导你开始编制自己的第一个网页。你将学习超文本标记语言(HTML)，这是创建网页时使用的语言。将学习可扩展标记语言(XHTML)，这是HTML逐渐发展形成的标准版本。还将学习HTML5，它是HTML目前最新的草案标准。

　　学习内容

　　Internet和 Web的演变

　　对Web标准的需求

　　通用设计

　　无障碍Web设计的益处

　　Web上可靠的信息资源

　　使用Web时的道德规范

　　Web浏览器和Web服务器的作用

　　Internet协议

　　URI和域名

　　HTML，XHTML和HTML5

　　创建第一个网页

　　使用body，head，title和meta元素

　　命名、保存和测试网页

　　1.1  Internet和Web

　　Internet

　　Internet一词是指由计算机网络连接而成的网络，即“互联网络”、“网际网络”或者音译成“因特网”。它如今随处可见，已成为我们生活的一部分。电视和广播没有一个节目不敦促你浏览某个网站，甚至报纸和杂志也全面入驻Internet。

　　Internet的诞生

　　Internet诞生于连接科研机构和大学计算机的一个网络。在这个网络中，信息能通过多条线路传输到目的地，使网络在部分中断或损毁的情况下也能照常工作。信息重新路由到正常工作的那部分网络从而送达目的地。该网络由美国高级研究计划局(Advanced Research Projects Agency，ARPA)提出，所以称为阿帕网(ARPAnet)。1969年底，有4台计算机(分别位于加州大学洛杉矶分校、斯坦福研究所、加州大学圣芭芭拉分校和犹他大学)连接到一起。

　　Internet的发展

　　随着时间的推移，其他网络(如美国国家科学基金会的NSFnet)相继建立并连接到阿帕网。这些互相连接的网络，即Internet，起初仅限于在政府、科研和教育领域使用。对Internet的商用限制在1991年被解禁，Internet继续发展，Internet World Stats的报告表明，到2011年，Internet用户的数量已超过33亿。图1.1展示了2015年第3季度按地域划分的Internet用户数量。

　　按地域划分的Internet用户数量(2015年第三季度)

　　(百万)

　　图1.1  Internet用户的增长情况①

　　Internet的商用被解禁后，为未来的电子商务奠定了基础。然而，虽然不再限制商业使用，但当时的Internet仍然是基于文本的，使用起来极为不便。后来的发展解决了这个问题。

　　Web的诞生

　　视频讲解：Evolution of the Web

　　蒂姆·伯纳斯-李(Tim Berners-Lee)在瑞士欧洲粒子物理研究所(CERN)工作期间，构想了一种通信方式，使得科学家之间可以轻易“链接”到其他研究论文或文章并立刻查看该文章的内容。于是他建立了万维网(World Wide Web)来满足这种需求。1991年，他在一个新闻组上发布了这些代码。在这个版本的万维网中，客户端和服务器之间用超文本传输协议(Hypertext Transfer Protocol，HTTP)进行通信，用超文本标记语言(Hypertext Markup Language，HTML)格式化文档。

　　第一个图形化浏览器

　　1993年，第一个图形化Web浏览器Mosaic问世(图1.2)。

　　图1.2  Mosaic：第一个图形化浏览器

　　它由马克·安德烈森(Marc Andreessen)和美国国家超级计算中心(NCSA)工作的一个研究生团队开发，该中心位于伊利诺斯大学香槟分校。他们中的一些人后来开发了另一款著名的Web浏览器Netscape Navigator，即今天的Mozilla Firefox浏览器的前身。

　　各种技术的聚合

　　上个世纪90年代初，采用易于使用的图形化操作系统(比如Microsoft Windows，IBM OS/2和Apple Macintosh)的个人电脑大量面世，而且价格变得越来越便宜。在线服务提供商(比如CompuServe，AOL和Prodigy)也提供了便宜的上网连接。价格低廉的计算机硬件、易于使用的操作系统、便宜的上网费用、HTTP协议和HTML语言以及图形化的浏览器，所有这些技术聚合在一起，使Internet上的信息很容易获得。在这个时候，万维网(World Wide Web)应运而生，它提供了图形化界面，方便用户访问存储在Web服务器上的信息。

　　1.2  Web标准和无障碍访问

　　你可能已经注意到，万维网不是由单一个人或团体运作的。然而，万维网联盟(W3C，http://www.w3.org)在提供与网络相关的建议和建立技术模型上扮演着重要的角色。W3C主要解决以下三个方面的问题：Web架构、Web设计标准和无障碍访问。W3C提出规范(称为推荐标准，即recommendations)来促进Web技术的标准化。图1.3是W3C的徽标。

　　图1.3  W3C的徽标

　　W3C推荐标准

　　W3C推荐标准由下属工作组提出，工作组则从参与技术开发工作的许多主要公司获取原始技术。这些推荐标准不是规定而是指导方针，许多开发Web浏览器的大软件公司，(比如微软)并不总是遵从W3C推荐标准。这给开发人员造成了不少麻烦，因为他们编写的网页在不同的浏览器中显示的效果不完全相同。

　　但也有好消息，那就是主流浏览器的新版本都在向这些推荐标准靠拢。甚至还有专门的组织团体，如Web标准项目(Web Standards Projects，http://webstandards.org)，专门从事W3C建议(通常称为Web标准)的推广，他们的推广对象不仅包括浏览器开发商，还包括开发人员和设计师。使用本书编码网页时，须遵从W3C推荐标准，这是创建无障碍访问网站的第一步。

　　Web标准和无障碍访问

　　无障碍网络倡议(WAI，http://www.w3.org/WAI/)是W3C的一个主要工作领域。Web已成为日常生活不可分割的一部分，有必要确保每一个人都能使用它。

　　Web可能对视觉、听觉、身体和神经系统有残疾的人造成障碍。无障碍访问(accessible)的网站通过遵循一系列标准来帮助人们克服这些障碍。WAI为Web内容开发人员、Web创作工具的开发人员、浏览器开发人员和其他用户代理的开发人员提出了建议，使得有特殊需要的人也能够更好地使用网络。要想查看这些建议的一个列表，请访问WAI的“Web内容无障碍指导原则”(Web Content Accessibility Guidelines，WCAG)，网址是http://www.w3.org/WAI/WCAG20/glance/WCAG2-at-a-Glance.pdf。

　　无障碍访问和法律

　　1990年颁布的《美国残疾人保障法》(ADA)是一部禁止歧视残疾人的美国联邦公民权利法，ADA要求商业、联邦和各州均要对残疾人提供无障碍服务，1996年美国司法部的一项规定(http://www.usdoj.gov/crt/foia/cltr204.txt)指出，ADA无障碍要求适用于Internet资源。

　　1998年对《联邦康复法案》进行增补的Section 508条款规定，所有由美国联邦政府发展、取得、维持或使用的电子和信息技术都必须提供无障碍访问。美国联邦信息技术无障碍推动组(http://www.section508.gov)为信息技术开发人员提供了无障碍设计要求的资源。近年来，美国各州政府也开始鼓励和推广网络无障碍访问，伊利诺斯州网络无障碍法案(http://www.dhs.state.il.us/IITAA/IITAAWebImplementationGuidelines.html)是这种发展趋势的一个例证。

　　Web通用设计

　　通用设计中心(Center for Universal Design)将通用设计(universal design)定义为“在设计产品和环境时尽量方便所有人使用，免除届时进行修改或特制的必要”。通用设计的例子在我们四周随处可见。路边石上开凿的斜坡既方便推婴儿车，又方便驾驶电动平衡车(图1.4)。自动门方便了带着大包小包东西的人。斜坡设计既方便人们推着有滑轮的行李箱上下，也方便了手提行李的人。

　　图1.4  电动平衡车受益于通用设计

　　网页开发人员越来越多地采用通用设计。有远见的开发人员在网页的设计过程中会谨记无障碍要求。为有视觉、听觉和其他缺陷的访问者提供访问途径应该是网页设计的一个组成部分，而不是网页设计完后才考虑的事情。

　　有视觉障碍的人也许无法使用图形导航按钮，而是使用屏幕朗读器来提供对页面内容的声音描述。只要做一点简单的改变，比如为图片添加描述文本或在网页底部提供文本导航区，网页开发人员就可以把自己的网页变成无障碍页面。通常情况下，提供无障碍访问途径对于所有访问者来说都有好处，因为它提升了网页的可用性。

　　为图片提供备用文本，以有序的方式使用标题，为多媒体提供旁白或字幕，这样的网站不仅方便有视听障碍的人访问，还方便移动浏览器的用户访问。搜索引擎可能对无障碍网站进行更全面的索引，这有助于将新的访问者带到网站。本书在介绍网页开发与设计技术的过程中，会讨论相应的无障碍和易用性设计方法。

　　1.3  网上的信息

　　任何人都可以在网上发布几乎任何信息。本节探讨如何判断你获得的信息是否可靠，如何利用那些信息。

　　信息和可靠性

　　目前有数量众多的网站，但哪些才是可靠的信息来源呢？访问网站获取信息时，重要的一点是切忌只看表面(图1.5)。任何人可以在网上发布任何东西！一定要明智地选择信息来源。

　　图1.5  谁知道你所看的网页是由谁更新的呢

　　首先评估网站本身的信用。它是有自己的域名(比如http://mywebsite.com)还是一个免费网站，寄存在免费服务器上的一个文件夹中？

　　寄存在免费服务器上的网站的URL一般包含免费服务器名称的一部分，可能采用http://mysite.tripod.com或者http://www.angelfire.com/foldername/mysiste这样的形式。和免费网站相比，有自己域名的网站通常(但并非总是)提供的信息更为可靠。

　　还要评估域名类型，它是非赢利组织(.org)，商业组织(.com或.biz)，还是教育机构(.edu)？商家可能提供对自己有利的信息，所以要小心。非赢利组织或者学校有时能更客观地对待一个主题。

　　另外要考虑的是网页创建日期或者最后更新日期。虽然有的信息不受时间影响，但几年都没有更新的网页极有可能已过时，可能算不上是最好的信息来源。

　　有道德地使用网上信息的道德使用

　　万维网这一奇妙的技术为我们提供了丰富的信息、图片和音乐，基本都是免费的(当然网费少不了)。下面谈谈与道德相关的一些话题。

　　* 能不能复制别人的图片并把它用到自己的网站上？

　　* 能不能复制别人的网站设计并把它用到自己或客户的网站上？

　　* 能不能复制别人网站上的文章，并把它的全部或部分当作自己的作品？

　　* 在自己的网站上攻击别人，或者侮辱性地链接他们的网站，这样的行为是否恰当？

　　对于所有这些问题的回答都是否定的。在未经许可的情况下使用别人的图片的行为就像是盗窃，事实上，如果链接这些图片，你用的其实是他们的带宽，并且有可能是在让他们花钱。复制他人或公司的网站设计也属于盗窃。在美国，无论网站上是否有版权的标记，它的任何文字和图片都自动受到版权保护。在你的网站上攻击他人和公司或者侮辱式地链接其网站都被视为诽谤。

　　诸如此类的与知识产权、版权和言论自由相关的事件常常被诉诸公堂。良好的网络礼节要求你在使用他人的作品之前获得许可，注明所用材料的出处(美国版权法称“合理使用”)，并以一种不伤害他人的方式行使言论自由权。世界知识产权组织(World Intellectual Property Organization，WIPO，http://wipo.int)是致力于保护国际知识产权的组织。

　　如果想保留所有权，又想方便其他人使用或采纳你的作品，又该怎么办呢？“知识共享”(Creative Commons，http://creativecommons.org)是一家非赢利性组织，作者和艺术家可利用它提供的免费服务登记一种称为“知识共享”(Creative Commons)的版权许可协议。可以从几种许可协议中选择一种，具体取决于你想授予的权利。“知识共享”许可协议提醒其他人能对你的作品做什么和不能做什么。http://meyerweb.com/eric/tools/color-blend展示了基于Creative Commons Attribution-ShareAlike 1.0(署名-相同方式共享)许可协议的一个网页，它“保留部分权利”(Some Rights Reserved)。

　　1.4  浏览器和服务器

　　网络概述

　　网络(network)由两台或多台相互连接的计算机构成，它们以通信和共享资源为目的。图1.1展示了网络常见的组成部分，包括：

　　* 服务器计算机；

　　* 客户端工作站计算机；

　　* 共享设备，如打印机；

　　* 连接它们的设备(路由器和交换机)和媒介。

　　图1.6  网络常见的组成部分

　　客户端是个人使用的计算机，如桌面PC(台式机)。服务器用于接收客户端计算机的资源请求，比如文件请求。用作服务器的计算机通常安放在受保护的安全区域，只有网络管理员才能访问它。集线器(hub)和交换机(switch)等网络设备用于为计算机提供网络连接，路由器(router)将信息从一个网络传至另一个网络。用于连接客户端、服务器、外设和网络设备的媒介包括电缆、光纤和无线技术等。

　　客户端/服务器模型

　　客户端/服务器这个术语可追溯到上个千年(20世纪80年代)，表示通过一个网络连接的个人计算机。客户端/服务器也可用于描述两个计算机程序——客户程序和服务器程序——的关系。客户向服务器请求某种服务(比如请求一个文件或数据库访问)，服务器满足请求并通过网络将结果传送给客户端。虽然客户端和服务器程序可存在于同一台计算机中，但它们通常都运行在不同计算机上(图1.7)。一台服务器处理多个客户端请求也是很常见的。

　　?                             客户端                        服务器

　　图1.7  客户端和服务器

　　Internet是客户端/服务器架构的一个典型例子。想象以下场景：某人在计算机上用浏览器访问网站，比如 http://www.yahoo.com。服务器是在一台计算机上运行的服务器程序，该计算机具有分配给yahoo.com这个域名的IP地址。连接到服务器后，它定位和查找所请求的网页和相关资源，并将它们发送给客户端。

　　下面简单列举了客户端和服务器的区别。

　　客户端

　　* 需要时才连接Internet

　　* 通常会运行浏览器(客户端)软件，如Internet Explorer或谷歌浏览器

　　* 使用HTTP

　　* 向服务器请求网页

　　* 从服务器接收网页和文件

　　服务器

　　* 一直保持和Internet的连接

　　* 运行服务器软件(比如Apache或Internet Information Server)

　　* 使用HTTP

　　* 接收网页请求

　　* 响应请求并发送状态码、网页和相关文件

　　客户端和服务器交换文件时，它们通常需要了解正在传送的文件类型，这是使用MIME类型来实现的。多用途网际邮件扩展 (Multi-Purpose Internet Mail Extensions，MIME)是一组允许多媒体文档在不同计算机系统之间传送的规则。MIME最初专为扩展原始的电子邮件协议而设计，但也被HTTP使用。MIME提供了7种不同类型文件的传送方式：音频、视频、图像、应用程序、邮件、多段文件和文本。MIME还使用子类型来进一步描述数据。例如，网页的MIME类型为text/html，GIF和JPEG图片的MIME类型分别是image/gif和image/jpeg。

　　服务器在将一个文件传送给浏览器之前会先确定它的MIME类型，MIME类型连同文件一起传送，浏览器根据MIME类型决定文件的显示方式。

　　那么信息是如何从服务器传送到浏览器的呢？客户端(如浏览器)和服务器(如服务器)之间通过HTTP，TCP和IP等通信协议进行数据交换。

　　1.5  Internet协议

　　协议是描述客户端和服务器之间如何在网络上进行通信的规则。Internet和Web不是基于单一协议工作的。相反，它们要依赖于大量不同作用的协议。

　　电子邮件协议

　　大多数人对电子邮件已习以为常，但许多人不知道的是，它的顺利运行牵涉到两个服务器：一个入站邮件服务器和一个出站邮件服务器。需要向别人发邮件时，使用的是简单邮件传输协议(SMTP)。接收邮件时，使用的是邮局协议(POP，现在是POP3)和Internet邮件存取协议(IMAP)。

　　超文本传输协议

　　超文本传输协议(HTTP)是一组在网上交换文件的规则，这些文件包括文本、图形图像、声音、视频和其他多媒体文件。浏览器和服务器通常使用这一协议。浏览器用户输入网址或点击链接请求文件时，浏览器构造一个HTTP请求并把它发送到服务器。目标机器上的服务器收到请求后进行必要的处理，再将被请求的文件和相关的媒体文件发送出去，进行应答。

　　……

第1章  Internet和Web基础 1

第2章  HTML基础 23

第3章  网页设计基础 57

第4章  CSS基础知识(一) 93

第5章  图片样式基础 121

第6章  CSS基础知识(二) 147

第7章  页面布局基础 185

第8章  链接、布局和移动开发进阶 217

第9章  表格基础 257

第10章  表单基础 275

第11章  媒体和交互性基础 313

第12章  上网发布 339

附录A  复习和练习答案 357

附录B  HTML5速查表 358

附录C  CSS速查表 362

附录D  XHTML速查表 366

附录E  对比XHTML和HTML5 369

附录F  WCAG 2.0快速参考 375