作者：[美]JulieC.MeloniMichaelMorrison著
出版社：信息技术第一出版分社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML与CSS入门经典(第8版)试读：
前言
2009年，全世界估计有15亿人访问互联网，在美国就有2.2亿。加上3.38亿的中国用户，5500万德国用户，4800万英国用户，3800万俄罗斯用户，以及6700万巴西用户，你可以看到 World Wide Web 中“World”一词的含义。许多互联网用户还为 Web 创建了内容——你可能是其中之一！虽然精确地度量网页的数量是很困难的，但是Google的最新数据指出， 2008年中期，索引的页面突破了1万亿。
在接下来的 24 小时中，互联网的可访问区域将会出现数千万个新的网页。至少有许多的页面会出现在私有的Intranet，它们将为通过局域网连接的业务人员所查看。每个页面和其他已经在网上的1万亿个页面相似，都使用超文本标记语言（HTML）。
随着你完成本书中 24 章内容，你的网页将和那些网页一起出现在互联网上。这些课程将帮助你获得当今世界上最有价值的技能：精通HTML。
你真的能够自己学会创建顶级的网页，而不需要任何专用的软件，甚至比花在计划和等待高价的HTML高手的时间还要少？这本相对简短、容易理解的书能教你学会如何制作高水平的网页。
是的，实际上，通过本书头两章的学习，完全没有HTML经验的人也能够拥有一个可以发布在Web上的页面。
如何能快速地学会Web的语言呢？依靠示例。本书将HTML组织为简单的步骤，然后为你精确地说明每个步骤的处理方法。每个HTML代码示例在其生成的网页图像之前直接列出。你会看到HTML代码是如何运行的，并能获悉其运行背后的原理，然后就可以将它们应用在自己的页面中。
经过24章内容的学习，你将对出现在互联网上属于你自己的酷炫页面感到惊讶。
超越HTML
本书不仅包括HTML，因为HTML不是创建现代的Web内容所唯一需要了解的内容。本书的目标是在24个简单而又短小的章节中，教会你创建现代的、与标准兼容的网站所需要的所有技能。本书介绍了如下关键技能和技术。XHTML（可扩展的超文本标记语言）是网页创建的当前标准。本书的每个示例都是完全兼容 XHTML 的。在合适的地方，还会讲到 HTML 5。本书的所有示例已经用当今的主流Web浏览器的最新版本进行过兼容性测试。这些浏览器包括 Apple Safari、Google Chrome、Microsoft Internet Explorer、Mozilla Firefox和Opera。有许多包含层叠样式单（CSS）的内容，CSS 使你能够很好地控制布局、字体以及网页格式的各个方面，包括文本和图像。在创建令人瞠目的网页时，CSS比传统的HTML页面自身能做的多得多。例如，你知道CSS除了可以正常地查看Web外，还可以对具体信息进行处理，以便于打印吗？第10章～第12章为你介绍多媒体应用程序及其使用，其中包含了可以免费下载并免费试用业界标准的软件的地址。仅讲解技术内容是不够的，所以本书还包含了在建立网站以实现目标时所需要的建议。关键的细节——设计有效的页面布局，通过FTP软件将你的页面张贴到互联网上，组织和管理多个页面，让你的页面出现在主流互联网搜索网站查询列表的前列——都进行了足够深度的介绍，这可使你避免常常使初学者沮丧的困难。
对以上关键技术的讲解是使本书前 7 个版本成为畅销书的原因，而这个更新的版本——2005年以来本书的第一个版本——也没有差别。所有的示例都做了更新，而且大部分内容都重新修订过，以与新的示例和新技术相匹配。
直观的示例
本书的每个示例都分为两个部分。先给出构成HTML页面的文本内容，其中所有的HTML和CSS代码被突出显示。随后给出生成的页面，而且其显示效果与在所有主流浏览器中看到的相同。
你往往可以将示例改编为自己的网页，而完全不需要阅读跟随的文本。
本书中的所有示例都是与标准兼容的，可以用于 Apple Safari、Google Chrome、Microsoft Internet Explorer、Mozilla Firefox 和 Opera。虽然所有的屏幕截图取自于 Firefox，但是所有代码都已经在其他浏览器中测试过。
特殊元素
当你完成每章内容后，旁注可帮助你将刚学习的内容应用到自己的网页上。注意：注释框提供关于所讨论主题的附加信息。提示：节约你宝贵时间的提示和技巧被放置在提示框中，这样你可以快速地发现它们。警告：当有你需要注意的事项时，你将在警告框中看到。
问答、测验和练习
每一章都以一个简短的问答对话结束，这个对话提出了每个人希望自己敢提出来的“傻问题”。一个简短而完整的测验让你能够测试自己，以确认理解了该章介绍的所有知识。最后，一两个可选的练习让你有机会在继续之前实践你的新技能。第1章 理解Web的工作方式本章中你将学到：万维网（WWW）的简史“网页（Web Page）”的含义，以及该术语不能反映所涉及的所有内容的原因如何从你的个人计算机进入别人的浏览器选择Web托管提供商的方法不同的Web浏览器和设备类型对网面内容的影响
在学习复杂的HTML和CSS之前，先对这些技术有坚实的理解是很重要的，这些技术可以将这些普通文本文件转化为通过计算机或者手持设备浏览网页时看到的丰富的多媒体显示。
如果不使用 Web 浏览器查看，包含 HTML 和 CSS 的文件则看不出效果，除非有一个Web服务器，否则除了你自己以外，没有人能看到你的内容。Web服务器使你的内容可用于其他人，他们使用自己的Web浏览器导航到一个地址，并且等待服务器发送信息给他们。你将深入这个过程，因为你必须首先创建文件，然后将它们放到服务器上使其可用，并且必须确保你的内容将按照你的设想出现在最终用户那里。1.1 HTML 和万维网简史
很久以前，在人类还没有登上月球之前，一些富有远见的人决定看看自己能不能将几个主要的计算机网络连接在一起。我不再赘述这些人的名字和故事（到处都可以找到），但是最终的结果是“所有网络之母”，也就是我们对互联网的称呼。
直到1990 年，通过互联网访问信息还是一个相当技术性的事情。这非常困难，甚至连拥有博士学位的物理学家在尝试交换数据时都会感到沮丧。一位现在非常有名（并且被授予爵位）的物理学家 Tim Berners-Lee 爵士，发明了很容易地通过“超文本”链接交叉引用互联网上的文本的方法。
这不是一个新的思路，但是他的简单的超文本标记语言（HTML）能够兴旺起来，而更野心勃勃的超文本计划却失败了。超文本原意是指具有页面之间交叉引用的，以电子形式存储的文本。现在这个术语含义更广，指任何可以与其他对象链接的对象（文本、图像、文件等）。超文本标记语言是描述文本、图形和包含其他信息的文件组织和链接在一起的方式的一种语言。
到1993年，世界上只有100多台计算机能够提供HTML页面。这些互相链接的页面被称为万维网（WWW），许多 Web 浏览器程序被编写出来，使用户能够查看网页。因为 Web的流行，一些编程人员很快就写出能够和文本一起查看图形的浏览器。从那时开始，Web浏览器软件的持续发展和HTML和XHTML的标准化将我们带入了今天所生活的世界，现在有超过1.1亿台Web服务器提供对超过250亿个文本和多媒体文件的请求的服务。注意：关于万维网历史的更多信息，参见这个主题的Wikipedia 文章：http://en.wikipedia.org/wiki/History_of_the_Web。
这几段话确实是这段不寻常的时期的简单历史。现在学校里的新人根本不知道没有万维网的时代，信息“永远在线”的理念和无处不在的计算将推动我们的生活的各个方面不断前进。Web 内容的创建和管理不再只是少数技术方面的人士（你可以称呼他们“高手”）所拥有的技能，在本书的最后，你将看到这些技能是每个人都能掌握的，而不是高手们的特权。1.2 创建Web内容
你可能已经注意到“Web内容”（而不是“网页”）这个术语的使用——这么说内涵更丰富。尽管我们说“访问一个网页”，但真实的意思是“在我们的计算机上查看所有某个地址上的文本和图像”。我们阅读的文本，看到的图像由 Web 浏览器根据在单独的文件上找到的一些指令显示。
这些文件包含由HTML代码标示或者包围的文本，告诉浏览器如何显示文本——作为标题、作为段落、红色的字体等。一些HTML标示告诉浏览器显示一个图像或者视频文件而不是普通文本，这就把我带回到那个论点——不同类型的内容被发送到你的Web浏览器，所以简单地说“网页”不能涵盖。这里我们使用“Web内容”这个词来代替，以包含文本、图像、音频、视频和其他在线媒体。
在后面，你将学习链接到或者创建各种网站上找到的多媒体Web内容的基础知识。现在你需要记住的是你控制着用户访问你的网站时所看到的。从包含所显示的文本行或者告诉服务器传递一个图形到用户的Web浏览器的代码的文件开始，你必须计划、设计并且实现最终组成你的Web存在的所有部分。随着你在本书中的学习，只要你理解所有的小步骤，理解这个过程就不困难。
Web内容的最基本形式从简单的包含HTML和XHTML标记的文本文件开始。XHTML是另一种味道的HTML，“X”代表eXtensible（可扩展），随着你持续地学习这些课程，将会许多到更多关于它的知识。从一开始就应该知道的重要的事情是本书中的所有示例都是兼容HTML 4和XHTML 的，这意味着它们在现在和将来任何新一代的浏览器上的显示都是近似的。这是编写兼容标准的代码的好处之一，你不需要担心未来因为代码“不能正常工作”而必须进行修改。只要 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服务器读取这些文本和图像并且在你的屏幕上显示所发生的简单过程如下。
1．你的Web浏览器发出对位于http://www.google.com/地址的index.html文件的一个请求。index.html 文件不必是你在地址栏上输入的地址的一部分；你将在第 2 章中学习到更多关于index.html文件的知识。
2．在接收到对一个具体文件的请求后，Web服务器进程在它的目录中查找具体的文件，并且将该文件的内容发送回你的浏览器。
3．Web浏览器接受index.html文件的内容，这是由HTML代码标记的文本，并且根据HTML代码显示内容。在显示内容的同时，浏览器发现用于Google标识的HTML代码，这个标识在图1.2中可以看到。HTML代码类似以下代码：
这个代码标记提供了告诉浏览器显示该标识所需要的文件源位置（src）、宽度（width）、高度（height）、边框类型（border）以及辅助文本（alt）。你将通过稍后的课程学习更多关于特性的知识。
4．浏览器查看标记中的src特性以查找源位置。在这个例子中，图像logo.gif可以在读取HTML文件的相同Web地址（www.google.com）中找到。
5．浏览器请求http://www.google.com/logos/logo.gif上的文件。
6．Web服务器解释该请求，寻找该文件，并且将该文件的内容发送给请求它的浏览器。
7．Web浏览器在你的显示器上显示该图像。
正如你在Web内容交付过程的描述中看到的，Web浏览器所作的只是像你可以看到内容的一个像框。浏览器组合Web内容部件并且按照文件中的HTML命令安排这些部分。
你还可以在“本地”或者你的硬盘驱动器上查看Web内容，而不需要一个Web服务器。内容读取和显示的过程和前面列出的浏览器查找并且解释 HTML 文件的代码和内容的过程相同，但是旅程较短，浏览器在你自己的计算机硬盘上而不是远程机器上寻找文件。解释嵌入在文件中的基于服务器的编程语言需要一个Web服务器，但是这超出了本书的范围。实际上，你可以在没有Web服务器的情况下完成本书的所有课程，但是在你之外没有人能看到你的杰作。1.4 选择Web托管提供商
尽管你可以在没有Web服务器的情况下完成本书的所有课程，但是我们建议你使用Web服务器。不要担心——得到一个托管提供商一般是个快速、轻松而相对经济的过程。实际上，你可以以稍高于本书的价格得到自己的域名和一年的Web托管服务。
如果你在搜索引擎当中输入 Web hosting provider（Web 托管提供商），你将得到上百万个结果和无穷的赞助搜索结果（也被称为广告）。世界上没有这么多 Web 托管提供商，但是看上去好像有。即使你关注托管提供商的一个受控列表，它也可能太长——特别是如果你寻找的是你自己或者你的公司或者组织放置一个简单的网站的地方时。
你将会希望在寻找一个提供商时缩小范围并且选择最符合你的需求的提供商。Web托管提供商的一些选择标准如下。可靠性/服务器“正常运行时间”——如果你有一个网站，你希望确保人们能够始终到达它。客户服务——寻求多种联络客户服务的方法（电话、E-mail、聊天工具）以及常见问题的在线文档。服务器空间——托管套件是否包含足够的服务器空间来存储所有你计划包含在网站（如果有）的多媒体文件（图像、音频、视频）。带宽——托管套件是否包含足够的带宽，使所有访问你的网站并且下载文件的人可以放心地进行，并且你不需要付出额外的钱？域名购买和管理——套件是否包含一个自定义的域名，或者你在托管的账目之外需要必须单独购买和维护你的域名？价格——不要为托管付过多的钱。你将会看到很宽的价格范围并且应该立即对“差异是什么？”感到奇怪。差异往往和服务质量无关而取决于公司的开销和公司认为能侥幸成功的要价。一个经验法则是，如果你租用的基本托管和域名套餐每年花费超过75美元，你就可能付得太多了。
这里有3家可靠的Web托管提供商，它们的基本套件在相对低的价格上包含了丰富的服务器空间和带宽（还有域名和额外的好处）。如果你不了解这些 Web 托管提供商，至少你可以将它们的基本套件描述作为你求购的指南。A Small Orange（http://www.asmallorange.com）——它们的“极小”和“小”主机套件是新的Web内容发布者最好的起点。DailyRazor（http://www.dailyrazor.com）——它们的 RazorLIMIT 和 RazorSTARTER托管套件是全功能而可靠的。LunarPages（http://www.lunarpages.com）——基本托管套件适合于所有个人和小企业网站。
好的托管提供商的一个特性是它们为你提供“控制面板”，用来管理你的账户的各个方面。如图 1.3 所示，显示了我自己在 Daily Razor 的 RazorPRO 主机账户的控制面板。许多Web托管提供商提供自己的特殊控制面板软件，或者一些设计相似的控制面板——清晰标示的图标使你能够进行配置和管理账户。图1.3 一个控制面板实例
你可能永远不需要使用控制面板，但是它可以使你简化数据库和其他软件的安装，查看Web统计，以及E-mail地址的添加（还有许多其他功能）。如果你能够按照说明书进行，就能管理自己的Web服务器——不需要特殊的培训。1.5 用多种Web浏览器测试
刚刚讨论了Web内容交付的过程和Web服务器的获得，回到使用多种Web浏览器测试你的网站看上去有点奇怪。但是，在你离开并且学习所有关于使用HTML和CSS创建网站的知识之前，要记住这个非常重要的事实：你的网站的每个访问者可能使用和你不同的硬件和软件配置。他们的设备类型（台式机、笔记本、智能电话、iPhone）、屏幕分辨率、浏览器类型、浏览器窗口大小、连接速度——记住，你不能控制访问者查看你的网站时的任何方面。
尽管所有Web浏览器以总体相同的方式处理信息，但是它们之间有些特殊的差异导致在不同的浏览器中显示的结果不总是相同。即使使用相同的浏览器的相同版本也可能由于选择不同的显示选项和/或改变视窗大小而改变页面的外观。所有主要的浏览器都允许用户用自己的选择覆盖网页创作者指定的背景和字体。屏幕分辨率、窗口大小和可选的工具栏也可能改变页面第一次出现在屏幕上时所显示的部分。你只能确保你编写了兼容标准的HTML和CSS。
在任何情况下，都不要花费时间去设计在自己的计算机上看上去“完美”的东西——除非你愿意在朋友的计算机上、街上的咖啡店里的计算机上或者你的iPhone上查看时感到失望。
你应该始终用尽可能多的Web浏览器来测试网站，如下所示。Apple Safari（http://www.apple.com/safari/）for Mac and WindowsGoogle Chrome（http://www.google.com/chrome）for WindowsMozilla Firefox（http://www.mozilla.com/firefox）for Mac, Windows and LinuxMicrosoft Internet Explorer（http://www.microsoft.com/ie）for WindowsOpera（http://www.opera.com/）for Mac，Windows and Linux/UNIX1.6 总结
本章为你介绍了使用HTML标记文本文件以生成Web内容的概念。你还学到了Web内容有比“页面”更多的含义——Web内容还包含图像、音频和视频文件。所有这些内容存在于一个Web服务器上——一台通常远离你的计算机的远程机器。在你的计算机或者其他设备上，你使用Web浏览器请求、读取，并且最终在你的屏幕上显示Web内容。
试读结束[说明：试读内容隐藏了图片]