<b>和<强>,<i>和<em>有什么区别?

在超文本标记语言/XHTML中,<b><strong><i><em>有什么区别?你应该什么时候使用它们?

499459 次浏览

<b><i>是显式的-它们分别指定粗体和斜体字。

<strong><em>是语义的-它们指定封闭文本应该以某种方式“强”或“强调”,通常是粗体和斜体字,但允许通过CSS控制实际样式。因此,这些在现代网页中是首选的。

<strong><em>为您的文档添加了额外的语义。碰巧它们还为您的文本提供了粗体和斜体字样式。

你当然可以用CSS覆盖它们的样式。

另一方面,<b><i>只应用字体样式,不应该再使用。(因为你应该使用CSS格式化,如果文本真的很重要,那么你可能会让它变得“强烈”或“强调”!)

希望这有道理。

应该避免使用<b><i>,因为它们描述了文本的风格。相反,使用<strong><em>,因为它描述了文本的语义学(意义)。

就像超文本标记语言中的所有东西一样,你不应该考虑你希望它如何,而是你实际上平均。当然,它可能只是粗体和斜体,但不是屏幕阅读器。

它们具有相同的效果。然而,XHTML,一个更干净,更新版本的超文本标记语言,建议使用<strong>标记。强更好,因为它更容易阅读-其含义更清晰。此外,<strong>传达了一种含义-强烈显示文本-而<b>(粗体)传达了一种方法-将文本加粗。对于strong,如果您使用CSS样式表来更改使文本变得强大的方法,您的代码仍然有意义。

<i><em>之间的区别也是如此”。

google dixit:

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

b表示您希望文本以粗体或斜体呈现。<强大>强大em表示您希望文本以用户理解为“重要”的方式呈现。默认值是以粗体呈现,以斜体呈现,但其他一些文化可能使用不同的映射。

就像程序中的字符串一样,b将被“硬编码”,而<强大>强大em将被“本地化”。

正如其他人所说,是明确的(即“使文本粗体”),而是语义的(即“应强调文本”)。

在现代网络浏览器的背景下,很难看出区别(它们似乎产生了相同的结果,对吧?),但是想想视障屏幕阅读器。如果屏幕阅读器遇到标签,它不知道该怎么办。但如果它遇到标签,它知道无论里面有什么都应该强调给听众。这就是实际的区别。

他们有对普通Web浏览器渲染引擎的影响相同,但他们之间有根本区别

作者在一个讨论列表帖子中写道:

想想三种不同的情况:

  • 网络浏览器
  • 盲人
  • 手机

“大胆”是一种风格-当你说“大胆一个字”时,人们基本上知道这意味着在字母周围添加更多,比如说“墨水”,直到它们突出#36825;其他的信件中

不幸的是,这对盲人来说毫无意义。在手机上和其他PDA一样,文本已经加粗了,因为屏幕分辨率非常小。你不能在不搞砸的情况下加粗。

#0是一种风格-我们知道“大胆”应该是什么样子。

<strong>然而是对事物应该如何理解的指示.“强”可能(并且经常)在浏览器中表示“粗体”,但它也可能意味着像Jaws(盲人)这样的说话程序的低音调,或者在Palm Pilot上由下划线表示(因为你不能粗体)。

超文本标记语言从来就不是关于样式的。《蒂姆·伯纳斯-李》“语义网”。<strong>一些搜索是语义的-它描述了它周围的文本(例如,msgstr"这个文本应该比你显示的文本的其余部分更强"),而不是描述如何它周围的文本应显示(例如,“这个文本应该是粗体的”)。

<b><i>都与风格有关,而<em><strong>是语义的。在超文本标记语言4中,前者被归类为字体样式元素,后者被归类为短语元素

正如你所指出的,<i><em>通常被认为是相似的,因为浏览器通常都以斜体呈现。但是根据规范,<em>表示强调<strong>表示更强调非常清楚,但经常被误解。另一方面,何时使用<i><b>的区别实际上是一个风格问题。

您通常应该尽量避免<b><i>。它们是在创建CSS之前的早期HMTL版本中引入的布局页面(改变它的外观),例如同时删除font标记,并且主要保留向后兼容,因为一些论坛允许内联超文本标记语言,这是更改文本外观的简单方法(例如使用[i]的BBCode,您可以使用<i>等)。

自CSS诞生以来,布局实际上已经不再是超文本标记语言所需要的了,这也是CSS诞生的原因(超文本标记语言==结构,CSS==布局)。这些标签将来也可能会消失,毕竟如果你需要“无意义”的字体变化,你可以使用CSS和span标签来制作文本粗体/斜体字。超文本标记语言5仍然允许它们,但声明以这种方式标记文本具有没有意义

