通过HTML5规范搞定i、em、b、strong元素的区别


Posted in HTML / CSS onMarch 04, 2017

前言

为了语义化HTML5增加了不少新标签。其中i、em和b、strong这两组标签是最容易弄混的,不好好去探究一下,还真说不清。这个也是前端面试中经常会问的问题。今天从源头上,也就是从HTML5的文档(https://w3c.github.io/html/textlevel-semantics.html#the-em-element)中来一探究竟!

区别详解 

首先,单从显示效果来看,在不额外添加css的情况下,i和em标签包围的文字将会以斜体呈现,b和strong标签包围的文字则会加粗显示。如图

通过HTML5规范搞定i、em、b、strong元素的区别

效果如下:

通过HTML5规范搞定i、em、b、strong元素的区别

<b>和<i>在创建之初就是简单地表示粗体和斜体样式,但是到了HTML5,为了语义化特性,这两个标签也被赋予了语义,样式倒不那么重要,因为那是css的事情。但上面两组标签语义还是各有侧重,下面依照规范逐一介绍:

i介绍

规范描述:

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

译文:

i 元素代表在普通文本中具有不同语态或语气的一段文本,某种程度上表明一段不同特性的文本,比如一个分类学名称,一个技术术语,一个外语习语,一个音译,一个想法,或者西方文本中的一艘船名。

举例:

// 分类学名称
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>

// 术语
<p>The term <i>prose content</i> is defined above.</p>

// 外语习语
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

大家可以在i标签上应用class来表明用这个元素的意图,这样该特殊样式在以后如需修改时,不需要仔细检查全部文档来更改。在使用i标签时候时,推荐考虑是否应用其他标签更为合适,如用em来突出强调,dfn标签来定义项目实例。

em介绍

规范描述:

The em element represents stress emphasis of its contents.

The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.

译文:

em 元素代表对其内容的强调。突出强调的位置会改变语句本身的意义。因此,元素构成内容的一个部分。用这种方式表示强调的程度依赖于是何种语言。

举例(类似汉语里面重读某个词表示不同含义):

// 这是一句不带任何强调的句子
<p>Cats are cute animals.</p>

// em 包围 Cats,强调猫是种可爱的动物,而不是狗或者其他动物
<p><em>Cats</em> are cute animals.</p>

// em 包围 are,代表句子所说是事实,来反驳那些说猫不可爱的人
<p>Cats <em>are</em> cute animals.</p>

// em 包围 cute,强调猫是一种可爱的动物,而不是有人说的刻薄、讨厌的动物
<p>Cats are <em>cute</em> animals.</p>

// 这里强调猫是动物,而不是植物
<p>Cats are cute <em>animals</em>.</p>

规范末尾note:

The em element isn’t a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.

The em element also isn’t intended to convey importance; for that purpose, the strong element is more appropriate.

译文:

em不是一个普通的斜体标签。有时为了部分文本由于不同的语态或语气需有别于段落的其他部分,这是i标签更为合适。em标签不是为了表明重要性,如果是出于这个目的,strong标签更为合适。

b介绍

规范描述:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

译文:

b 元素代表侧重实用目的而不带有任何额外重要性也不暗示不同语态或语气的一段文本,比如一段文本摘要中的关键词、一段审查中的产品名称、文本驱动软件中的可执行语句或者一篇文章的导语。

举例:

// 下面的 b 元素起到突出关键词的作用,但不具备强调重要性的作用
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

// 下面的 b 元素让被包围的词特殊化
<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

// 下面的 b 元素标注了文章的导语
<article>
  <h2>Kittens 'adopted' by pet rabbit</h2>
  <p><b class="lede">Six abandoned kittens have found an
    unexpected new mother figure — a pet rabbit.</b></p>
  <p>Veterinary nurse Melanie Humble took the three-week-old
    kittens to her Aberdeen home.</p>
  ...
</article>

规范建议:

The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.

就是说当没有其他元素合适时,最后才考虑用b标签。特别是,标题应该使用h1到h6标签,突出对内容的强调用em标签,突出重要紧急用strong标签,文本标记使用mark标签。

strong介绍

规范描述:

The strong element represents strong importance, seriousness, or urgency for its contents.

译文:

strong 元素代表内容的强烈的重要性、严重性或者紧急性。

重要性

<strong> 元素可以被用在标题(heading)、说明(caption)或者段落(paragraph)上,来显示这部分被包围的文字的重要性。

// 章节序号不重要,章节的名字才重要
<h1>Chapter 1: <strong>The Praxis</strong></h1>

严重性

<strong> 元素可以被用来标记警告或者警示标志。

<p><strong>Warning.</strong> This dungeon is dangerous.</p>

紧急性

<strong> 元素可以被用来表示需要被尽快看见的部分。

<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
  <li><p><strong>Turn off the oven.</strong></p></li>
  <li><p>Put out the trash.</p></li>
  <li><p>Do the laundry.</p></li>
</ul>

小结:

根据规范来看,em和strong的语义情景很明显,b和i的理解还是有些晦涩,个人的理解是:

1、em会对文本含义有改变作用,类似读一句话时重读某一个字或词会表达不一样的意思一样。

2、strong会突出包含文本的重要性、严重性和紧急性等。

3、i标签为了表示不同语态或特性的文本,有点像文字排版里面的那些用斜体表示的内容(技术术语、外语习语这些排版会有不同的内容)。

4、b标签主要是为了突出显示关键词、产品名称等;

b标签的语义规范也是很模糊,所以也是不太建议用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
HTML5 localStorage使用总结
Feb 22 #HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 #HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 #HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 #HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 #HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 #HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 #HTML / CSS
You might like
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
员工培训心得体会
2013/12/30 职场文书
教师辞职报告范文
2014/01/20 职场文书
颁奖晚会主持词
2014/03/25 职场文书
2015年统战工作总结
2015/05/19 职场文书
Python机器学习之基础概述
2021/05/19 Python