网络编程
位置:首页>> 网络编程>> 网页设计>> em和strong的区别

em和strong的区别

作者:lifesinger 来源:岁月如歌 发布时间:2008-12-23 12:08:00 

标签:em,strong,html,区别

em 和 strong 的区别,可以从三个层次上来谈。

首先看 HTML 4.01 中的说明:

EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.

em 表示强调,strong 表示更强烈的强调。言简意赅,表明了 em 和 strong 的命名来历。并且在浏览器中,em 默认用斜体表示,strong 用粗体表示。这是第一个层次上的区别。

第二个层次上,在 Emphasis in context versus overall highlightingem vs. strong 这两篇文章中,做了很好的总结:

  1. em is for local emphasis. You see? Local emphasis. If you would emphasize a word in speech, use em.

  2. 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 草案 中做了详尽解释:

  1. The em element represents stress emphasis of its contents. The placement of emphasis changes the meaning of the sentence.

  2. 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强调的是重要性,不会改变句意。

0
投稿

猜你喜欢

  • 大大小小也搞过一些数据库设计,见过一些其他人的设计,看过些书,总结总结,经验谈。选表类型:大家都知道mysql的myisam表适合读操作大,
  • 页面中无法看见页面,指向的连接网页无法显示 解决方法:1、首先在Dreamweaver中不能中文作为文件名。连目录名也最好是英文的。2、如果
  • 一个日期联动选择器javascript源码,年月日联动显示,准确显示日期(包括闰年日期),可自定义日期范围。 【select】 先说清空一个
  • 这十则CSS技巧汇编于网络,作为老手已经司空见惯了,也没有什么新意,但温故而知新,或许阅读一遍也有一定的启发,本文主要面对CSS新手朋友,有
  • MySQL使用于认证目的的用户名,与Unix用户名(登录名字)或Windows用户名无关。缺省地,大多数MySQL客户尝试使用当前Unix用
  • 相信大家对于常见 CSS BUG 的处理已经相对比较熟悉,例如:IE6 Three Pixel Gap、IE5/6 Doubled Floa
  • 对于个人站长来说,如何能使自己的网站与众不同、充满个性,一直是不懈努力的目标。除了尽量提高页面的视觉效果、互动功能以外,如果能在打开网页的同
  • 本人曾经用过的备份方式有:mysqldump、mysqlhotcopy、BACKUP TABLE 、SELECT INTO OUTFILE,
  • 以下的文章主要是介绍SQL Server数据库与其实际应用元数据,我前两天在相关网站看见SQL Server数据库与其实际应用元数据的资料,
  • 在ASP输出页面只是调出数据库里内容展现给用户看没有使用SESSION等动态属性,是可以CACHE的,以加快访问速度具体操作方法如下:在as
  •  <!--模板--> <table width="100%" borde
  • 这些日子,几乎每个人都在谈论XML (Extensible Markup Language),但是很少有人真正理解其含义。XML的推崇者认为
  • 作为互联网产品设计师,在和前端开发人员沟通时你是否常常会听到这样的声音: —— “大姐,给点专业精神好不好,这个表格是自适应的,你
  • 在很多语言的学习中,“事件”都是一个比较难理解,但是又是一个很重要的概念。javascript中的事件处理也是一样,正因为有了事件处理,才会
  • slice 可以用来获取数组片段,它返回新数组,不会修改原数组。除了正常用法,slice 经常用来将 array-like 对象转换为 tr
  • LoadRunner监控MySQLhttp://www.docin.com/p-92272846.htmlAdvanced MySQL Pe
  • MS SQL基本语法及实例操作 一:建表并初始化 ============================ create database
  • phpMyAdmin 是一套可以通过WEB来管理 MySQL-server 以及单一数据库的 PHP
  • 目前,很多互联网应用程序都提供了全文搜索功能,用户可以使用一个词或者词语片断作为查询项目来定位匹配的记录。在后台,这些程序使用在一个SELE
  • RegExp对象的语义和使用:检查字符串匹配获取字符串中的部分内容在原字符串的基础上构建一个新的字符串(包括添加、删除和修改)构建一个Reg
手机版 网络编程 asp之家 www.aspxhome.com