《HTML5开发手册》——2.7 现存元素的变化

2.7 现存元素的变化

在第1章中,我们介绍了用于创建页面布局和添加内容的新元素。在本章前半部分,我们介绍了更多的HTML5新元素,但是它们关注的是内容自身,比如图片。一直介绍新元素并不代表现存的元素都被我们忽略了。事实上,其中一些现有元素的角色发生了变化。

2.7.1 cite元素
HTML5对cite元素的定义进行了很大的修改。在HTML 4中,cite元素允许内容开发人员显示引用内容的作者或发言人。

虽然从技术上来说是错误的,但cite元素还是经常在blockquote中使用。

然而,HTML5中的cite用来显示某个作品(书籍、诗歌)的标题。HTML5规范中还着重强调:人名并非作品标题的一部分。因此,读者可以使用如下的代码:

(HTML5规范推荐使用b元素显示作者名。)

HTML5禁止cite显示作者名的规定还引起了一些非议。Jeremy Keith的博文http://24way. org/2009/incite-a-riot对这个事件进行了深入的介绍。总之,HTML5的cite元素不再向后兼容,并且HTML5规范推荐为人名使用b元素。不过,尽管其中的内容有意义,b元素仍然没有语义含义。

所以,读者需要自己决定是遵循规范,还是像很多开发者一样继续使用cite显示人名。开发者也很有必要关注cite元素的定义是否改变。

注意:
2011年7月,曾有过关于“允许在blockquote中使用footer元素”的讨论。这让开发者有机会在引用内容中添加作者名之类的信息。让我们静观其变。
2.7.2 ol元素
用于创建有序列表的ol元素也被重新定义。现在它可以附加3种属性:

  • start
  • reversed
  • type
    代码2.8使用了HTML5新定义的reversed属性。在任何支持此属性的浏览器中打开列表,该列表将以倒序显示。

代码2.8 倒序显示的有序列表

当前还没有任何浏览器支持此属性,不过在支持以后,显示效果应该如下:

My favorite colors
3.Blue

2.Green

1.Red

HTML 4废除了start属性。因此页面若使用了start属性,将无法通过验证。HTML5重拾起了该属性,也算是解决了对此属性需要时的困扰。因此,如果需要设置有序列表,使其从第二项开始,可以使用如下代码:

type属性也同样起死回生。以前,只有通过CSS才能改变列表样式(如使用罗马数字计数)。但在HTML5中,我们可以使用type来实现。代码2.9所示为一个示例。

代码2.9 嵌套的有序列表

上面的代码将会产生如下列表:

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 2.Aliquam tincidunt mauris eu risus.

 3.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  1.Ali Aliquam tincidunt mauris eu risus.

  2.Vestibulum auctor dapibus neque.

 4.Vestibulum auctor dapibus neque.

2.Aliquam tincidunt mauris eu risus.

3.Vestibulum auctor dapibus neque.

使用type属性,我们无需CSS就可以设置排序数字的类型。一共有5种类型可供选择:

type=”1”= 1, 2, 3, 4, 5

type=”a”= a, b, c, d, e

type=”A”= A, B, C, D, E

type=”i”= i, ii, iii, iv, v

type=”I”= I, II, III, IV, V

如果将ol类型改变为上述任何一种类型,可以得到如下效果:

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 a.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 b.Aliquam tincidunt mauris eu risus.

 c.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  i.Ali Aliquam tincidunt mauris eu risus.

  ii.Vestibulum auctor dapibus neque.

 d.Vestibulum auctor dapibus neque.

2.Aliquam tincidunt mauris eu risus.

3.Vestibulum auctor dapibus neque.

套用不同的类型后,可以在内容中引用1.b.ii项,而不是1.3.2。浏览器将会正确地实现type属性,不过在本书撰写时,使用该元素后会产生页面验证错误。

2.7.3 dl元素
在HTML 4中,dl元素为定义表,包含的是某个术语和它的定义。然而,由于其定义和使用相当不清晰,这导致了很多误用,更有开发者转而使用其他元素。

在HTML5中,dl元素被重新定义为一个描述或者关联列表。通过分析一些例子,可以很容易地理解该元素。代码2.10利用dl建立了一个术语表。我们将表放置于aside中,是因为我们假设aside元素位于article中,这也是Web开发中的常见情况。

代码2.10 创建术语表

代码2.11利用dl创建电影工作人员名单。

代码2.11 添加电影工作人员名单

上面的代码为单个键(dt)赋予了多个值(dd)。实际上,也可以将每栏信息(导演、编剧等)分别放置在各自的section中,如下所示:

