开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《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来显示)
如上列出的是当前已经删除的元素。若你仍在使用它们,我们建议你尽快停止。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Firefox开发者工具里查看HTML元素的Box模型
Firefox开发者工具里查看HTML元素的Box模型
0 0
将html转化为canvas图片(清晰度高)的方法
将html转化为canvas图片(清晰度高)的方法
0 0
【物联网智能网关-13】Html5:Canvas+WebSocket实现远程实时通信(上)
基于Html5的Canvas和WebSocket技术详细介绍远程实时通信的实现
680 0
基于 HTML5 Canvas 的工控机柜 U 位动态管理
U 是一种表示服务器外部尺寸的单位,是 unit 的缩略语,详细的尺寸由作为业界团体的美国电子工业协会(EIA)所决定。之所以要规定服务器的尺寸,是为了使服务器保持适当的尺寸以便放在铁质或铝质的机架上。
1674 0
基于 HTML5 Canvas 的 3D 压力器反序列化
在实际应用中,我觉得能够通过操作 JSON 文件来操作 3D 上的场景变化是非常方便的一件事,尤其是在做编辑器进行拖拽图元并且在图元上产生的一系列变化的时候,都能将数据很直观地反应给我们,这边我们简单地做了个基础的例子,给大家参考看看。
1042 0
基于 HTML5 Canvas 的 3D 碰撞检测
这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Animate”就能让中间的那一个图元单独绕着某一个点旋转,表单最上方的“Axis”真的完全不知道拿来干嘛用的,觉得好累赘,而且是官网的 Demo,也没有解释。
851 0
基于 HTML5 Canvas 的 3D 模型列表贴图
少量图片对于我们赋值是没有什么难度,但是如果图片的量大的话,我们肯定希望能很直接地显示在界面上供我们使用,再就是排放的位置等等,这些都需要比较直观的操作,在实际应用中会让我们省很多力以及时间。下面这个例子给出了解决的方法,当然大家有需要的话,可自行下载更改代码,变成自己的项目。
1152 0
基于HTML5 Canvas WebGL制作分离摩托车
工业方面制作图表,制作模型方面运用到 3d 模型是非常多的,在一个大的环境中,构建无数个相同的或者不同的模型,构建起来对于程序员来说也是一件相当头疼的事情,我们利用 HT 帮大家解决了很大的难题,无数个例子可在官网上查找到 http://hightopo.
1040 0
基于HTML5 Canvas的3D动态Chart图表
发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易做不成美丽的。
825 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
编程语言如何演化-以JS的private为例
立即下载