前    言

　　超文本标记语言(HTML)是互联网底层的标记语言。它把世界上几乎所有的网站都连接在一起，大如微软这样的大型公司网站，小如当地学校用于布置课堂作业的单一网页。

　　千万别被“标记语言”这个词汇吓到。标记语言是用来注释或标识普通文字的，以方便浏览器知道如何对普通的文字进行格式化，使它们在网页上可以显示得更好看。标记语言的入门是非常容易的——实际上，你用几分钟就可以创建一个简单的网页。一些功能强大的软件工具可以准确地显示网页的实际效果，即“所见即所得”(WYSIWYG)，可以帮助提高编写网页的速度。其实你真正所需要的就是一个非常普通的文本编辑软件，比如微软公司(Microsoft)的记事本软件。你也不需要特殊的软件或大量的培训。

　　在本前言中，你会学到一些HTML基础知识。你会了解HTML如何把普通的文本变成非常吸引人的格式，如何嵌入图像和超文本链接，如何使人们用任何一款文本编辑软件来创建网页。我们也会讲解什么是层叠样式表(CSS)以及层叠样式表如何帮助大型网站保持整体格式的统一。你也将了解HTML4、XHTML和HTML5之间的不同，从而决定自己的代码遵循哪个版本的HTML。最后你还将学到本书中所使用的一些约定，它们用于标明特殊的用途，例如注释、提示、注意事项以及数据文件的引用。

什么是HTML

　　简单来说，网页(或HTML文档)是一个用超文本标记语言(HTML)编码的普通文本文档，这种文档的内容可以在浏览器中很好地展现出来。下面是对几个HTML专业名词的解释。

* 超文本是一种文本，点击它后便可以从一个文件跳到另一个文件。它是指网页之间互相连接的功能。

* 标记是一种标记符，对普通文档进行布局及按常规进行格式设置。从字面上解释就是被标上标记符的普通文档。

* 语言是指HTML实际上是一种可以编程的语言。

提示  当人们想到计算机编程时，通常会想到需要编译的程序。编译型编程语言通过工具将人类可读的程序代码转换成可运行的文件(通常这些文件带有EXE或COM扩展文件名)， 最后将这些文件发布给用户使用。相反，HTML是一种解释型程序语言。也就是说，发布给用户的程序是人类可读的。用于打开此程序的软件负责运行它。用于网页的HTML代码存在于文件当中。 每次当你用Web浏览器打开一个网页，浏览器就会处理文件中的HTML代码。

了解HTML标记符

　　HTML?文件里的代码由标记符内包含的文本组成。这些标记符指示应该在什么地方进行格式设置，版面该如何显示，什么图片该出现在什么位置，等等。

　　例如，你希望有些字的字体是斜体，如下所示：

所有物品打折优惠

　　在HTML中，不像Word那样有一个斜体按钮。因此，你需要在希望是斜体的字上贴上一个标记符。斜体字的标记符代码是<i>，斜体字结束的标记符代码是</i>：

<i>所有物品</i>打折优惠

这是一个双标记符的例子。双标记符用起始标记符和结束标记符将文本封装起来。在本例中是<i>和</i>。注意结束标记符中的反斜杠，它将起始标记符和结束标记符区分开来。在双标记符中，每一个起始标记符总有一个对应的结束标记符。

　　如果想知道标记符系统是怎么形成的，你需要了解早期的互联网。那时人们还主要通过拨号调制解调器来接入网络。网速的范围是在2400 bps到28.8?kbps。这个速度非常、非常慢。文本文件的传输远快于代码文件。所以任何信息共享系统要想变得非常流行，都不得不以文本文件为基础。否则，人们在等待网页载入时，会非常的无聊。

　　人们在设计网页时，当然希望网页是非常有吸引力的。但是他们不能用自己的文字处理软件来排版网页；因为不同文字处理软件的排版方式是不同的。而且我们也不可能知道网站的访问者用哪种文字应用程序。而且文字处理过的文件大小通常远远大于普通的文本文件。

