HTML5权威指南
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.3 创建HTML文档

元素和属性不会孤立存在，它们是用来标记HTML文档内容的。要创建一个HTML文档，最简单的方法是创建一个文本文件，并将其文件扩展名设置成为这类文件规定的.html。这个文件可以直接从磁盘载入浏览器，也可以从Web服务器载入（在本书中，我一般都要使用Web服务器。我的Web服务器名为titan，这个名字经常出现在书中屏幕截图的浏览器窗口中）。

浏览器和用户代理

在本章（及本书大部分章节）中，HTML文档都是针对浏览器创建的。这样看待HTML文档较为省事，而且HTML文档最常见的使用方式也是用浏览器查看。但是还有其他情况需要考虑。用于处理HTML文档的各种软件有一个共同的名称叫做用户代理（user agent）。浏览器是最流行的用户代理，但不是唯一的一种。

非浏览器类用户代理现在还很少，以后可能会多起来。在HTML5中更加强调将内容与呈现形式分开，正是因为认识到HTML内容并不总是会被显示给用户看。本书尽管说的还是浏览器（因为这是最重要、最强势的一类用户代理），但是最好还是记住：你的HTML文档有可能会给别的一些软件处理。

HTML文档具有特定的结构，最起码要有一些关键性的元素。本书绝大多数示例均为完整的HTML文档，这样读者很快就能轻松看出元素的应用方式和效果。为了给你一个初步印象，在此我要先带你看一个基本的HTML文档。代码清单中所有的HTML元素都会在后面各章得到详细讲解，本章提供了它们的相关参照信息。

HTML与XHTML的对比

尽管本书讲的是HTML，但我要是不提一下XHTML（在HTML前面加了一个X）的话，那就太不负责了。符合HTML语法的文档不一定符合XML语法，因此用标准的XML解析程序处理HTML文档可能会遇到麻烦。

为了解决这个问题，可以使用XHTML，它是HTML的XML序列化形式（这就是说，以符合XML规范的方式来表达文档的内容以及HTML元素和属性，以便XML解析程序处理）。此外，也可以创建既是有效HTML文档也是有效XML文档的多语文档（polyglot document），不过这要求使用HTML语法的一个子集。本书不讲XHTML，想了解更多XHTML方面的信息的读者可以参阅这个网址：http://wiki.whatwg.org/wiki/HTML_vs.XHTML。

3.3.1 外层结构

HTML文档的外层结构由两个元素确定：DOCTYPE和html，如代码清单3-11所示。

代码清单3-11 HTML文档的外层结构

        <! DOCTYPE HTML>
        <html>
            <! -- elements go here -->
        </html>

上例中的DOCTYPE元素让浏览器明白其处理的是HTML文档。这是用布尔属性HTML表达的：

        <! DOCTYPEHTML>

紧跟着DOCTYPE元素的是html元素的开始标签。它告诉浏览器：自此直到html结束标签，所有元素内容都应作为HTML处理。用了DOCTYPE元素之后又接着使用html元素看起来可能有点奇怪，其实早在HTML标准小荷才露尖尖角的时候，具有同等地位的还有一些别的标记语言，文档中可能会混合使用多种标记语言。

如今HTML已成为占绝对优势的标记语言，即使在文档中省略DOCTYPE和html元素，绝大多数浏览器仍会假定自己处理的是HTML文档。不过这并不意味着不必再用这两个元素。这是因为它们有着重要的用途，而且依赖浏览器的默认行为模式就像轻信陌生人一样不靠谱——多数情况下事情很顺利，可是冷不防就会出大漏子。关于DOCTYPE和html元素详见第7章。

3.3.2 元数据

HTML文档的元数据部分可以用来向浏览器提供文档的一些信息。元数据包含在head元素内部，如代码清单3-12所示。

代码清单3-12 在HTML文档中添加head元素

        <! DOCTYPE HTML>
        <html>
