1.3　标记：元素、属性和值

见识了一些HTML以后，我们来仔细看看标记的组成。

HTML标记主要包括三种成分：元素（element）、属性（attribute）和值（value）。你已经在基本页面中见到了它们各自的实例。

  1. 元素

元素就像描述网页不同部分的小标签一样：“这是一个标题，那是一个段落，而那一组链接是一个导航。”我们在前面已经讨论过一些元素。有的元素有一个或多个属性，属性进一步描述了元素的用途和内容（如果有的话）。

元素可以包含文本，可以包含其他元素，也可以是空的。一个非空元素由开始标记（start tag，元素的名称和属性，如果有的话放在尖括号中）、内容和结束标记（end tag，一个斜杠后跟元素的名称放在尖括号中）组成，如图1.3.1所示。

1.3　标记：元素、属性和值 - 图1

图1.3.1　一个典型的HTML元素。开始标记和结束标记包着元素所描述的文字。在这个例子中，通过使用em元素，amazed一词被强调了。习惯上，使用小写字母输入标记

空元素（emptyelement）看起来像开始标记和结束标记的结合，由左尖括号开头，然后是元素的名称和任何可能有的属性，然后是一个可选的空格和一个可选的斜杠，最后是必须有的右尖括号，如图1.3.2所示。

1.3　标记：元素、属性和值 - 图2

图1.3.2　空元素并不包围任何文本内容（alt属性中的文字是元素的一部分，并未被元素包围），就像这里显示的img元素。空元素只有一个标记，既作为元素开始，又作为元素结束。结尾处的空格和斜杠在HTML5中是可选的，但通常还是会写上它们。不过，元素最后面的>是必须有的

在HTML5中，空元素结尾处的空格和斜杠是可选的。XHTML要求空元素结尾处有斜杠。应该说，我们这些以前用XHTML的人恐怕仍然倾向于在HTML5中继续这样做，而其他人则当然不用斜杠了。本书会在代码中包含斜杠，但如果选择忽略它们，页面也不会表现出任何不同。不管选择哪种方式，建议始终保持一致。

依照习惯，元素的名称都用小写字母，但HTML5对此也未做要求，用大写字母也是允许的。然而，现在很少有人用大写字母编写代码，因此，除非无法抗拒，否则不推荐这样做。使用大写字母是一种过时的做法。

  1. 属性和值

属性包含的是有关文档内容的信息并非文档内容本身，如图1.3.3和图1.3.4所示。在HTML5中，属性值两边的引号是可选的，但习惯上还是会写上它们，因此建议始终这样做。同元素的名称一样，建议你用小写字母编写属性的名称。

1.3　标记：元素、属性和值 - 图3

图1.3.3　这是一个label元素（该元素用于将一个文字标签与一个表单域关联在一起），它有一对简单的属性和值。属性总是位于元素的开始标记里面，通常用一对引号包围属性的值

1.3　标记：元素、属性和值 - 图4

图1.3.4　有的元素可以有一个或多个属性，每个属性都有各自的值，就像上面的a元素一样。属性的顺序并不重要。不同的属性值对之间都用空格隔开

本书会对大多数属性可接受的值进行详细说明，不过不妨先看看都有哪些类型的值。

有的属性可以接受任何值，有的则有限制。最常见的还是那些仅接受枚举的或预定义的值的属性。也就是说，必须从一个标准列表中选一个值，如图1.3.5所示。一定要用小写字母编写枚举的值。

1.3　标记：元素、属性和值 - 图5

图1.3.5　有的属性只接受特定的值。例如，link元素里的media属性只能被设为all、screen、print等，你不能像对title属性那样任意输入一个值

很多属性的值需要填入一个数字，特别是那些描述大小和长度的值。数字值无需包含单位，只需输入数字本身。图片和视频的宽度和高度是有单位的，不过会默认它们的单位为像素。

有的属性引用其他文件，如href和src。它们只能包含URL（统一资源定位符，是万维网上文件的唯一地址）形式的值。关于URL，参见1.7节。

  1. 父元素与子元素

如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。子元素中包含的任何元素都是外层的父元素的后代，如图1.3.6所示。实际上，可以创建网页的家谱，显示页面上各元素之间的层次关系并唯一地标识每个元素。

  1. <article>
  2.   <h1>The Ephemeral Blue Flax</h1>
  3.   <img src="blueflax.jpg"... />
  4.   <p>... continually <em>amazed</em> ... delicate <a ...>Blue Flax</a> ...</p>
  5. </article>

图1.3.6　article元素是h1、img和p元素的父元素。反过来，h1、img和p元素是article元素的子元素（和后代）。p元素是em和a元素的父元素。em和a元素是p元素的子元素，也是article元素的后代（但不是子元素）。反过来，article元素是它们的祖先

这种家谱式的基本结构是HTML代码的一个关键特性，它有助于在元素上添加样式（从第7章开始讨论）和应用JavaScript行为。

值得注意的是，当元素中包含其他元素时，每个元素都必须正确地嵌套，也就是子元素必须完全地包含在父元素中。使用结束标记的时候，它必须与最近的开始标记对应。换句话说，先开始元素1，再开始元素2，就要先结束元素2，再结束元素1，如图1.3.7所示。

1.3　标记：元素、属性和值 - 图6

图1.3.7　元素必须正确地嵌套。如果先开始p，再开始em，就必须先结束em，再结束p