　　互联网的发明者开发出了一个有效的解决方案。他们创造了一个应用程序——Web浏览器——用来将普通的文本代码翻译成排版指令，而不是将排好版的网页在互联网中传输。普通文本格式的文本可以快速有效地传输，然后在本地计算机上处理后生动地显示出来。

　　HTML可以非常好地将文本进行各种类型的排版，然而有些网站设计者希望在网页中加入图像。<img>标记符用来实现这一功能。网页设计者可以用这个标记符来指定图像文件在服务器上的位置。当网络浏览器读到这个标记符，就会请求从服务器中下载相应的图像，并显示在网页上。(你会在第9章学习如何插入图像。)

　　<img>标记符与<i>标记符有很多不同的地方。<img>是单标记符，也就是说它没有结束标记符。而且<img>含有自己的属性。属性就是在标记符内的文字，它带有用来定义标记符表现的信息。比如，对于<img>标记符，要指定图像的来源，简写为src，就像下面的例子：

<img src="tree.gif">

　　这个<img>标记符用src=属性来指定被显示的图片文件tree.gif。

　　很多标记符都带有属性，有些属性是必需的，有些是可选的。在本书的练习中，你可以看到很多的例子。

　　通过HTML，你可以创建从一个网页到另一个网页的超文本链接。当网站的访问者点击这个链接时，Web浏览器就会载入所指定的网页，或跳到同一网页中所标注(书签)的一个位置。你会在第5章中学习如何创建超文本链接。

　　超文本链接的标记符是双标记符<a>。 但是如果没有指定文件或跳转地址的属性，大多数人可能根本无法认出它来。例如，想创建一个文字是“Click Here”的超文本链接，当点击这个链接时，网页会跳转到index.htm文件，它的代码则是:

<a href="index.htm">Click Here</a>

　　当然HTML还有很多内容。但是前面提到的内容就是基本的工作原理。普通的文本加上标记符就能指定在什么地方该使用什么元素，例如排版、超文本链接和图像等。然后网络浏览器将这些标记符翻译，并据此来排版和显示网页。当然，这里的关键是知道该用什么标记符，在什么地方用合适，它们需要哪些属性，等等。这就是本书的主题。

理解层叠样式表

　　使用早期版本HTML的开发人员在开发大型网站时经常会发现有大量的重复性工作要做，这让他们感觉非常郁闷。试想一个具有200个网页的网站上，所有的网页有着同样的设计和布局。如果需要对整个网站进行修改，开发人员不得不分别编辑这200页中的每一页。

　　后来版本的HTML通过支持层叠样式表来解决这个问题。和文字处理软件或网页排版软件中的样式模板原理一样，开发人员可以用层叠样式表来指定某种标记符的格式和样式，层叠样式表通常会存放在另一个单独的文档中，它可以应用于多个网页。现在如果你需要改变一些网页的样式，你只需要对层叠样式表进行编辑，所有网页就会自动改变了。

　　虽然还是可以用旧的方法来排版文件——你将在本书中学到一些，但是现在的网站开发人员主要依靠层叠样式表来排版网页，并且XHTML也要求用层叠样式表来排版。这听上去貌似很麻烦，但是当你要开发一个有很多网页的网站时，层叠样式表所带来的方便远远超过设置这些样式表所带来的麻烦。

为什么用记事本软件来学习HTML

　　本书主要介绍HTML基础编程，我们使用了最原始的方法：用记事本软件来创建纯文本文件。也许你会想，现在的市场上有大量非常好的网页编写软件，为什么我们要用这种方法呢？

　　简单地说，自己写代码是学习HTML的最好方法。在本书中，你会从最基本的每一行代码开始来创建网站。这种方法也许比较慢，也没有那些带图片的软件有意思，但是这一个非常好的训练。

