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

简介:

本节书摘来自异步社区《HTML5开发手册》一书中的第2章,第2.7节,作者: 【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.7 现存元素的变化

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

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


b134ab232957ac977b66aac55fb3e77a733da9e4

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


<a href=https://yqfile.alicdn.com/34b92f719ccbc1c8bcc8965fbfb21e4cfe559e5e.png" >

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


8924a38939c5b23cec8acfd94247ed2a038c8322

(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 倒序显示的有序列表


<a href=https://yqfile.alicdn.com/534a6a5ef2851bfdfd2e4a64b38be08f63a53737.png" >

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

My favorite colors
3.Blue

2.Green

1.Red

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


0120846da60b4890eeed888c51354f5b3e986fd9

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

代码2.9 嵌套的有序列表


<a href=https://yqfile.alicdn.com/2a2a35939fcaed958bb6d96e6d32bbc86c1e8b13.png" >

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

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 创建术语表


<a href=https://yqfile.alicdn.com/0c6415377b7321ec8b7c696ed42b953615e01064.png" >

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

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


<a href=https://yqfile.alicdn.com/a61fcff002fb7bb4b6bcacad0f163c9e7be6b910.png" >

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


a6c74e63057e3cc7ae5fcc1908ce26f7f7dfd18a

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

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


<a href=https://yqfile.alicdn.com/8f66b8d39a9c4b60a5c7765e95f2c8b004da849a.png" >

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


8378a137cf04b574b21ff51d41590f7c725f6b56

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


fa1bbc269dc3ca16f04d035f94258b4c7d958d4a

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

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


724058bfbd1cef55dd3457bc97ef26339be9ca1f

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

代码2.12 b元素


bae8909dfbee5dacbba49ecfd573203b50b9bc4d

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


<a href=https://yqfile.alicdn.com/ac5032e9fc03f465626d7497948d5d16651b8ca1.png" >

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


aba95a2be109e7e470f736d0176cb8f2ad617773

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

218677fd64e5f5ed0a18ac96a906aa52b7c9d7c3

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


75291145ecb281177d84cb8b4ea0c5feb665b31f

缩写词与首字母缩略词不同: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来显示)
如上列出的是当前已经删除的元素。若你仍在使用它们,我们建议你尽快停止。

相关文章
|
3月前
|
前端开发 JavaScript
Playwright系列(9):常见操作HTML 元素方式
Playwright系列(9):常见操作HTML 元素方式
|
3月前
|
缓存 前端开发 JavaScript
13个很酷但很少有人知道的HTML元素
13个很酷但很少有人知道的HTML元素
36 0
13个很酷但很少有人知道的HTML元素
|
3月前
|
JavaScript
用什么代码可以在页面添加html元素呢?
用什么代码可以在页面添加html元素呢?
|
6天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
19 10
|
16天前
|
JavaScript
Vue移动 HTML 元素到指定位置 teleport 标签
Vue移动 HTML 元素到指定位置 teleport 标签
|
1月前
HTML列表、表格和媒体元素
HTML列表、表格和媒体元素
11 0
|
1月前
|
安全 数据安全/隐私保护
HTML表单元素
HTML表单元素
8 0
|
1月前
HTML <link> 元素
HTML <link> 元素。
16 5
|
1月前
|
移动开发 HTML5
编程笔记 html5&css&js 024 HTML表单元素
编程笔记 html5&css&js 024 HTML表单元素
|
2月前
|
前端开发 JavaScript 安全
react如何渲染包含html标签元素的字符串
react如何渲染包含html标签元素的字符串
54 0