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

时间 2019-11-19

标签 html strong 标签区别栏目 HTML 繁體版

原文原文链接

先看效果html

 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 标签

标签告诉浏览器把其中的文本表示为强调的内容。对于全部浏览器来讲，这意味着要把这段文字用斜体来显示。html5

在文本中加入强调也须要有技巧。若是强调太多，有些重要的短语就会被漏掉；若是强调太少，就没法真正突出重要的部分。这与调味品同样，最好仍是不要滥用强调。浏览器

尽管如今 标签修饰的内容都是用斜体字来显示，但这些内容也具备更普遍的含义，未来的某一天，浏览器也可能会使用其余的特殊效果来显示强调的文本。若是你只想使用斜体字来显示文本的话，请使用 标签。除此以外，文档中还能够包括用来改变文本显示的级联样式定义。字体

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

HTML 标签

标签和 标签同样，用于强调文本，但它强调的程度更强一些。ui

浏览器一般会以不一样于 标签的方式来显示 标签中的内容，一般是用加粗的字体（相对于斜体）来显示其中的内容，这样用户就能够把这两个标签区分开来了。spa

若是常识告诉咱们应该较少使用 标签的话，那么 标签出现的次数应该更少。若是说用 标签修饰的文本好像是在大声呼喊，那么用 标签修饰的文本就无异于尖叫了。沉默寡言的人说出的话老是一言既出;驷马难追，与此相同，限制 的使用能够令应该更加引人注意，并且更加有效。code

举一个例子，常常访问 W3school 的用户能够注意到了，许多教程页面的第一句摘要都是以粗体显示的，而实际上，咱们对这一句摘要使用了 标签。使用这个标签的理由是，咱们认为教程摘要不只归纳了其所在页面的内容，并且位于页面的最重要的位置，其内容天然是很是重要的且值得强调的。xml

HTML 标签htm

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

提示和注释

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

HTML 标签

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

小结：

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

在此建议你们完全抛弃b和i标签，而使用strong和em。这都是为了表达意义和结构，而不单单表示外观。

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

...

In HTML 4, set font to boldface where possible. Equivalent CSS: {font-weight: bold}. ... 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]

...

In HTML 4, set font to italic where possible. Equivalent CSS: {font-style: italic}. ... 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]

...

Emphasis (conventionally displayed in italics)

EM existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.

...

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.

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

W3C官方是这样解释的

HTML <em> 标签

HTML <strong> 标签

提示和注释