各司其职的标签

各司其职的标签

使用HTML5，开发者有了更多的HTML元素可以选择来构建页面的语义。很多新元素的引入是为了更加准确地标记、定义和组织内容。理解在何时何处使用这些HTML元素是构建有逻辑性的结构、符合标准并且语义丰富的网页的基础。

本文将概括性地介绍HTML5的元素，包括新增的和继承自HTML 4.01的元素。你也许认为这是一件乏味的事！毕竟，有一本800页以上的标准（2011年7月的WHATWG HTML标准完整版的长度）介绍这些元素。为了让学习那么多元素容易些，我们会将元素进行分组来了解，并且为特定的元素类型开辟单独的章节。HTML元素可以大致被分类为：

 

•   根元素（root element）　只有html元素，因为它是唯一包含所有其他文档里的元素的元素。
•   文档元数据（document metadata）和脚本元素（scripting elements）　head元素包含文档的元数据，在很多情况下也有CSS样式和JavaScript。
•   文档区块元素（document sectioning elements）　body元素包围了页面的内容，新的语义区块元素定义了页头、页脚、文章和页面上的其他区块。
•   内容分组元素（content grouping elements）　在一个页面区块里的内容可以被组织为段落、列表、块引用以及图表等。
•   文本级语义元素（text-level semantics elements）　独立的文本单元的单词和句子可以被标记，以便提供对内容的精细控制，比如分离时间、缩写、附件内容的上标，或者用于强调、重要性，或者其他一般区分。
•   表格数据元素（tabular data elements）　适合用数据表展现的数据，需要用表格的行与列来标记。
•   表单元素（form elements）　这包括文本框、下拉菜单、复选框，以及其他用于收集用户在表单里输入的元素。这些内容将在第4章详细讨论。
•   内嵌内容元素（embedded content elements）　包括页面的外部嵌入媒体，比如视频、音频、位图画板或者第三方插件（比如Flash内容）。这些内容将在第5章详细讨论。
•   交互元素（interactive elements）　包括不需要脚本控制，由继承获得交互性的元素。

 

在深入这些分类之前，我们将介绍两个对所有元素都适用的领域：所有HTML元素的全局属性和“内容模型类别”，后者是HTML标准用来区分元素的分类，其中的类别经常有彼此交集。 让我们开始吧！

全局属性

熟悉所有HTML都包含的属性（见表2-1）可以有助于充分利用HTML的核心功能，比如与CSS和JavaScript的整合以及新的编辑和拖放API。

表2-1　所有HTML元素都拥有的全局属性
续表

 

说明：当使用微数据时，还有另一套全局属性，可以运用更多标记来让机器，比如搜索引擎算法更容易地解析内容。有关微数据的内容会在本书后面讨论。

 

可访问性

用accesskey 和 tabindex属性可以通过键盘来访问页面元素，这对于有行动障碍的用户会有帮助。在元素上设置accesskey属性后，就可以通过按下键盘上的一个键来激活该元素。例如，这个特性可以用键盘来追踪一个超链接。不幸的是，可访问性的优势也带来了问题。激活访问按键经常需要组合键，比如按下Ctrl或Alt键 的同时再按访问键。确切的组合键因不同的浏览器和操作系统而异，使这个特性的可用性有所降低。另外，组合键可能会跟已存在的快捷键冲突，特别是跟有视力障 碍的用户使用的阅读器的冲突。最后，在单个元素上设置多个访问键（在两种设备访问该网站时可能有帮助）没有很广泛的浏览器支持。所以这些因素导致使用访问 键的情况有点令人沮丧。

在我们继续前的最后一点说明：Opera Software公司的Opera浏览器在访问键方面提供了一个很好的特性。同时按下Shift键和Esc键，在浏览器窗口上会弹出菜单，显示该页面的所有可用访问键，以及它们链接到哪里（如果链接元素上设置了这个属性；否则显示null）。图2-1是一个例子。

 

 

图 2-1　Opera浏览器显示在公司主页上可用的访问键和关联的链接

下一个属性，tabindex，也许更加有用。在页面上反复按下Tab键，将会发现不同的元素被聚焦。这是使用键盘访问页面元素的一个常见方式，当填写表单时会特别常见。tabindex属性，当设置在不同的元素上时（从1开始，然后每个元素递增1），确定了按下Tab键不同元素的移动顺序，较小的数字先访问，比如：

