语义化HTML:i、b、em和strong标签

一、前言                          

  在HTML4.1中i和b作为表象标签分别表示斜体和粗体样式,而强调样式与内容分离的XHTML中则出现样式效果相同的em和strong表义标签,此时我们会建议避免使用i和b标签,应该改用em和strong标签。

  但在HTML5对i和b赋予新的语义,本文将再一次认识它们!

二、元素语义                        

1. 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

  语义化的 <i>元素 可以用来表示:外文单词、生物分类、科技术语、船名、剧本舞台方位、乐谱、三个代表思想或手写文字。建议通过class特性标识具体语义,若为表示外文单词则采用lang特性标识具体的语言种类。示例:

滑板介绍 滑板的基本动作名为豚跳(ollie)

<h3>滑板介绍</h3>
<p>
滑板的基本动作名为<i class="skateboard">豚跳</i>(<i lang="en_us">ollie</i>)
</p>

 2. 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>元素 用于表示:局部范围内不重要但需要突出的内容,如概要中的关键字、评论中的名词等。建议通过class特性标识具体语义。示例:

滑板构造概要   滑板由轮子板面磨砂纸支架(truck)组成。

<h3>滑板构造概要</h3>
<p>
滑板由<b class="compent">轮子</b>、<b class="component">板面</b>、<b class="component">磨砂纸</b>和<b class="component">支架</b>(<i lang="en_us>"truck</i>)组成。
</p>

  3. em标签

    W3C草案:

The em element represents a span of text with emphatic stress. W3C specification

   语义化的 <em>元素 表示:局部范围内强调的内容,用于改变句子或段落的侧重点。注意其作用范围为局部,也就是阅读到某段落或句子时才会注意到。示例:

ollie教学    后脚踏板的同时前脚提起,并向斜前方跳起。    后脚踏板的同时前脚提起,并向斜前方跳起

   第一句强调 前脚提起,第二句强调 向斜前方跳起。

  4. strong标签

    W3C草案:

The strong element represents a span of text with strong importance. W3C specification

    语义化的<strong>元素表示:全部范围内强调的内容,随意无序扫描全文时能突出的关键内容。

三、总结                          

  理解语义化HTML确实不易啊,继续努力吧!

四、参考                          

http://www.zhangxinxu.com/wordpress/2011/11/i-b-em-strong-html5-%E8%AF%AD%E4%B9%89/

http://www.blueidea.com/tech/web/2008/6342.asp

http://www.lixuepeng.com/post/1906.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据风控

如何在R中绘制热力地图

一、首先绘画出地图map 地图(map) 按一定的比例运用符号、颜色、文字注记等描绘显示地球表面的自然地理、 行政区域、社会经济状况的图形。 地...

39610
来自专栏练小习的专栏

[译]响应式图像

自从2010年Ethan Marcotte开始讨论响应式网页设计,开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ,因为我们对同一个网站在...

2019
来自专栏小古哥的博客园

CSS3边框图片-像素虚边的问题

虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-imag...

2614
来自专栏进步博客

[译]响应式图像

自从2010年Ethan Marcotte开始讨论响应式网页设计,开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ,因为我们对同一个网站在...

962
来自专栏何俊林

通过GPUImage实现40+种滤镜与实时美颜功能

推荐一个滤镜和美颜功能实现项目,包含40+种滤镜与实时美颜与后处理美颜功能,非常强大。 相机预览模式 示例见:com.seu.magiccamera.activ...

4688
来自专栏Material Design组件

Human Interface Guidelines —— Image Views & Maps & Pages

3227
来自专栏IMWeb前端团队

如何使用 CSS Grid 布局 IOS11 新的控制中心

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 昨天 IOS11 就可以开始安装更新了,下图就是它带来的新的控制中心界面,是...

1966
来自专栏IMWeb前端团队

利用canvas实现一个抠图小工具

利用canvas实现一个抠图小工具 0 前言 作为新一代的前端开发工程师,PS抠图切图已经不是必备技能了,我们有UI/交互/视觉等更专业的设计同学帮我们做这个事...

4365
来自专栏瞎说开发那些事

使用RPA绘制素描图

2086
来自专栏偏前端工程师的驿站

CSS魔法堂:小结一下Box Model与Positioning Scheme

前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考。 《CSS魔法堂:重新...

1896

扫码关注云+社区

领取腾讯云代金券