i, b, em, strong元素在HTML5中的新语义
2016-11-08 15:11
295 查看
本文地址:http://www.zhangxinxu.com/wordpress/?p=2061
HTML5中的语义那是相当劳力伤神的一件事啊。顾名思意,一知半解情况下使用HTML5的语义化标签,多半会进入“不合理使用标签”的深色名单。我们都是对自己有要求的人,虽然很烦,很折腾,我们还是有必要花大量的功夫去理解每个HTML5标签的真正语义。
不过嘛,这HTML5虽然势如破竹,但是,要真正一统天下还需时日。所以,HTML4还不是很了解的青年们,不必急于追随潮流,什么HTML5啊之类的,就当是浮云,知道有几只眼睛几条腿就行了。因此,对于这类青年,那些专门讲HTML5的文章,基本上可以当作流风之回雪。本文有些特殊,是对比HTML4,HTML5几个标签元素的。因此,不管你是哪个级别的青年,本文内容都算是有看头的。
很多HTML4中的标签元素在HTML5中被赋予了很多新的语义,这就像是给前朝遗孤赐予个什么官爵之类。本文就将讲述
(W3C:Markup, WHATWG)
i元素
下面是W3C草案引用:
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose (content whose typical typographic presentation is italicized).
W3C specification
我们不用管上面abc说的是什么,直接看下面的例子。
正如概要提到的,语义化的
下面开始示例。
一段剧本,引用如下:
尔康:紫薇,快走,快离开,容嬷嬷要来了!!
紫薇依依不舍离开尔康的房间……
尔康:好了,终于把粘人的紫薇给弄走了,接下来就是二人独处的大好时光了!
尔康:琪琪,你可以从衣柜里出来了。
上面就使用了
还是剧本节选,引用如下:
永琪:尔康,不要,不要啊,やめて(雅蠛蝶)!
使用
皇阿玛:紫薇,这是使用天山雪域红景天熬的粥,你有没有听过“相宜本草,红景天幼白系列,以红,养白”。来,多吃点!
使用
b元素
W3C草案引用如下:
The
of text offset from its surrounding content without conveying any extra importance; for example, keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold text.
W3C specification
上面第一个例子中的人名(尔康),就是使用的
em元素
W3C草案引用如下:
The em element represents a span of text with emphatic stress.
W3C specification
em元素过去就是强调的意思。在HTML5中的释义总有一个名为”stress”的单词伴随左右。”stress”其实也是强调的意思,我为了有所区分,就翻译成本意“压力”的意思。用在语句某个单词上来改变句子的侧重。举例说明:
紫薇晕倒……
皇阿玛:立即给我传太医。
上面皇阿玛台词中,强调的是“太医”(太医被em标签包裹),要传的是太医,不是紫薇的心上人尔康。
紫薇晕倒……
皇阿玛:立即给我传太医。
而这里,“立即”被
strong元素
W3C草案引用如下:
The strong element represents a span of text with strong importance.
W3C specification
这个元素真没什么好说的,HTML4跟HTML5有什么差异吗?我是没看出来。我们可以嵌套使用
虽然HTML5中以前的一些表象元素
等,老外对此可谓观点多多。时间关系,我就不一一叙述了。
文章转载自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=2061
一、普通的开头
HTML5中的语义那是相当劳力伤神的一件事啊。顾名思意,一知半解情况下使用HTML5的语义化标签,多半会进入“不合理使用标签”的深色名单。我们都是对自己有要求的人,虽然很烦,很折腾,我们还是有必要花大量的功夫去理解每个HTML5标签的真正语义。不过嘛,这HTML5虽然势如破竹,但是,要真正一统天下还需时日。所以,HTML4还不是很了解的青年们,不必急于追随潮流,什么HTML5啊之类的,就当是浮云,知道有几只眼睛几条腿就行了。因此,对于这类青年,那些专门讲HTML5的文章,基本上可以当作流风之回雪。本文有些特殊,是对比HTML4,HTML5几个标签元素的。因此,不管你是哪个级别的青年,本文内容都算是有看头的。
很多HTML4中的标签元素在HTML5中被赋予了很多新的语义,这就像是给前朝遗孤赐予个什么官爵之类。本文就将讲述
i,
b,
em,
strong元素被HTML5包装成什么样子。
二、概要
<i>– 原本只是倾斜,现在用来体现一种“交替的声音”,通俗将就是普通段落文字中文艺的或2B的文字。像是外语(例如我经常写文章时混搭一些英文或日语)、科技术语(如超氧化物歧化酶SOD)或是用做排版的斜体文字。
(W3C:Markup, WHATWG)
<b>– 原本就是加粗,现在表示“文体突出”文字,通俗将就是普通段落文字中突出不安分的文字。像是文档概要中的关键字,评论中的产品名。或者代表强调的排版方式。(W3C:Markup, WHATWG)
<em>– 原本表示强调,现在指有压力的强调。(W3C:Markup, WHATWG)
<strong>– 原本表示更强强调,现指相当重要,基本上都是一样的。(W3C:Markup, WHATWG)
三、详细
<i>和
<b>都是文字样式元素,没有任何语义,就是用来控制文字的长相的,因此又称为表象元素,是一度不推荐使用的标签。如今,这两个元素有了语义,但是,它们的样式又能被CSS改变。像是
<b>元素,并不是非得是加粗。正因如此,推荐使用类名来表示其含义以便日后可以轻松改变其样式。
i元素
下面是W3C草案引用:
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose (content whose typical typographic presentation is italicized).
W3C specification
我们不用管上面abc说的是什么,直接看下面的例子。
正如概要提到的,语义化的
<i>元素可以用来表示:外文单词、生物分类、科技术语、船名、剧本舞台方位、乐谱、三个代表思想或手写文字。
下面开始示例。
一段剧本,引用如下:
尔康:紫薇,快走,快离开,容嬷嬷要来了!!
紫薇依依不舍离开尔康的房间……
尔康:好了,终于把粘人的紫薇给弄走了,接下来就是二人独处的大好时光了!
尔康:琪琪,你可以从衣柜里出来了。
上面就使用了
<i class="voiceover">来表示话外音,以反映尔康内心少女般的情怀。
还是剧本节选,引用如下:
永琪:尔康,不要,不要啊,やめて(雅蠛蝶)!
使用
<i lang="ja-latn">やめて</i>来表明“不同语言”。
皇阿玛:紫薇,这是使用天山雪域红景天熬的粥,你有没有听过“相宜本草,红景天幼白系列,以红,养白”。来,多吃点!
使用
<i class="taxonomy">红景天</i>表示分类名。
<i>的使用是最为淡定的——像
<em>为压力强调文字,
<strong>为重要文字,
<cite>为引用或文献目录,
<dfn>为定义单词,
<var>为数学变量。记住,在使用
<i>的使用,最好使用
class属性让人知道为什么这个元素要被使用。对了,上面语言
lang属性元素可以使用
[lang="ja-latn"]选择器进行样式定义。
b元素
W3C草案引用如下:
The
<b>element represents a span
of text offset from its surrounding content without conveying any extra importance; for example, keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold text.
W3C specification
<b>和
<i>一直都是一路货色。在我看来,虽然在HTML5中这两个元素被赋予的语义,但是却是下等人的感觉,专干一般人不干的杂活。
上面第一个例子中的人名(尔康),就是使用的
<b>标签,
<b class="character">尔康</i>用来表示人物。
<b>元素该在什么地方使用呢?就是下面这些元素都不适合的时候:表重要的<strong>,表强调的
<em>,表标题的
<h1>–<h6>,表高亮或标记文本的
<mark>等。
<b>元素就像是三国杀五谷丰登中最后一位拿牌的人, sign~~
em元素
W3C草案引用如下:
The em element represents a span of text with emphatic stress.
W3C specification
em元素过去就是强调的意思。在HTML5中的释义总有一个名为”stress”的单词伴随左右。”stress”其实也是强调的意思,我为了有所区分,就翻译成本意“压力”的意思。用在语句某个单词上来改变句子的侧重。举例说明:
紫薇晕倒……
皇阿玛:立即给我传太医。
上面皇阿玛台词中,强调的是“太医”(太医被em标签包裹),要传的是太医,不是紫薇的心上人尔康。
紫薇晕倒……
皇阿玛:立即给我传太医。
而这里,“立即”被
em包裹,说明强调的是时间的及时性,耽误1分钟我都要你们的脑袋。
strong元素
W3C草案引用如下:
The strong element represents a span of text with strong importance.
W3C specification
这个元素真没什么好说的,HTML4跟HTML5有什么差异吗?我是没看出来。我们可以嵌套使用
<strong>和
<em>元素来表示相对重要性。
四、爱奇艺的结尾
虽然HTML5中以前的一些表象元素i,
b都语义化了,但是,有人觉得这是个糟糕的想法,无论是提供者还是开发者都没有这么多蛋疼的闲功夫去确认i或是b标签的语义,HTML4中
em,
strong表意,
i,
b表形并没有什么让人不可接受的。
等,老外对此可谓观点多多。时间关系,我就不一一叙述了。
文章转载自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=2061
相关文章推荐
- i, b, em, strong元素在HTML5中的新语义
- i, b, em, strong元素在HTML5中的新语义
- html5中的b元素与strong元素,i元素和em元素有什么区别
- HTML5语义元素
- HTML5 语义元素(二)文本内容
- HTML5学习:语义元素article
- HTML5 文本语义元素
- HTML5学习:语义元素section
- html5新语义元素
- HTML5语义元素总结
- HTML5新增的语义元素、JS常用对象
- 努力学习 HTML5 (4)—— 浏览器对语义元素的支持情况
- HTML5-语义元素
- HTML5—新语义元素header、nav、section、article、aside、footer等使用及兼容
- HTML5 新语义元素的浏览器兼容问题
- HTML5—新语义元素header、nav、section、article、aside、footer等使用及兼容
- HTML5 语义元素
- HTML5—新语义元素header、nav、section、article、aside、footer等使用及兼容
- HTML5 结构语义元素的标题h1~h6元素
- HTML5的结构和语义(3):语义性的块级元素