另一方面,<em><strong>只是说某些东西被“强调”或“强烈强调”,它让浏览器完全开放如何渲染它。大多数浏览器会默认将em渲染为斜体字,将strong渲染为标准建议的粗体,但它们不是被迫这样做的(它们可能使用不同的颜色、字体大小、字体等)。您可以使用CSS以您想要的方式更改行为。例如,如果您愿意,您可以将em粗体,将strong粗体和红色。

虽然<strong><em>在语义上当然更正确,但对于客户编写的内容使用<b><i>标签似乎有明确的正当理由。

在这样的内容中,单词或短语可以加粗或斜体,通常不是由我们来分析这种加粗或斜体的语义推理。

此外,这样的内容可以指粗体和斜体的单词和短语以传达特定的含义。

一个例子是一个英语考试题,它指示学生替换粗体单词。

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

您可以将其视为“物理”字体样式和“逻辑”样式之间的差异。稍后,您可能希望更改<strong><em>文本的显示方式,例如,通过更改样式表中的属性来添加颜色和大小更改,甚至完全使用不同的字体。如果您使用了“逻辑”标记而不是硬编码的“物理”标记,那么您可以简单地在样式表中的每个位置更改显示属性,然后更改所有引用该样式表的页面都会自动更改,而无需编辑它们。

很狡猾吧?

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

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

实际上,我同时使用,正是出于这篇回复中提到的原因。有时,一些文本将粗体显示为看起来更好,但它并不一定在语义上比句子的其余部分更重要。这是我现在正在处理的一个页面的示例:

"检索所有关于长曲棍球的书籍。"

在这句话中,单词“all”非常重要,“lacrosse”不那么重要——我只是想把它加粗,因为它代表一个搜索词,所以我想要一些视觉上的分离。如果你用屏幕阅读器查看页面,我真的不认为它需要强调“lacrosse”这个词。

我倾向于想象大多数Web开发人员使用另一个,但两者都很好——绝对不被弃用,就像有些人声称的那样。对我来说,这只是视觉吸引力和意义之间的细微差别。

我们使用<strong>标签的文本具有高优先级的SEO目的,如产品名称,公司名称等,而<b>简单使其粗体。

类似地,我们使用<em>作为SEO的高优先级文本,而<i>使文本简单地斜体字。

仅当使用CSS样式类由于任何原因不方便或不可能时才使用它们(例如博客系统,只允许在帖子中使用某些标签并最终嵌入样式)。另一个原因是支持非常旧的浏览器(一些移动设备?)或原始搜索引擎(为<b><strong>标签加分,而不是分析CSS样式)。

如果您可以定义CSS样式,请使用它们。

以下是定义的摘要以及建议的用法:

<b>…出于实用目的而引起注意的文本范围,没有传达任何额外的重要性,也没有任何替代声音或情绪的含义,例如文档摘要中的关键词,评论中的产品名称,交互式文本驱动软件中的可操作的词文章lede

<strong>…现在代表重要性而不是强调。

<i>…以另一种声音或情绪的文本跨度,或以其他方式偏离正常散文,以指示不同质量的文本,例如分类命名技术术语来自另一种语言的惯用语认为船名在西方文本中。

<em>表示强调。

