HTML5和CSS课程(2)

导语

从今日起计划推出系列课程《HTML5和CSS课程》。内容来源于《HTML5与CSS3基础教程（第8版）》。如果你喜欢看书，请购买正版书籍。以下内容均来源于对该本书的解读。

标签：元素、属性、值及其他

见识了一些 HTML 之后，我们来仔细看看标签的组成：元素（ element）、属性（ attribute）和值（ value）。我们还将讨论父元素和子元素的概念。

01

元素

元素就像描述网页不同部分的小标签一样：这是一个标题，那是一个段落，而那一组链接是一个导航。我们在前面已经讨论过一些元素，有的元素有一个或多个属性，属性用来进一步描述元素。大多数元素既包含文本，也包含其他元素（就像基本页面中的 p 元素）。如前面提到的，这些元素由开始标签、内容和结束标签组成。开始标签是放在一对尖括号中的元素的名称及可能包含的属性，结束标签是放在一对尖括号中的斜杠加元素的名称。

这是一个典型的 HTML 元素。开始标签和结束标签包着描述元素的文字。习惯上，标签采用小写字母。还有一些元素是空元素，既不包含文本也不包含其他元素。它们看起来像是开始标签和结束标签的结合，由左尖括号开头，然后是元素的名称和可能包含的属性，然后是一个可选的空格和一个可选的斜杠，最后是必有的右尖括号。

空元素（如这里显示的 img 元素）并不包含任何文本内容（ alt 属性中的文字是元素的一部分，并非显示在网页中的内容） 。空元素只有一个标签，同时作为元素的开始标签和结束标签使用。结尾处的空格和斜杠在 HTML5 中是可选的。不过，元素最后面的> 是必需的。

在 HTML5 中，空元素结尾处的空格和斜杠是可选的。 XHTML 要求空元素结尾处必须有斜杠。以前用 XHTML 的人恐怕仍然倾向于在 HTML5 中继续使用斜杠，而其他人可能已经不用了。不管选择哪种方式，建议始终保持一致。按照惯例，元素的名称都用小写字母。不过， HTML5 对此未做要求，也可以使用大写字母。只是现在已经很少有人用大写字母编写代码了，因此，除非无法抗拒，否则不推荐使用大写字母，这是一种过时的做法。

02

属性和值

属性包含了元素的额外信息。在HTML5 中，属性值两边的引号是可选的，但习惯上大家还是会写上，因此建议始终这样做。跟元素的名称一样，尽量使用小写字母编写属性的名称。

这是一个 label 元素（关联文本标签与表单字段），它有一个简单的属性 – 值对。属性总是位于元素的开始标签内，属性的值通常放在一对括号中。

有的元素（比上图 中的 a 和 img）可以有多个属性，每个属性都有各自的值。属性的顺序并不重要。不同的属性 – 值对之间都用空格隔开。

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

有的属性只接受特定的值。例如，只能将 link 元素里的 media 属性设为 all、 screen、 print 等值中的一个，不能像 href 属性和 title 属性那样可以输入任意值。有许多属性的值需要设置为数字，特别是那些描述大小和长度的属性。数字值无需包含单位，只需输入数字本身。图像和视频的宽度和高度是有单位的，默认为像素。有的属性（如 href 和 src）用于引用其他文件，它们只能包含 URL（统一资源定位符，是万维网上文件的唯一地址）形式的值。最后，还有一种特殊的属性称为布尔属性。这种属性的值是可选的，因为只要这种属性出现就表示其值为真。如果一定要包含一个值，就写上属性名本身（ 这样做的效果是一样的）。布尔属性也是预先定义好的，无法自创。

这段代码提供了一个让用户输入电子邮件地址的输入框。布尔属性 required 代表用户必须填写该输入框。布尔属性不需要属性值，如果一定要加上属性值，则写作required="required"

03

父元素和子元素

如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。子元素中包含的任何元素都是外层的父元素的后代。这种类似家谱的结构是 HTML 代码的关键特性，它有助于在元素上添加样式和应用 JavaScript 行为。值得注意的是，当元素中包含其他元素时，每个元素都必须嵌套正确，也就是子元素必须完全地包含在父元素中。使用结束标签时，前面必须有跟它成对的开始标签。换句话说，先开始元素 1，再开始元素2，就要先结束元素 2，再结束元素 1。

在这段 HTML 代码中， article 元素是 h1、 img 和 p 元素的父元素。反过来， h1、 img 和 p 元素是 article 元素的子元素（也是后代）。 p 元素是 em 和 a 元素的父元素。 em 和 a 元素是 p 元素的子元素，也是 article 元素的后代（但不是子元素）。反过来， article 元素是它们的祖先

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

好，今天的课程就到这里！！！