　　本书最后一章展示了如何使用Microsoft Expression Web来创建Web内容，而且最终你也许会选择使用这样的程序。但是，如果一开始如果用记事本来学习HTML编程，你会成长为一名更优秀的网页设计师，并更懂得网页设计程序的内部机理。

选择HTML的版本

　　虽然不同版本的HTML总体来说相同之处多于不同之处，但是它们对一些类型的内容会使用不同的标记符，特别是从书中所覆盖的初级内容中也可以看到这一点。下面对可能会遇到的不同HTML版本做一个简单的比较。

* HTML4  一种非常稳定并被广泛接受的代码集。如果浏览器的兼容性非常重要，那么HTML4是比较理想的选择。

* XHTML  一种非常严谨并用XML(eXtensible Markup Language，可扩展置标语言)创建的符合HTML4标准的语言。XHTML编码使用了HTML4相同的代码。因此它与所有支持HTML4的浏览器兼容。(更多关于XML的信息，请参考下一页的补充内容。)

* HTML5  一种基于HTML4的代码集。它在HTML4的基础上进行了一些修改来增加一些新的功能。HTML5在应用程序的处理和多媒体方面有了巨大的改进，但很多这些功能不在本书的讨论范围之内。就本书的核心内容——基本的编程而言，最大的区别在于，对于一些以前只能使用非常通用的代码来处理的内容，HTML5增加了一些新的特定的代码。例如，HTML5用<audio>和<video>加入了多媒体内容，然而HTML4只是用通用的<embed>标记符来加入所有种类的多媒体内容。

　　本书的内容是关于HTML5的，所以在编写代码时选择用HTML5的标记符似乎是顺理成章的。但是在现实的世界中，这种选择并不是那么容易。

　　一个好的浏览器应该支持所有的标记符和所有版本的HTML，使网站的访问者看不出不同版本的HTML之间的差别。但是由于HTML5非常新，所以并不是所有的浏览器都已经更新到可以支持HTML5的版本。如果访问者使用一个非常老的计算机，他们很有可能并没有把浏览器更新到最新的支持HTML5的版本。

提示  http://caniuse.com网站列出了当前流行的几种浏览器中每一版本所支持的HTML5的功能。

　　在做本书的练习题时，你所写的代码会是基于HTML5的，但是有的时候HTML5的代码会在某些浏览器上出现问题，因此我也会介绍一些替代的解决方案。你将学习两种方法来创造某种效果，这样一来，在现实工作中遇到这些情况时，你可以选择适合你的代码。

什么是XML和XHTML?

　　有一种和HTML相关的编程语言叫可扩展标记语言(eXtensible Markup Language，XML)。在这种语言中，开发人员可以自己定义标记符。例如，它可以定义每个数据区的标记符，所以它被广泛地应用于网络数据库中。因为XML可以被完全自行定义，所以程序员可以用它来创建几乎其它所有的标记语言，所需要做的就是重新创建该标识语言中所有被正式接受的标记符。W3C就是这样做的：他们就是在XML中重新创建了整个HTML 并且称其为可扩展超文本标记语言。1.0版于2001年发布，现在的版本是于2004年发布的2.0版。

　　XHTML就是用XML实现的HTML语言，它支持更多的语言功能。因为它在功能方面几乎与HTML相同，所以基本的标记符类也是相同的，你可以同时学习HTML和XHTML。你也可以用XHTML来创建新的标记符和其扩展部分，这对于高级的网站开发人员来说是一个非常有价值的特性。

　　关于XHTML，有一个地方是需要我们注意：它不允许任何的错误。例如，在HTML中，严格来说，你应该用<p>标记符开始每一段文字，用</p>标记符来结束。在HTML中，如果你不愿意(或者你忘记了)用结束标记符</p>也没有什么问题。但在XHTML中就不允许这样了。XHTML中有很多这样苛刻的规定。