(这些都是来自W3C来源的直接引用,我的重点是添加的。原始内容请参见:https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elementshttp://www.w3.org/TR/html401/struct/text.html#h-9.2.1

<em><strong><i><b>消耗更多的带宽。

它们还需要更多的键入(如果不是自动生成的)。

他们还在编辑器屏幕上堆满了更多的文本。我似乎记得程序员喜欢较小的源文件,如果它们是相同的。(让我们现实一点,它们是一样的。是的,有“技术”(咳嗽,咳,对不起)差异,但这主要是假的。)

使用上述任何标记,您可以使用样式表来自定义它们的显示方式,如果您需要它们显示与默认渲染不同,则可以按照您的意愿进行自定义。

<strong><em>是抽象的(这就是人们说它是语义的意思)。<b><i>是使某些东西变得“强大”或“强调”的具体方法

类比:

<strong><b><em><i>

“车辆”是“吉普车”

超文本标记语言格式元素:

超文本标记语言还定义了用于定义具有特殊含义的文本的特殊元素。超文本标记语言使用等元素来格式化输出,如粗体或斜体字文本。

超文本标记语言粗体和强格式:

超文本标记语言元素定义粗体文本,没有任何额外的重要性。

<b>This text is bold</b>

超文本标记语言元素定义了强文本,添加了语义“很重要”

<strong>This text is strong</strong>

超文本标记语言斜体和强调格式:

超文本标记语言元素定义斜体字,没有任何额外的重要性

<i>This text is italic</i>

超文本标记语言元素定义了强调文本,并添加了语义重要性

<em>This text is emphasized</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

对于使用<b>标签的粗体文本

对于使用<strong>标签的重要文本

对于使用<i>标签的文本斜体字样式

对于使用<em>标签的强调文本

我将在这里冒险进行一次历史和实际的热拍摄:

是的,根据规范,<strong>在HTML4中具有语义含义,<b>具有严格的表示含义。

是的,当HTML5出现时,bi引入了略有不同的新语义。

是的,w3c建议-基本上-TL, DR;不要使用b和i。

你应该记住b元素的内容可能并不总是粗体,i元素的内容可能并不总是斜体字。实际的样式取决于CSS样式定义。你还应该记住,粗体和斜体字可能不是某些语言内容的首选样式。如果有更具描述性和相关性的标签可用,你不应该使用b和i标签。

但是:

现实世界的互联网拥有大量现有的超文本标记语言,这些语言永远不会更新。现实世界的互联网必须考虑在庞大的软件和CMS系统网络之间生成、复制和粘贴的内容,这些系统都有不同的开发团队,并且建立在不同的时代。

因此,如果你正在编写超文本标记语言或构建一个为其他人编写超文本标记语言的系统-当然-肯定使用<strong>而不是<b>来表示“强烈强调”,因为它在语义上更正确。

但实际上,实际情况是<strong><b>的语义和文体意义随着时间的推移而合并。

如果我正在构建一个允许粘贴任何样式文本的CMS,我需要为粘贴<b>并表示“强烈强调”的人和粘贴<strong>并表示“使此文本加粗”的人制定计划。它可能不是“正确的”,但这就是现实世界此时此刻的工作方式。

因此,如果我正在为该站点编写样式表,我可能最终会编写一些看起来像这样的样式:

b,strong {font-weight: 700;/* ... more styles here */}
i,em {font-style: italic;/* ... more styles here */}

或者,我将依赖浏览器默认值,它与我所知道的每个现代浏览器中的代码相同。

或者,我可能是数百万个使用normalize.css,它注意确保b和强被同等对待的网站之一。

世界上已经有如此庞大的超文本标记语言海洋可以满足这种期望,我只是无法想象b会因为strong而贬值,或者浏览器会在默认情况下以不同的方式显示它们。

就是这样。这就是我对语义学、历史和现实世界的热门看法。b/i和strong/em是一样的吗?不。在现代文明崩溃之前,它们可能都存在,并在几乎所有情况下被视为相同吗?我想是的。

在超文本标记语言Lang中,这两个标记的用法如下:

simple text this is test text normal text


simple text this is important textwith normal text

这两种超文本标记语言之间的主要差异是粗体使文本仅在视觉上看起来粗体,而强烈的象征主义也将各自的文本视为必不可少的,并表明它是一个清晰的单词或文本部分。

这种差异是由于超文本标记语言代码区分了符号和物理视觉html标记。虽然前者指的是相关区域的含义,但后者仅定义浏览器中的光学显示。

<b><i>,没有实际的语义含义(就像@plattne指出的那样)是真的,很长一段时间前。在现代HTML5(<!DOCTYPE html>)中,它们有意义。查看以下链接。

语义含义(来自MDN)

<p>Here at company XYZ, we use <b>HTML</b> and <b>Javascript</b>.</p>
  • <i>惯用语文本元素
    • 替代的声音或情绪
    • 分类名称(如属和种“智人”)
    • 来自另一种语言的惯用语(例如“et cetera”)
    • 技术术语
<p>I <i>did</i> tell him, to arrive on time for the meeting.</p>

<b> vs.<strong>

这可能有助于认识到这两个元素在HTML5中都是有效的和语义的元素,并且它们在大多数浏览器中都有相同的默认样式(粗体)是一个巧合(尽管一些较旧的浏览器实际上强调了<strong>)。每个元素都旨在用于某些类型的场景,如果您想以粗体文本进行装饰,则应该实际使用CSS font-的属性。

<i> vs.<em>

<em>元素表示其内容的重音强调,而<i>元素表示与普通散文相关联的文本。来源

我的2美分

我个人更喜欢<b><i>而不是<strong><em>

它们更短,从开发人员的角度来看,它们的语义也只是有意义。我不知道今天的屏幕阅读器是否可以使用它们。如果不能,我想他们最终会的。A18n是一个困难的话题,我只是跟随留档的领导。MDN说我可以使用它们,所以我做了。

Q:strong,b,粗体,em,i之间的区别?

答:这些是内联属性。

强:它用于显示文本粗体或在语义上突出显示它。

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

em:<em>标签在语义上强调了重要的单词。

i:<i>标签只是常规样式为斜体字的偏移文本。

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