<head>
<!-- metadata goes here -->
<title>Example</title>
</head>

</html>

这个清单中的元数据少到不能再少，只有title元素一项。按说HTML文档中都应该包含title元素，但是没有的话浏览器通常也不会在意。大多数浏览器把title元素的内容显示在其窗口的标题栏上或用来显示文档的标签页 IE中称为选项卡。——译者注的标签位置上。第7章会详细说明head元素和title元素，以及可以放在head元素中的所有其他元数据元素。

提示

代码清单3-12也演示了HTML文档中注释的写法。注释以标签<! --开头，以-->结尾。浏览器会忽略这两个标签之间的一切内容。

除了可包含用于说明HTML文档的元素，head元素还能用来规定文档与外部资源（如CSS样式表）的关系，定义内嵌CSS样式，放置和载入脚本程序。第7章将会示范所有这些用途。

3.3.3 内容

文档的第三部分是文档内容，这也是最后一个部分，放在body元素之中，如代码清单3-13所示。

代码清单3-13 在HTML文档中添加body元素

        <! DOCTYPE HTML>
        <html>
            <head>
              <! -- metadata goes here -->
              <title>Example</title>
            </head>
<body>
<!-- content and elements go here -->
I like <code>apples</code> and oranges.
</body>
          </html>

body元素告诉浏览器该向用户显示文档的哪个部分。自然，本书大部分篇幅都花在那些需要放在body元素之中的东西上面。把body元素加进来后，HTML文档的基本框架业已成型，本书大部分例子都要用到这个框架。

3.3.4 父元素、子元素、后代元素和兄弟元素

HTML文档中元素之间有明确的关系。包含另一个元素的元素是被包含元素的父元素。在代码清单3-13中，body元素是code元素的父元素，这是因为code元素位于body元素的开始标签和结束标签之间。反过来说，code元素是body元素的子元素。一个元素可以拥有多个子元素，但只能有一个父元素。

包含在其他元素中的元素也可以包含别的元素。从代码清单3-13中也可以看到：html元素包含着body元素，而后者又包含着code元素。body元素和code元素都是html元素的后代元素，但是二者中只有body元素才是html元素的子元素。子元素是关系最近的后代元素。具有同一个父元素的几个元素互为兄弟元素。在代码清单3-13中，head元素和body元素就是兄弟，这是因为它们都是html元素的子元素。

元素间关系的重要性在HTML中随处可见。一个元素能以什么样的元素为父元素或子元素是有限制的，这些限制通过元素类型表现出来（下一节将讨论这个问题）。即将在第4章讲述的CSS中元素间的关系也很重要，圈定应用样式的元素的方法之一就要借助元素的父子关系。最后，本书第四部分中介绍的文档对象模型（DOM）也会涉及通过搜索文档树查找文档中某个元素，而文档树正是元素之间关系的一种表述。在HTML世界里，从后代中辨认兄弟是一种重要能力。

3.3.5 了解元素类型

HTML5规范将元素分为三大类：元数据元素（metadata element）、流元素（flow element）和短语元素（phrasing element）。

元数据元素用来构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示。其说明见第7章。

另外两种元素略有不同，它们的用途是确定一个元素合法的父元素和子元素范围。短语元素是HTML的基本成分。第8章会介绍最常用的短语元素。流元素是短语元素的超集。这就是说，所有短语元素都是流元素，但并非所有流元素都是短语元素。

有些元素无法归入上述三种类型，这些元素要么没有什么特别的含义，要么只能用在一些非常有限的情况下。li元素就是受限元素的一个例子。它表示列表项，只能有三种父元素：ol（表示有序列表）、ul（表示无序列表）和menu（表示菜单）。该元素详见第9章。从第6章开始的所有元素说明都包含了元素所属类型的信息。

本周热推：
手把手教你学C语言从零开始学C语言疯狂Java讲义精粹看漫画学Python：有趣、有料、好玩、好用（全彩版）算法图解
上一章目录下一章