按Tab键时，列表的第一个条目会被激活，然后是最后一个条目，最后是中间的条目。显然，对于这种列表，按照列表里条目的顺序来激活更加合理，但这里是为了说明这种顺序是可以通过tabindex自定义的    。

元数据（metadata）

title属性为元素提供了一个参考信息。通常的形式是当鼠标悬浮在一个链接、表单输入框或缩写时，展示一个小提示。这里有一个例子：

 当鼠标悬浮到链接文字“W3C”上时，会弹出小提示“World Wide Web Consortium”（见图2-2）。


 

 

图 2-2　链接上设置title属性后的小提示

下一个属性，lang，指定了元素内文本书写的语言。一些元素可以用它来根据不同的语言脚本渲染文本，比如使用的引号类型。例如，下面的代码片段在页面顶部指定了整个HTML页面是用英语书写的：

 

 

 

 最后，HTML5里增加了contextmenu属性，但是，在本书编写时还没有在任何一个主要浏览器中实现它。它的想法是：通过将菜单的id设置到元素的contextmenu属性，可以将一个菜单元素关联到一个特定元素。要看它如何工作的，你需要等待浏览器实现这些标准！

唯一标识

id属性用于给页面上的指定元素设置一个唯一标识，然后就可以在CSS和JavaScript中获取到它。id是可以赋予HTML元素的唯一的名字，进而可用其引用该元素。class属性也有类似的用法。然而，与id属性不同，相同的class值可以被应用到页面上的多个元素，用于表示它们的共同点（比如一个特定的CSS样式）。总结一下，id和class属性的区别如下所示。

id

•   在每个页面，一个值能且仅能标识一个元素。

class

•   每个页面可以出现多个。    
•   一个特定的class属性值可以有多个class名，用空格分隔。

 

为了说明这些区别，考虑下面的代码：

 

 

 这段代码包含唯一的id属性about-text 和两个class：homepage 和 popup。id属性about-text 不能再在其他地方使用，而homepage 和 popup均可以在其他元素上使用。注意元素并不一定需要id属性和class属性。它们可以有其中一个，或者都没有。还有，为了减少问题，id或class属性不要以数字开头，而且绝对不要在名字里包含空格（用减号或者下画线来代替）。

 

合理的ID和CLASS值

很容易倾向按照元素的外观来赋值，而不是根据实际代表的含义。最好避免这样做。比如，比起这样的值：

 

 应该用这样的属性值来代替：

  

 为什么呢？很简单，就是因为有一天你会希望strong元素变为蓝色而不是红色，或者希望这个框里的内容从页面顶部移到底部，到那时，之前那个例子里的id和class值就会有误导性了。

 

这两种元素在网页开发里都很常用，熟练地掌握它们很重要。在合适的地方，我们会使用CSS和JavaScript来说明HTML5的特性。但这里先简单提一下，如果希望通过CSS来引用这些属性值并设置样式，可以在ID前输入前缀井号（#）、class前输入前缀句点（.），像这样：

 

用JavaScript来引用这些属性，一般使用命令document.getElementById("about-text")，其中about-text是要获取的元素的实际ID。获取含有某个class的所有元素可以使用一个类似的命令document.getElementsByClassName("homepage")（其中homepage要替换成引用的class值）。

可编辑性

contenteditable属性使用在新的编辑API（Editing API）里，像在HTML5里同样是新的。编辑API允许对页面内容的实时编辑，contenteditable在2000年就由 Internet Explorer引入了，但是直到现在才被加入到HTML标准里。这个概念是让HTML元素可以被编辑，使网页表单富文本编辑器以及类似应用可以被较容易地创建（例如，用网页来创建富文本的博客文章）。

拼写检查

spellcheck属性，顾名思义，是用于指定一个元素是否应该进行拼写检查。浏览器经常有拼写检查功能，当用户在表单输入框打字时，检查拼写和语法错误。有时需要在某些元素上禁用这个功能。比如，在输入e-mail地址时，你可能不希望检查拼写错误，这样浏览器就可以忽略e-mail地址的检查。spellcheck属性是true或者false（或者空字符，会转换为true）。一般而言，这对可以编辑的内容很合适。