这在很大程度上取决于内容以及以什么样的结构来组织内容。

提示:
dl元素以前被用作 描述对话内容。不过,从规范来看,使用dl是不恰当的。最初在HTML5 中有一个dialog元素,但是在2009年底又将其从规范中删除了。作为替代,我们可以使用p元素。如果想给发言人的姓名添加样式,可使用span或b元素。例子如下:

2.7.4 small元素
在HTML 4中,small元素用来缩小字体。可是,缩小字体是显示层面的问题,应该由CSS来完成。因此,在HTML5中,small元素代表小打印体,如版权信息、条款或许可/法律信息:

因为small是内嵌元素,如果有需要,你可以将它嵌入其他元素中。比如嵌入strong,它可以为该小打印体赋予重要性。

2.7.5 b和strong元素
在HTML 4中,b元素用作加粗。现在,它纯粹用作展示。所以应该用它来为不带特殊重要性的内容添加样式。

博文的首段就经常采用加粗的样式,以表现与众不同:

这里不使用strong的原因在于我们并不想表示首段更加重要,而只是想使它的样式有所不同。当然,也可以使用CSS(p:first-of-type或h2+p)来添加样式。代码2.12利用b元素为内容添加不同颜色。

代码2.12 b元素

strong元素用来标识重要的内容。所以我们不仅可以用来加粗文字,还可以嵌套此元素以增加内容的重要性。

2.7.6 i和em元素
i元素在HTML 4中用来创建斜体文字。不过,现在它的作用是以另外一种语气或心情表现内容。HTML 5规范给出了一些使用示例,其中包含了一个梦境、一个科技术语、一个想法或船名等:

相反,em元素表示了能改变句子意思的强调。包含在 em 中的一个或多个字在该句中有强调的意味。如果移动em元素,即改变强调的内容,相应的句子也会发生含义上的改变。

2.7.7 abbr元素
abbr元素并非HTML5新引入的,也未被重新定义。那为何在这里提及它?这是因为abbr现在与acronym整合了。现在,abbr既可以标识缩写词,也可以表示首字母缩略词。可以使用title属性显示全称。该属性通常会以提示的形式显示给用户。

缩写词与首字母缩略词不同:NATO是首字母缩略词,而BBC是缩写。在HTML 4中,两个标记都可以使用。但是由于这时常给作者带来困惑,因此去掉了acronym,而都使用abbr。

2.7.8 hr元素
hr元素用于在文档中添加横线。它的用法有细微的改变。现在,在段落末尾使用它。比如在书籍中,可用其指示场景的切换。通常,此元素会显示为节与节之间的一条横线或某种特殊图案。现在,hr元素并不常见了。因为我们可以使用CSS在任何p、div、article或section元素后添加空格、图案、线段或是其他装饰。

2.7.9 不复存在的元素
HTML5中删除了如下元素,我们可以对它们说再见了:

-acronym(使用abbr)
-applet(使用object)
-basefont(使用CSS来显示)
-big(使用CSS来显示)
-center(使用CSS来显示)
-frame(iframe仍然存在)
-frameset
-noframes
-font(使用CSS来显示)
-strike(使用s或del,这视内容而定)
-tt(使用CSS来显示)
-u(使用CSS来显示)
如上列出的是当前已经删除的元素。若你仍在使用它们,我们建议你尽快停止。

时间: 2024-08-01 08:22:04

《HTML5开发手册》——2.7 现存元素的变化的相关文章

《HTML5开发手册》——1.6 中级“菜谱”:使用新article元素

1.6 中级"菜谱":使用新article元素 HTML5开发手册article元素和section元素(下一节讨论)是否是HTML5结构元素中最重要的两个,还有待讨论.不过它们肯定是最让人困惑的. article元素是一个独立的内容块,它既可以独立存在,也可以被重用.RSS订阅中的内容就非常有代表性,因为每项基本都是独立的文章.你完全可以把某项从中抽取出来,而它仍然是具有意义的. HTML5规范给出了一些如何使用article元素的示例:论坛的帖子.杂志或新闻的文章.一篇博文或用户提

《HTML5开发手册》——导读

前言 HTML(超文本标记语言)是构建网页的核心语言.在过去的20多年里,无数的开发者编写着 HTML.在 HTML 诞生的前几年,这门语言经历了翻天覆地的变化,直到 1990 年后才相对稳定了起来.不过,现在一切开始改变. HTML的简史 在1991年,Tim Berners-Lee撰写了一篇名叫"HTML Tags"(HTML标记)的文档.文档中描述了20个可以用来编写Web文档的标记.到1993年中期,IETF(因特网工程任务组)发布了第一个HTML规范的提议,该提议最后过期.而

