在HTML/XHTML中<b>和<strong>, <i>和<em>之间的区别是什么?什么时候使用它们?


当前回答

<i>, <b>, <em>和<strong>标签传统上具有代表性。但在HTML5中,它们被赋予了新的语义含义。

<i>和<b>在HTML4中用于字体样式。<i>为斜体,<b>为粗体。在HTML5中,<i>标签具有“替代声音或情绪”的新语义含义,<b>标签具有风格上偏移的含义。

<i>标签的使用例子有:分类名称、技术术语、来自另一种语言的惯用短语、音译、一种思想、西方文本中的船名。例如:

<p><i>I hope this works</i>, he thought.</p>

<b>标记的使用示例包括文档摘要中的关键字、评论中的产品名称、交互式文本驱动软件中的可操作单词、文章导语。

下面的示例段落在风格上与后面的段落有所偏移。

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em>和<strong>在HTML4中具有强调和强强调的含义。但在HTML5中,<em>表示强调,<strong>表示强烈的重要性。

在下面的例子中,在阅读之前的单词时应该会有语言上的变化。

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

在同样的例子中,我们可以使用<strong>标记,如下所示。

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

重视活动日期。

MDN裁判:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

其他回答

“它们的效果是一样的。但是,XHTML(一种更干净、更新的HTML版本)推荐使用<strong>标记。Strong更好,因为它更容易读懂——它的意思更清楚。此外,<strong>传达了一种含义-强显示文本-而<b>(用于加粗)传达了一种方法-将文本加粗。使用strong,如果您使用CSS样式表更改使文本强的方法,那么您的代码仍然有意义。

<i>和<em> "之间的差异也是如此。

谷歌迪克西特:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

只有在使用CSS样式类不方便或不可能的情况下才使用它们(比如博客系统,只允许在帖子中使用一些标签,最终嵌入样式)。另一个原因是支持非常老的浏览器(一些移动设备?)或原始的搜索引擎(给<b>或<strong>标签加分,而不是分析CSS样式)。

如果你可以定义CSS样式,那就使用它们。

问:strong, b, bold, em, i的区别?

答:这些是内联属性。

Strong:用于在语义上加粗显示文本或突出显示文本。

粗体或b:这个粗体标记只是常规粗体样式的偏移文本。

Em: < Em >标记在语义上强调重要的单词。

I: < I >标签只是斜体样式的偏移文本。

注意:您应该使用<strong></strong>和<em></em>标签,它们的有意义的名称告诉内容的类型。语义标签对SEO也有帮助。

正如其他人所说,<b>和<i>是显式的(即。"使此文本加粗"),而<strong>和<em>是语义的(即:“应该强调这篇文章”)。

在现代网络浏览器的环境中,很难看出两者的区别(它们似乎产生了相同的结果,对吧?),但想想为视力受损的人设计的屏幕阅读器。如果屏幕阅读器遇到<i>标记,它将不知道该做什么。但是如果它遇到<em>标签,它就知道应该向侦听器强调其中的内容。这就是实际的区别。

正如其他人所述,区别在于<b>和<i>硬编码字体样式,而<strong>和<em>指示语义,字体样式(或语音浏览器语调,或其他什么)在文本呈现(或语音)时确定。

You can think of this as a difference between a “physical” font style and a “logical” style, if you will. At some later time, you may wish to change the way <strong> and <em> text are displayed, say, by altering properties in a style sheet to add color and size changes, or even to use different font faces entirely. If you've used “logical” markup instead of hardcoded “physical” markup, then you can simply change the display properties in one place each in your style sheet, and then all of the pages that reference that style sheet get changed automatically, without ever having to edit them.

很狡猾,是吧?

这也是为段落、表格单元格、标题文本、标题等定义子样式(在文本标记中使用style=属性引用)以及使用<div>标记的基本原理。您可以在样式表中为逻辑样式定义物理表示,更改会自动反映在引用该样式表的网页中。想要源代码的不同表示形式?重新定义“代码”风格的字体、大小、粗细、间距等。

如果使用XHTML,甚至可以定义自己的语义标记,样式表将为您完成到物理字体样式和布局的转换。