em和strong的区别
作者:lifesinger 来源:岁月如歌 发布时间:2008-12-23 12:08:00
em 和 strong 的区别,可以从三个层次上来谈。
首先看 HTML 4.01 中的说明:
EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.
em 表示强调,strong 表示更强烈的强调。言简意赅,表明了 em 和 strong 的命名来历。并且在浏览器中,em 默认用斜体表示,strong 用粗体表示。这是第一个层次上的区别。
第二个层次上,在 Emphasis in context versus overall highlighting 和 em vs. strong 这两篇文章中,做了很好的总结:
em is for local emphasis. You see? Local emphasis. If you would emphasize a word in speech, use em.
strong is for global highlighting. When somebody looks at your document, at a glance, certain words and phrases should jump out. These are the words and phrases that make up the gist of the content — the highlights.
em 用来局部强调,strong 则是全局强调。从视觉上考虑,em 的强调是有顺序的,阅读到某处时,才会注意到。strong 的强调则是一种随意无顺序的,看见某文时,立刻就凸显出来的关键词句。斜体和粗体刚好满足了这两种视觉效果,因此也就成了 em 和 strong 的默认样式。
感觉上面已经解释得很清楚了?我们再来看看第三个层次上的区别。HTML5 草案 中做了详尽解释:
The em element represents stress emphasis of its contents. The placement of emphasis changes the meaning of the sentence.
The strong element represents strong importance for its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.
em 表示内容的着重点(stress emphasis),strong 表示内容的重要性(strong importance),strong 不会改变所在句子的语意,em 则会改变所在句子的语义。并且举了一个非常好的例子:
<p><em>Cats</em> are cute animals.</p>
强调猫,讨论的是哪种动物聪明可爱。
<p>Cats <em>are</em> cute animals.</p>
强调是,讨论的是猫是不是聪明可爱。
<p>Cats are <em>cute</em> animals.</p>
强调聪明可爱,讨论的是猫究竟是聪明可爱呢还是愚蠢讨厌。
<p><strong>Warning.</strong> This dungeon is dangerous.
<strong>Avoid the ducks.</strong> Take any gold you find.
<strong><strong>Do not take any of the diamonds</strong>,
they are explosive and <strong>will destroy anything within
ten meters.</strong></strong> You have been warned.</p>
strong 表示的是重要性上的强调,不会引起句子意思的变化。最后注意 em 和 strong 都可以有多重,比如可以用两个 strong 来表示内容很重要。
可以看出,第二个层次上所说的局部强调和全局强调是不够准确的。em 和 strong 区别的玄妙处,在 HTML5 草案里才得到淋漓尽致的阐释。推荐大家有时间的时候,仔细阅读 HTML5 草案。有很多元素的语义,都阐释得非常清楚,对于我们如何在最恰当的地方使用最恰当的标签,非常具有价值。
最后,在 前端与民工 一文的回复中,以及收到的邮件里,很遗憾的没有发现有谁知道第三个层次上的区别。因此准备的礼品(我还真准备了10份),很落寞的发不出去了。不过这篇文章仅是个引子,接下来准备用一系列文章来探讨HTML中元素的语义。礼品的承诺继续有效,留给下一个话题:
请阐述dl的语义,并列举至少5种使用场景。
可以查阅资料,将结果贴在回复里,或邮件发送给我都可以,礼物有限,前10个答对的必送。
补充:和一些朋友又讨论了下,最后我的看法是:
em 是句意强调,加与不加会引起语义变化。
strong 是重要性强调,和局部还是全局无关,局部强调用strong也可以,strong强调的是重要性,不会改变句意。
猜你喜欢
- 目录前言1.获取当前时刻时间1.1返回当前时刻的日期和时间1.2获取当前时刻的日期1.3获取当前时刻的时间1.4获取当前时刻的周数2.日期时
- 这篇博客将介绍如何使用OpenCV制作Mask图像掩码。使用位运算和图像掩码允许我们只关注图像中感兴趣的部分,截取出任意区域的ROIs。应用
- 动态Web程序运行在Web容器之中,利用Web容器可以使用JDBC技术来实现数据库数据的CRUD操作,将数据表中的数据取出并结合JSP动态生
- 本文实例讲述了Python协程 yield与协程greenlet简单用法。分享给大家供大家参考,具体如下:协程协程,又称微线程,纤程。英文名
- 1.使用方法:find.py 目录名称 2. 主要是采用python正则表达式来匹配的,可以在keywords中添加自己定义的正则,格式:
- 最近做了一个小项目,里面有一个需求需要添加一个动态进度条,进度条的样式就类似于水波来回起伏的那种形状,下面就是最初的展示效果(有一点区别,这
- 全国抗"疫"这么久终于见到曙光,在家待了将近一个月,现在终于可以去上班了,可是却发现出门必备的口罩却一直买不到。最近看到
- 什么是 go-cachego-cache 是一个轻量级的基于内存的 K-V 储存组件,内部实现了一个线程安全的 map[strin
- <select id = "cityList" > <select id =
- 前言:在软件测试中,为项目编写接口自动化用例已成为测试人员常驻的测试工作。本文以python为例,基于笔者曾使用过的三种用例数据读取方法:x
- 我就废话不多说了,大家还是直接看代码吧~#编写程序将列表中的偶数变成他的平方def word_len(s): # s = [i
- 我们前面介绍的Selenium的WebDriver测试方法是基于网页来进行的。之前的例子都是用简单的网页来操作,可能体会不到网页的加载过程,
- 方法一使用Python中的内置函数isupper()和islower()来判断一个字母是否为大写或小写字母。# 获取用户输入letter =
- 个人想到的解决方法有两种,一种是 .replace(' old ',' new ')
- 引言对 axios 二次封装,更加的可配置化、扩展性更加强大灵活通过 class 类实现,class 具备更强封装性(封装、继承、多态),通
- 一、什么是localStorage?在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了
- c shell perl php下的日期时间转换: 秒数与人类可读日期 scalar localtime 与 seconds since `
- 导语我第一次玩24点是初中的时候,那时候和堂弟表哥在堂妹家玩,堂妹提出玩24点游戏,堂妹比我们小三岁,可能正在上小学吧。拿出一副扑克牌去掉大
- 废话不多说了,直接给大家贴代码了,具体代码如下所示:<script type="text/javascript"&
- 一、概述使用K-means进行用户聚类划分主要的目的是实现用户画像的电影推荐系统,该推荐包括两部分,第一部分通过协同过滤实现电影推荐 ,第二