HTML：主题结构

如果没有Web设计的两大支柱HTML和CSS, JavaScript一筹莫展。很多程序员提到，3种语言构成了一个Web页面的三个“层”：HTML提供了结构层，以一种更有意义的方式来组织图片和文字等内容；CSS（Cascading Style Sheet，层叠样式表）提供表现层，使得HTML中的内容很好地显示；JavaScript添加行为层，给Web页面带来生气，使它能够和Web访问者交互。

换句话说，要掌握JavaScript，我们还需要很好地理解HTML和CSS。

提示：要了解HTML和CSS的完备介绍，请参阅Elisabeth Freeman和Eric Freeman编写的《Head First HTML with CSS and XHTML》。如果需要CSS的技巧性主题的深入介绍，请参阅David Sawyer McFarland所著的《CSS：The Missing Manual》（这两本书都由O'Reilly出版）。

HTML（HyperText Markup Language，超文本标记语言）使用叫做标签的简单命令来定义Web页面的各个部分。例如，下面的HTML代码创建了一个简单的Web页面：

＜！DOCTYPE html＞

＜html＞

＜head＞

＜meta charset=utf-8＞

＜title＞Hey, I am the title of this web page.＜/title＞

＜/head＞

＜body＞

Hey, I am some body text on this web page.

＜/body＞

＜/html＞

这个示例可能不是很令人兴奋，但是它具备了一个Web页面所需的所有基本元素。这个页面开始的第一行是文档类型声明，或者简称为doctype，它说明了页面的文档类型以及它符合哪个标准。HTML实际上有几种不同的版本，并且对于每个版本使用不同的doctype。在这个例子中，该页面的doctype是HTML 5；一个HTML 4.01或XHTML文档doctype更长一些，并且还包含了一个URL，它指向互联网行的一个文件，其中包含了该类型文件的定义。

实际上，doctype告诉Web浏览器如何显示该页面。在Internet Explorer中，doctype甚至可以影响到CSS和JavaScript如何工作。如果doctype不正确或者缺少doctype，我们可能会发现脚本有很多跨浏览器的差别而最终四处碰壁。换句话说，总是要在HTML中包含一个doctype。

当今有5种常用的HTML类型：HTML 4.01 Transitional、HTML 4.01 Strict、XHTML 1.0 Transitional、XHTML 1.0 Strict和HTML5（在发展中的新类型）。这5种类型都很相似，只是在如何书写标签以及允许哪些标签和属性方面有些细微区别。大多数Web页面编辑程序都在创建新的Web页面的时候加入了相应的doctype，但是，如果你需要了解每种doctype如何编写的示例，可以在www.webstandards.org/learn/reference/templates看到不同类型的页面的模板。

使用哪种类型的HTML并不重要。所有当前的Web浏览器都理解每种doctype，并且可以使用5种文档类型中的任何一种来显示Web页面而不会有任何问题。使用哪种doctype，不会像确保页面验证（参见后面的“快速熟悉：验证Web页面”部分）正确那么重要。

注意：XHTML曾经作为Web设计师的下一件大事宣布。尽管我们仍然发现有人认为只应该使用XHTML，但是，风向已经开始转换了。W3C已经停止了XHTML的开发以支持HTML 5。你可以通过阅读《HTML 5：The Missing Manual》（Matthew MacDonald著）或《HTML 5：Up and Running》（Mark Pilgrim著）（都由O'Reilly出版）来了解HTML 5。

HTML标签如何工作

在前面的示例中，和我们所能看到的任何Web页面的HTML代码一样，可以看到大多数的命令都成对地出现，并且包含一段文本或其他命令。尖括号之间的内容，也就是那些标签，都是用于告诉Web浏览器如何显示页面的指令。标签就是超文本标记语言的“标记”部分。

开始标签告诉浏览器指令从哪里开始，而结束的标签告诉指令从哪里结束。结束标签总是在第一个尖括号符号（＜）之后包含一个斜杠（/）。例如，标签＜p＞表示一段文本的开始，而＜/p＞表示其结束。

对于功能正常的Web页面，至少必须包含如下3个标签：

