ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 各司其职的标签

各司其职的标签

原创 Linux操作系统 作者:broadviewbj 时间:2013-09-02 11:15:02 0 删除 编辑

各司其职的标签

使用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属性不要以数字开头,而且绝对不要在名字里包含空格(用减号或者下画线来代替)。

 

合理的IDCLASS

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

 

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

 

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

 

这两种元素在网页开发里都很常用,熟练地掌握它们很重要。在合适的地方,我们会使用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的常用名和拉丁语名:

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

 

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/13164110/viewspace-772026/,如需转载,请注明出处,否则将追究法律责任。

上一篇: 移动设计八原则
请登录后发表评论 登录
全部评论

注册时间:2008-02-22

  • 博文量
    1030
  • 访问量
    1614975