剑侠天涯

Just Do It!
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

HTML中strong与b,em与i标签的区别

Posted on 2016-08-21 00:24  三颗油  阅读(1646)  评论(0)  编辑  收藏  举报 


先看效果








 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <p style="font-size: 36px">
 9         这是一段普通文字<br/>
10         <strong>这是一段strong文字</strong> <br/>
11            <b>这是一段加粗文字b</b><br/>
12            <em>这是一段em文字</em> <br/>
13         <i>这是一段斜体文字i</i> </br>
14     </p>
15 </body>
16 </html> 




 


W3C官方是这样解释的


HTML <em> 标签


<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。


在文本中加入强调也需要有技巧。如果强调太多，有些重要的短语就会被漏掉；如果强调太少，就无法真正突出重要的部分。这与调味品一样，最好还是不要滥用强调。


尽管现在 <em> 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义，将来的某一天，浏览器也可能会使用其他的特殊效果来显示强调的文本。如果你只想使用斜体字来显示文本的话，请使用 <i> 标签。除此之外，文档中还可以包括用来改变文本显示的级联样式定义。


除强调之外，当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候，也可以考虑使用 <em> 标签。例如，W3School 经常对重要的术语使用 <em> 标签。<em> 标签可以用来把这些名称和其他斜体字区别开来。


HTML <strong> 标签


<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。


浏览器通常会以不同于 <em> 标签的方式来显示 <strong> 标签中的内容，通常是用加粗的字体（相对于斜体）来显示其中的内容，这样用户就可以把这两个标签区分开来了。


如果常识告诉我们应该较少使用 <em> 标签的话，那么 <strong> 标签出现的次数应该更少。如果说用 <em> 标签修饰的文本好像是在大声呼喊，那么用 <strong> 标签修饰的文本就无异于尖叫了。沉默寡言的人说出的话总是一诺千金，与此相同，限制 <strong> 的使用可以令应该更加引人注意，而且更加有效。


举一个例子，经常访问 W3school 的用户可以注意到了，许多教程页面的第一句摘要都是以粗体显示的，而实际上，我们对这一句摘要使用了 <strong> 标签。使用这个标签的理由是，我们认为教程摘要不仅概括了其所在页面的内容，而且位于页面的最重要的位置，其内容自然是非常重要的且值得强调的。


 


HTML <b> 标签


<i>标签，告诉浏览器将包含其中的文本以粗体(bold)显示。


提示和注释


注释：根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 <b> 标签作为最后的选项。HTML5 规范声明：应该使用 <h1> - <h6> 来表示标题，使用 <em> 标签来表示强调的文本，应该使用 <strong> 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。


 


HTML <i> 标签


告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。


 


小结：


strong与em是结构化标签，而b与i是表现化标签。那么我们在网站建设中到底该怎么使用strong与b，以及使用em与i呢。


在此建议大家彻底抛弃b和i标签，而使用strong和em。这都是为了表达意义和结构，而不仅仅表示外观。


如果我们在网页中不需要强调某个词语，但是又想使用加粗或者斜体，我们可以使用CSS，以下两条分别是字体加粗和斜体的CSS规则： 
{font-weight: bold;}{font-style: italic;} 


  


  


<b>...</b> 


In HTML 4, set font to boldface where possible. Equivalent CSS: {font-weight: bold}. <strong>...</strong> usually has the same effect in visual browsers, as well as having more semantic meaning, under HTML 4.01. 
In HTML 5, however, b has its own meaning, distinct from that of strong. It denotes "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."[28]


<i>...</i> 


In HTML 4, set font to italic where possible. Equivalent CSS: {font-style: italic}. <em>...</em> usually has the same effect in visual browsers, as well as having more semantic meaning, under HTML 4.01. 
In HTML 5, however, i has its own semantic meaning, distinct from that of em. It denotes "a different quality of text" or "an alternative voice or mood"—e.g., a thought, a ship name, a binary species name, a foreign-language phrase, etc.[29]


<em>...</em> 


Emphasis (conventionally displayed in italics) 
EM existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.


<strong>...</strong> 


strong emphasis (conventionally displayed bold). 
An aural user agent may use different voices for emphasis. 
STRONG existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.