虽然网页的复杂性日益增加，但是其底层仍然相当简单。网页由三个基本组件组成：文本内容，包括页面上出现的标题和段落；对更复杂的内容的偶尔引用，比如链接、图像和Flash动画，等等；以及标记，也就是描述内容和引用应该如何显示的指令。重要的是，要注意到这些组件都是由文本组成的。这个基本特性意味着网页可以保存为纯文本格式，可以在任何平台上用任何浏览器查看，从而保证了Web的普适性。

网页还包含编写文本所用的语言或脚本的相关信息（编码）以及描述它的标记类型（文档类型）。

本章将对这些重要的概念进行解释。

注意：正如在导论中提到的，在HTML 4和XHTML 1.0具有相同性质的情况下，使用(X)HTML表示这两者，比如“(X)HTML的table元素”。另一方面，如果需要突出HTML或XHTML独有的特殊性质，那么会使用它们各自的名称，比如“XHTML要求在属性值外加上引号”。更详细的说明请参见0.8节。

1.1  标记：元素、属性和值

(X)HTML是一个精巧的系统，可以包含关于文档中内容的信息。这些信息称为标记（header），也就是(X)HTML中的M，它包括格式化指令以及文档各个部分之间关系的详细信息。但是，因为标记本身也是由文本组成的，所以实际上可以在任何地方访问(X)HTML文档。

(X)HTML有三种主要的标记类型：元素（element）、属性（attribute）和值（value）。在本书后面，我们还会谈到声明（declaration，见1.7节）和实体（entity，见21.6节）。

1.1.1  元素

元素就像是小标签，它们标识网页的不同部分并为这些部分建立结构：“这是一个标题（header）；这不只是一个段落（paragraph），它是重要的信息。”某些元素有一个或多个属性，用来进一步描述元素的用途和内容（如果有的话）。

元素可以包含文本和（/或）其他元素，也可以是空的。非空的元素由开始标记（包含在小于号和大于号之间的元素名和属性）、内容和结束标记（包含在小于号和大于号之间的斜杠和元素名）组成，见图1-1。

图字：开始标记  受影响的文本  结束标记

尖括号  斜杠

图1-1  这是一个典型的(X)HTML元素。开始标记和结束标记包围着受影响的文本。在这个例子中，单词“ephemeral”将被强调，在大多数浏览器中这意味着它会显示为斜体

空元素看起来像是开始标记和结束标记的组合，它包括小于号、元素名、可能有的任何属性、空格、斜杠以及最后的大于号，见图1-2。

图1-2  空元素（比如这里的img）没有包围任何文本内容。它们用一个标记同时起到开始元素和结束元素的作用。在HTML中最后的斜杠是可选的，而在XHTML中则必须有斜杠

图字：空格和斜杠

在XHTML中，总是需要结束标记。而在HTML中，结束标记有时候是可选的。本书介绍每个元素时会提供相关的详细信息。

1.1.2  属性和值

属性包含关于文档中数据的信息，而不是数据本身（图1-3和图1-4）。在XHTML中，属性值必须总是包含在引号中。而在HTML中，引号有时候可以省略（见1.6节），不过我建议还是保留引号。

图1-3  这是一个td元素（表示一个表格单元格），其中包含一个属性-值对。属性总是放在元素的开始标记中。它们的值应该总是包围在引号中

图字：colspan是td的属性   colspan属性的值

图1-4  某些元素（比如这里的img）可以有一个或多个属性，每个属性都有自己的值。属性的次序并不重要。每个属性-值对之间用空格分隔

图字：src是img的属性    src的值    width也是img的属性    width的值

在本书中介绍各个属性时你可以了解到属性可接受值的完整信息，这里先让你对属性值的种类有个概念。

有些属性可以接受任何值，而一些属性有一定的限制。最常见的可能是接受枚举值（即预定义值）的属性。换句话说，必须从标准的值列表中选择一个值（图1-5）。在XHTML中，枚举值总是由小写字母组成的（在HTML中，大小写是无所谓的）。

图1-5  某些属性只接受特定的值。比如，link元素中的media属性可以设置为screen、handheld或print，等等，但是不能为它提供自己编造的任意值

图字：预定义值

许多属性要求值是数字或百分数，尤其是描述大小和长度的属性。数字值不包含单位。在可以应用单位时，比如对于文本的高度或图像的宽度，单位是像素。

控制颜色的属性可以接受颜色名称，或者表示颜色的红绿蓝成分的十六进制数字。本书的封三提供了16种预定义的颜色名称以及十六进制颜色值图表。7.4节给出了创建自己的十六进制颜色值的方法。注意，(X)HTML不支持对颜色使用数字或百分数。

一些属性引用其他文件，因此必须包含URL（统一资源定位符）形式的值，也就是文件在Web上的惟一地址。在1.5节中我们将进一步讨论URL。

1.1.3  块与行内

元素可以是块级（block-level）的或行内（inline）的。如果元素是块级的，那么它总是在新行上显示，就像书中的新段落一样。如果元素是行内的，那么它在当前行中显示，就像段落中的下一个单词一样（图1-6和图1-7）。

图1-6  div和p是块级元素（图中以粗体突出显示）。img和em是行内元素（也突出显示，但不是粗体的）

图1-7  每个块级元素开始一个新行。行内元素（这个例子中的图像和斜体文本）在包含它们的块级元素所开始的行上显示

块级元素是网页上比较大的结构，因此常常包含其他块级元素、行内元素和文本。与之相反，行内元素一般只能包含其他行内元素和文本。

（元素还可以是列表项，它们不同于块级元素或行内元素，但是这个类别比较小，只在第15章中讨论。）

1.1.4  父元素和子元素

如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素是子元素。子元素中包含的任何元素都是外层的父元素的后代（图1-8）。实际上，可以创建网页的家谱，从而显示页面上元素之间的层次关系并且惟一地标识每个元素。

图1-8  div元素是img元素和两个p元素的父元素。反过来说，img元素和p元素是div的子元素（和后代）。第一个p元素是em标签的父元素。em是第一个p元素的子元素，也是div元素的后代（但不是子元素）

这个结构是(X)HTML代码的一个关键特性，它有助于在元素上增加样式（这将在第7章中讨论）以及应用JavaScript效果（将在第20章中简短地讨论）。

一定要注意，当元素中包含其他元素时，每个元素必须正确地嵌套，也就是子元素必须完全包含在它的父元素中。在使用结束标记时，它应该与最近的未结束的开始标记对应。换句话说，先开始A，再开始B，那么就要先结束B，再结束A（图1-9）。

图1-9  元素必须正确地嵌套。如果开始p，然后是em，那么必须先结束em，再结束p

图字：正确（没有重叠线）   不正确（标记相互交叉）