您的位置: 首页 > 技术文档 > 网页制作 > em和strong的区别
HTML与javascript中常用编码浅析 回到列表 不唐突的JavaScript的七条准则
 em和strong的区别

作者:lifesinger 时间: 2008-12-22 文档类型:转载 来自:岁月如歌

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

本文链接:http://www.blueidea.com/tech/web/2008/6342.asp 

出处:岁月如歌
责任编辑:bluehearts

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章
关于基于字体大小(em)的设计
标准的 语义的 非侵入的页签切换
简单form标准化实例——语义结构
用户研究方法——焦点小组
作者文章
理解"渐进增强"
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2