　　曾经有一个阶段XHTML被认为最终会代替HTML4，但是由于互通性的问题，这件事情并没有发生。反而HTML5被认为会替代HTML4。本书并不会特别介绍XHTML，但是所介绍的大部分内容都可以应用于XHTML编码。 　　

为什么选择HTML5 

　　简单的回答是，选择HTML5是因为它是对未来的一种投资。在几年内，它将成为几乎所有网站的基本标准。稍微复杂点的回答是，因为它使代码更加干净，也更加容易编写。网页技术突飞猛进的发展，主要是由于个人连接网络的速度大幅提高，用户、网页设计师、程序员对网页的功能要求也越来越高，例如更精准的字体和布局控制，在不同设备上的更好显示包括从移动手机到大型台式计算机，更好的图像质量，更多的互动、视频、音频、动画以及更好地支持不同的图片和文件格式。因为大多数用户有高速的网络连接，所以他们不再需要为载有视频和音频的网页等待很长的时间。这也意味着更多的网站将带有视频和音频的内容。

　　HTML?当初并不是为多媒体内容传输所设计的，所以越来越多高端的专业网站已经转移到以HTML为基础的其他语言和技术来发送这些内容。例如Javascript、Java和ASP。

　　在HTML5中增加一些重要的新标记符使视频、音频和应用程序的整合更加流畅和可靠。你将在第15章和第16章学习到很多这种新的标记符，包括<audio>、<video>和<canvas>。

　　HTML5去掉了一些旧的标记符。例如，在HTML4以前的版本中设定字体的老方法是使用<font>标记符。现在，大多数人都使用层叠样式表来指定字体，总之已经有很长时间没什么人使用<font>标记符了。HTML5正式将它去掉了。

　　HTML5去掉的最重要的事情之一是通过用<frame>和<frameset>指令来创建多框架网站。当然你还是可以创建含有多个分区的，只是使用表格和区域，可以更巧妙地来处理分区。第11章介绍区域——大部分网站设计人员喜欢这种更新的方法。第12章和第13章将介绍表格的内容，表格也还是一个可接受的方案，并受很多业余网页设计人员喜爱，因为他们熟悉类似文本软件中表格的处理方法。 

最低系统要求

　　开发HTML没有最低系统要求，你可以在任何种类的计算机和操作系统中，使用任何文本编辑程序来开发HTML程序。这也是HTML的优势。本书使用记事本作为文本编辑器，但是你可以使用你喜欢的任何编辑器。

　　为了进行测试，你需要使用与HTML5兼容的Web浏览器。最新的Google Chrome和火狐(都提供在线免费下载)以及IE9以上的版本都具有这种功能。

使用练习文件

　　在每一课的练习之前，都有一段或几段文字列出该练习所需要的文件，并解释在开始做练习之前需要准备的文件。这些练习文件可以从http://oreilly.com/catalog/0790145302083/下载。对被压缩下载的文件进行解压缩时，它会针对每一章创建相应的文件夹，对应于每个练习也会创建出相应的子文件夹。

　　下表列出每章的练习文件夹及其包含的子文件夹。每章的练习文件也包含答案子文件夹。该文件夹中有该章已经完成的练习文件。

章(Chapter) 文件夹(Folder) 子文件夹(Subfolder) 第1章：

编辑和查看HTML文件 01Editing 没有子文件夹  第2章： 

设置文档结构 02Structure CreatingParagraphs

PublishingFiles

SpecifyingKeywords

SpecifyingTitle 第3章：

用标记符来格式化文本 03Format ApplyingBold

ApplyingSuperscript

ConfiguringSettings

CreatingHeadings

FormattingQuotes

UsingMonospace

续表

章节(Chapter) 文件夹(Folder) 子文件夹(Subfolder) 第4章：

使用列表和背景 04Lists ChoosingColors

CreatingGlossary

InsertingCharacters

InsertingLines

NestingLists

SpecifyingImages 第5章：

