各司其职的标签

各司其职的标签

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

本文将概括性地介绍HTML5的元素,包括新增的和继承自HTML 4.01的元素。你也许认为这是一件乏味的事!毕竟,有一本800页以上的标准(20117月的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的核心功能,比如与CSSJavaScript的整合以及新的编辑和拖放API

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

 

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

 

可访问性

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

在我们继续前的最后一点说明: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属性用于给页面上的指定元素设置一个唯一标识,然后就可以在CSSJavaScript中获取到它。id是可以赋予HTML元素的唯一的名字,进而可用其引用该元素。class属性也有类似的用法。然而,与id属性不同,相同的class值可以被应用到页面上的多个元素,用于表示它们的共同点(比如一个特定的CSS样式)。总结一下,idclass属性的区别如下所示。

id

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

class

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

 

为了说明这些区别,考虑下面的代码:

 

 

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

 

合理的ID和CLASS值

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



 

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



  

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

 

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

 

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

可编辑性

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

拼写检查

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

2.1.6 隐藏元素

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

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

 

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

 

 

拖曳

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

样式

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

文字方向

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

 

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

说明:CSSdirection属性也提供了相同的功能,可用的值有inheritltr以及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 (保罗.海涅)著.
高京
译,由电子工业出版社出版。

 


已标记关键词 清除标记
相关推荐