《HTML5开发手册》——2.10 中级“菜谱”:在HTML5中使用WAI-ARIA

2.10 中级"菜谱":在HTML5中使用WAI-ARIA HTML5开发手册Web Accessibility Initiatives Accessible Rich Internet Applications(WAI-ARIA)也称作ARIA,是一个旨在提高Web应用和Web页面可访问性的草稿规范.ARIA允许使开发者与内容作者开发能够被辅助技术识别和使用的富Internet应用和内容.通常,辅助技术无法知道一个组件(widget)是什么,组件也一般无法使用键盘访问.同样,试想一下

《HTML5开发手册》——2.8 初学者“菜谱”:为多个元素添加相同的超链接

2.8 初学者"菜谱":为多个元素添加相同的超链接 HTML5中一个非常实用的新特性是将某些元素组合起来,显示单个链接来提供更宽的点击空间.而在以前,我们需要使用JavaScript或一系列组合元素才能完成这种功能. 在HTML 4中,在编写新闻或博客主页等含有众多文章链接的页面时,我们需要使用代码2.13的方法使每个项目都可点击. 代码2.13 在HTML 4中包裹链接 代码2.14所示为在HTML5中直接使用一个a元素做到这一点. 代码2.14 在HTML5中包裹链接 虽然可以直接

《HTML5开发手册》——第1章 HTML5中新的结构元素 第1章 HTML5中新的结构元素

第1章 HTML5中新的结构元素 HTML5并不是一种具有JavaScript API和酷炫视频的交互式巫术.它有20多个新的元素,可以用来开发Web页面.添加语义以交付容易访问的可重用内容. 在后面章节,我们将学习新的HTML5表单控件和多媒体元素.本章主要讲解新的结构元素,如header.hgroup.nav.footer.article.section和aside.你将知道何时以及如何单独或组合使用这些新元素.实际上,你还将学会利用这些新元素创建一个基本的网站模板,如图1.1所示. 1.1

《HTML5开发手册》——2.4 初学者“菜谱”:使用address元素提供通信信息

2.4 初学者"菜谱":使用address元素提供通信信息 规范中将address元素定义为"分节元素",与nav或article类似.不过,我们将它放在本章讲解,主要因为我们认为它作为文本级语义更为合适,原因是它的用法与文字内容相关,而不是页面布局. 多年以来,Web开发人员一直错误地使用了address元素.它并非显示通用邮寄地址(通常在某个"联系我们"页面中)的通用方式.因此,下面这种使用方式是错误的: https://yqfile.ali

《HTML5开发手册》——1.5 初学者“菜谱”:使用nav元素创建导航

1.5 初学者"菜谱":使用nav元素创建导航 顾名思义,nav元素的作用是提供导航.它用于链接到网站内的其他页面,或者是链接到一个页面的其他部分(例如目录). nav最常用的用途是作为网站的主导航.很多情况下,开发者都使用无序列表编写导航,如代码1.4所示. 代码1.4 传统的导航编写方式 在HTML5中创建nav元素时,该代码没有太大变化.生成图1.5所示的代码看起来如代码1.5所示. 代码1.5 HTML5中的导航编写方式 https://yqfile.alicdn.com/f5

《HTML5开发手册》——1.7 中级“菜谱”:使用section元素对内容分组

1.7 中级"菜谱":使用section元素对内容分组 section元素是一个总是需要标题的内容区域或页面区域.可以用它将多个部分的内容组合在一起,也可以根据需要,将内容的某一部分进一步划分.它不可用作通用封装器(generic wrapper)来实现样式上的需求.section元素中可以包含article元素,并且article元素也可以将其内容分割为section.正如上一节所说,你需要考虑何时使用article,以及何时使用section.代码1.9是一个使用section的示

《HTML5开发手册》——1.3 初学者“菜谱”:使用header元素建立网站标头

1.3 初学者"菜谱":使用header元素建立网站标头 我们首先从一个典型的Web页面的顶端开始. header元素经常出现在Web页面的最上面,它通常包含了logo.网站名称.网站导航等信息.它可以在一个页面中多次使用,后面将会讲到,它可以用于页面中特定分段区域(section)的导航,而不仅仅是页面到页面的导航.诸如搜索栏或者目录等也可以包含在header元素中.下面是一个简单的例子: HTML5规范提到,header元素可以包含导航,所以图1.2中的元素可以使用一个包含logo