创建超文本链接和锚 05Links CreatingAnchors

CreatingHyperlinks

LinkingEmail

LinkingOther 第6章：

样式表基础 06Styles ConstructingRules

CreatingClasses

CreatingExternal

CreatingNested

StylingHyperlinks 第7章：

使用样式表改变文本格式 07Text AdjustingSpacing

ApplyingBold

ApplyingStrike

CreatingSpan

SelectingFont

SelectingSize 第8章：

使用样式表改变段落格式 08Paragraphs AddingBorders

AdjustingHeight

Indenting

SettingAlignment 第9章：

显示图像 09Graphics CaptioningFigures

ClearingImages

CreatingHyperlinks

InsertingImages

SizingImages

UsingAlt

UsingThumbnails 第10章：

创建导航机制 10Navigation CreatingGraphicBar

CreatingImageMap

CreatingTextBar

Redirecting

续表

章节(Chapter) 文件夹(Folder) 子文件夹(Subfolder) 第11章：

创建区域布局 11Divisions CreatingDivisions

FormattingDivisions

PositioningDivisions

UsingSemantic 第12章：

创建表格 12Tables CreatingTable

SettingWidth

SpanningCells

SpecifyingSize

UsingTables 第13章：

设置表格格式 13FmtTables ApplyingBackground

ApplyingBorders

ChangingPadding 第14章：

创建用户表单 14Forms CreatingButtons

CreatingForms

CreatingLists 第15章：

嵌入音频和视频 15AudioVideo 第16章：

加入JavaScript和外部内容 16Canvas 第17章：

HTML和Microsoft Expression Web 17Expression ViewingPage 如何得到帮助

　　我们已经尽了最大努力确保本书的准确性，如果你的确遇到了问题，请通过下节所介绍的方式与有关方面联系。

获得本书帮助

　　如果你的问题或困扰与本书或本书的练习文件有关，请先参考勘误表，它的在线访问地址是http://oreilly.com/catalog/0790145302083/，这里提供了一些已经知道的错误和更正信息。如果你在勘误表中没有找到答案，请把你的问题发到O’Reilly Media客户服务部，电子邮件地址是mspbooksupport@oreilly.com。

本书的约定和特色

　　了解“循序渐进”(Step by Step)系列书所使用的特殊说明、按键、要点击的按钮等，可以帮助你节省阅读本书的时间。

约  定 意  思 设置 这个词会出现在Step by Step练习之前的段落开始处。它指出在开始练习之前需要检查或执行的操作 使用打开 这些词出现在Step by Step练习之前的“设置”小节。它们提醒你在练习中所需要使用的练习文件 清理 这个词汇出现在Step by Step练习之后的段落开始处。它指示在进行下个题目之前所要关闭的正在打开的文件或正在运行的程序 1. 每一个题目中步骤的序列号，它会带你完成要自己动手做的练习题 *  小圆点项目符号说明这个练习只有一步 疑难排解 这些段落通常告诉你如何解决常见的、也许会阻止你完成练习的问题 提示 这些段落会给你一些有用的提示或捷径，帮你更容易完成练习 重要 这些段落会指出完成程序流程所需要知道的信息 注释 这些段落提供补充或有关的信息 兼容性 这些段落解释另一种可以有更好向后兼容的编码方式 CTRL + C 两个按键名中间的加号表示需要持续按住第一个按键，然后同时再按第二个按键。 例如，“按CTRL + C”代表持续按住CTRL键同时按C键 用户界面元素 练习中，程序元素的名称，例如按钮、指令和对话框 用户输入 任何需要键盘来输入的东西 专业术语 书后词汇表所解释的术语 　　

下一步

　　打开第1章，开始阅读并完成练习。本书的章节顺序是按照教课内容的顺序而设计的，但是如果你只是需要补充一些HTML知识，也可以选择性地阅读。

XII    HTML5从入门到精通 

前言    XIII