·＜html＞标签出现在Web页面刚开始的地方（在doctype之后），并且在Web页面末尾再次出现（带有一个斜杠）。这个标签告诉Web浏览器，这个文档中包含的信息是使用HTML编写的，而不是用其他某种语言编写的。页面的所有内容，包括其他的标签，都出现在开始和结束＜html＞标签中。

如果把Web页面看做一棵树，＜html＞标签就是它的树干。从树干伸展出来的是两个分支，分别代表任何Web页面的两个主要部分，即标题和正文。

·Web页面的标题包围在＜head＞标签中，它包含了页面的标题。它还提供了可供浏览器和Web搜索引擎使用的其他不可见的信息（例如，搜索关键字）。此外，标题还可以包含Web浏览器用来显示Web页面和增加交互性的信息。例如，把CSS放入到文档的标题部分。文档的标题也经常包含到JavaScript程序的链接和到其他JavaScript文件的链接。

·Web页面的正文包含在一对＜body＞标签中，其中包括了出现在浏览器窗口中的所有信息，包括标题、文本、图片等。

在＜body＞标签内，我们通常可以看到如下的标签：

·用＜p＞标签告诉Web浏览器一段文本开始，而用＜/p＞表示一段文本结束。

·＜strong＞标签突出显示文本。如果把某段文本包含在其相对的标签＜/strong＞中，将会得到粗体字体。HTML代码段＜strong＞Warning！＜/strong＞告诉Web浏览器以粗体显示单词“Warning！”。

·＜a＞标签或者叫做锚点标签，在Web页面中创建了一个超链接。当单击的时候，超链接可以导向Web上的任何地方。通过在＜a＞标签中放置一个Web地址，告诉浏览器该链接指向何处。例如，可以输入＜a href="http：//www.missingmanuals.com/"＞Click here！＜/a＞。

浏览器知道，当访问者单击了“Click here！”的时候，它应该跳转到Missing＆nbsp；

Manual Web站点。这个标签的href部分叫做属性，而这个URL（Uniform Resource Locator，统一资源定位符或Web地址）是值。在这个例子中，http：//www.missingmanuals.com是href属性的值。

快速熟悉验证Web页面

正如前面所介绍的，Web页面的doctype表示用来创建Web页面的HTML或XHTML的类型。规则根据类型而略有不同，例如，和HTML 4.01不同，XHTML不允许拥有一个未结束的＜p＞标签，并且要求所有的标签名和属性都是小写的（例如，＜a＞而不是＜A＞）。HTML 5包含了新的标签，并且允许你使用HTML或XHTML语法。由于每个HTML版本使用不同的规则，因此总是需要验证Web页面。

HTML验证器是确保Web页面编写正确的一个程序。它检查页面的doctype，然后分析页面中的代码看它是否符合doctype定义的规则。例如，验证器会标记出错误拼写的标签名或未结束的标签等错误。万维网联盟（World Wide Web Consortium, W3C）是负责Web上使用的众多技术的组织，它有一个免费的在线验证器，位于http：//validator.w3.org。我们可以把自己的HTML代码复制并粘贴到一个Web表单，上传到一个Web页面，或者把验证器指向Web上已经存在的一个页面，验证器会分析HTML并报告该页面是否有效。如果有任何错误，验证器告诉你错误是什么以及错误发生在HTML文件的哪一行。

如果使用Firefox，可以从http：//users.skynet.be/mgueury/mozilla下载HTML Validator插件。这个插件允许我们直接在Web浏览器中验证一个页面，只要打开这个页面（甚至直接位于计算机上的一个页面），验证器就会指出HTML中的错误。在Safari中也有一个类似的插件，叫做Safari Tidy，可以在http：//zappatic.net/projects/safarivalidator.找到。

验证HTML不只是为了保证良好的形式，它也是确保JavaScript程序正确工作所必需的。很多JavaScript涉及操作一个Web页面的HTML：例如，标识一个特定的表单字段，或者在特定位置放置新的HTML（例如一条错误消息）。为了让JavaScript能够访问和操作Web页面，HTML必须保持正确的工作顺序。忘了结束一个标签，多次使用同样的ID名，或者不正确地嵌套HTML标签，都可能使得JavaScript代码不能正确工作或者根本不工作。