2.1.6　隐藏元素

hidden属性，用于隐藏和显示HTML元素。这与CSS中display:none属性的效果相同。虽然用CSS来隐藏元素是通常的做法，但实际上HTML5标准鼓励使用hidden属性。hidden为对应的元素增加了额外的语义。设置这个属性表示元素目前不相关。例如，这可以被屏幕阅读器利用，否则它需要通过CSS的display属性来遍历整个页面。

下面的HTML和JavaScript片段展示了怎样用hidden属性来显示和隐藏内容。HTML部分展示了一个定义列表（definition list ），含有fox的常用名和拉丁语名：

 

JavaScript部分增加了在鼠标划过名字时显示隐藏red fox的拉丁名的功能。因为hidden属性是布尔值，所以可以用JavaScript来设置为true或者false，表示显示和隐藏目标元素：

 

 

拖曳

draggable 和 dropzone属性是HTML朝着构建应用而不是文档的方向发展的例子。这还需要一些设置和JavaScript（我们会在第7章讨论），但是当可用时，这些属性允许HTML元素被拖动到页面的一个部分并且放置到另一个元素上（你会看到，可能只用draggable就可以实现，因为还没有多少浏览器支持dropzone）。剩下的需要JavaScript事件来控制。

样式

style属性用来直接在元素上应用CSS样式。通过这种方式设置的任何样式会覆盖其他地方设置的样式。虽然这样很快捷，但是最好完全避免使用这个属性，而把所有样式放在外部样式表里。分离CSS和HTML带来组织性和灵活性上的好处，因为当CSS存放在CSS文件里时，查找和禁用CSS规则都比当CSS和HTML代码混杂在一起时容易很多。

文字方向

dir属性用于控制文本流的方向。文本通常从左向右排列，但是如果一种语言是其他方向的，比如阿拉伯语，文本方向也需要调整。dir属性提供了这种能力。如果整个文本块使用从右向左排列的语言，那么使用“rtl”，代表right-to-left，并且在容器元素上使用“ltr”，代表left-to-right。这样文本和标点都会翻转。

 

 属性值也可以使用auto，其用于根据文字自动查找文本方向。

■ 说明：CSS的direction属性也提供了相同的功能，可用的值有inherit、ltr以及rtl。然而，不应该使用这样的CSS，因为这种信息应该内嵌在页面本身，这样即使关联的样式表被禁用了，文本的内容仍然可以被确定。

自定义数据

data-* 属性有点奇怪。它是多种属性的混合，任何属性名都可以使用来在HTML元素上存储数据，提供给比方说JavaScript应用来使用。属性名里的*不是最终的属性，可以用任何文字代替它来生成一个自定义属性。比如，加上city就可以构成一个属性data-city。增加上score就构成属性data-score，这样也许会被用在一个罗列比赛最高分的页面里。拿下面的代码举个例子：

 

 

 可以写一个JavaScript函数，在单击一个按钮时把名字替换为比分：

 

 

■ 说明：前面例子里的dataset属性可以用来以键/值对的方式获取data-*属性。然而，只有自定义的部分是需要的，即用score属性来查询，而不是data-score。

这种方式提供了在单个元素上存储的很大的灵活性，同时又有标准的支持。多么矛盾！初衷是这些属性只在特定的网站上使用，并且没有被网站域之外的其他软件使用。所以，请只在没有其他解决方案时小心地使用！

 

 

关于作者

Anselm Bradford 是新西兰奥克兰大学（AUT）的数字媒体讲师。他的研究领域是交互性媒体、网页媒体和视觉沟通。他从1996年开始从事互联网相关的开发工作，当时他手写了自己的第一个网站。他的Twitter账号是@anselmbradford，偶尔也会在AnselmBradford.com发表博客文章。

Paul Haine是一个在伦敦工作的网页设计师，他的个人博客是 joeblade.com。

本文节选自《深入理解HTML5：语义、标准与样式》一书

[美]Anselm Bradford （安塞姆.布拉德福），Paul Haine （保罗.海涅）著.
高京 译，由电子工业出版社出版。