什么之间的区别<b>和<strong>,<i>和<em>在HTML/XHTML?你应该什么时候使用?
spl*_*tne 1010
它们对普通的Web浏览器渲染引擎具有相同的效果,但它们之间存在根本区别.
正如作者在讨论列表中写道:
想想三种不同的情况:
"大胆"是一种风格 - 当你说"大胆一个字"时,人们基本上知道这意味着在字母周围添加更多,让我们说"墨水",直到它们在其余字母中脱颖而出.
不幸的是,这对盲人来说毫无意义.在手机和其他PDA上,文本已经很大胆,因为屏幕分辨率非常小.如果不搞砸,你就不能大胆加粗.
<b>是一种风格 - 我们知道应该是什么样的"大胆".
<strong>然而,这表明应该如何理解某些东西."强"可以(并且经常)在浏览器中表示"大胆",但它也可能意味着像Jaws(对于盲人)这样的演讲程序的低调,或者由下划线表示(因为你不能加粗在Palm Pilot上大胆).
HTML从来就不是关于样式的.做一些搜索的"蒂姆·伯纳斯-李"和"语义网". <strong>是语义它描述它围绕文本(例如,"这段文字应该比你显示的文本的其余部分强"),而不是描述如何其围绕文本应显示(例如,"这段文字应该是大胆").
Ton*_*ews 223
<b>并且<i>是明确的 - 它们分别指定粗体和斜体.
<strong>并且<em>是语义的 - 它们指定所包含的文本应该以某种方式"强"或"强调",通常是粗体和斜体,但允许通过CSS控制实际样式.因此,这些在现代网页中是优选的.
Jam*_*mes 24
<strong>并<em>为您的文档添加额外的语义含义.恰巧它们也为您的文本提供了大胆和斜体的风格.
你当然可以用CSS覆盖它们的样式.
<b>而<i>在另一方面只适用的字体样式,不应再使用.(因为您应该使用CSS格式化,如果文本实际上很重要,那么无论如何您可能会使其"强大"或"强调"!)
希望有道理.
squ*_*ndy 14
我将在这里冒险提出一个历史和实际的热门观点:
\n是的,根据规范,<strong>在 HTML4 中具有语义含义并且<b>具有严格的表示含义。
b是的,当 HTML5 出现时,为和引入了略有不同的新语义i。
是的,W3C 推荐\xe2\x80\x94 基本上是 \xe2\x80\x94 TL,DR;不要使用 b 和 i。
\n\n\n您应该始终记住,ab 元素的内容可能并不总是粗体,i 元素的内容可能并不总是斜体。实际的样式取决于 CSS 样式定义。您还应该记住,粗体和斜体可能不是某些语言内容的首选样式。如果有更具描述性和相关性的标签可用,则不应使用 b 和 i 标签。
\n
但:
\n现实世界的互联网拥有大量永远不会更新的现有 HTML。现实世界的互联网必须考虑在庞大的软件网络和 CMS 系统之间生成、复制和粘贴的内容,这些系统都有不同的开发团队,并且是在不同的时代构建的。
\n因此,如果您正在编写 HTML 或构建一个为其他人编写 HTML 的系统 \xe2\x80\x94,那么 \xe2\x80\x94 肯定使用 \xe2\x80\x94<strong>而不是<b>表示“强烈强调”,因为它在语义上更正确。
但事实上,实际情况是, 和 的语义和文体意义<strong>随着<b>时间的推移已经出于必要而融合。
如果我正在构建一个允许粘贴任何样式文本的 CMS,我需要为粘贴<b>并表示“强烈强调”的用户和粘贴<strong>并表示“使该文本变为粗体”的用户做好计划。这可能不“正确”,但这就是现实世界此时此刻的运作方式。
因此,如果我正在为该网站编写样式表,我可能最终会编写一些如下所示的样式:
\nb,\nstrong {\n font-weight: 700;\n /* ... more styles here */\n}\n\ni,\nem {\n font-style: italic;\n /* ... more styles here */\n}\nRun Code Online (Sandbox Code Playgroud)\n或者,我将依赖浏览器默认设置,它与我所知道的每个现代浏览器中的上述代码执行相同的操作。
\n或者,我可能是数百万个使用normalize.css 的网站之一,该网站会注意确保 b 和 Strong 得到相同的对待。
\n世界上已经有如此巨大的 HTML 海洋可以满足这种期望,我只是无法想象它b会因为有利于strong或浏览器将开始默认以不同的方式显示它们。
就是这样了。这就是我对语义、历史和现实世界的热门看法。b/i 和 Strong/em 相同吗?不会。直到现代文明崩溃之前,它们是否会同时存在并在几乎所有情况下都被视为相同?我想是的。
\n以下是定义摘要以及建议用法:
<b>...文本跨度关注所正在绘制功利的目的,而不输送任何额外的重要性,并没有暗示替代的语态和语气,如关键词在一个文档抽象,产品名称在评论中,可操作的话在交互式文本驱动软件或文章.
<strong> ......现在代表着重要而不是强调.
<i>......以一种交替的声音或情绪,或以其他方式偏离正常散文的文本范围,表示不同的文本质量,例如分类标识,技术术语,来自另一种语言的惯用短语,思想或西方文本中的船名.
<em> ......表示强调.
(这些都是来自W3C来源的直接引用,我强调了这一点.请参阅:https : //rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements和http://www.w3.org /TR/html401/struct/text.html#h-9.2.1原件)
<b>并且<i>都与风格有关,<em>而且<strong>是语义的.在HTML 4中,第一个被分类为字体样式元素,后者被分类为短语元素.
正如您所指出的那样,<i>并且<em>通常被认为是相似的,因为浏览器通常以斜体显示.但根据规范,<em> 表明强调并<strong> 表明更强调,这是非常明确的,但经常被误解.另一方面,何时使用<i>或者<b>真正属于风格的区别.
虽然<strong>并且<em>当然在语义上更正确,但似乎有合理的理由将<b>和<i>标签用于客户编写的内容.
在这样的内容中,单词或短语可以用粗体或斜体表示,并且通常不由我们来分析用于这种粗体或斜体的语义推理.
此外,这样的内容可以指粗体和斜体的单词和短语以传达特定含义.
一个例子是英语考试问题,它指示学生替换加粗的单词.
<em>并且<strong>比<i>和消耗更多的带宽<b>。
它们还需要更多的输入(如果不是自动生成的)。
它们还会用更多的文本使编辑器屏幕变得混乱。我似乎记得程序员喜欢较小的源文件,如果它们相同的话。(让我们说实话,它们是一样的。是的,存在“技术”(<i>咳</i>,咳咳,对不起)差异,但这主要是假的。)
使用上述任何标签,您可以使用样式表自定义它们的显示方式,如果您需要它们的显示方式与其默认渲染不同。
<i>、<b>和<em>标签<strong>传统上具有代表性。但它们在HTML5中被赋予了新的语义。
<i>并<b>用于 HTML4 中的字体样式。<i>用于斜体和<b>粗体。在HTML5中,标签具有“替代语气或语气”<i>的新语义,并且标签具有文体上偏移的含义。<b>
标签的示例用途<i>包括:分类名称、技术术语、另一种语言的惯用短语、音译、思想、西方文本中的船舶名称。例如 -
<p><i>I hope this works</i>, he thought.</p>
Run Code Online (Sandbox Code Playgroud)
标签的示例用途<b>包括文档摘录中的关键字、评论中的产品名称、交互式文本驱动软件中的可操作单词、文章导语。
以下示例段落在风格上与其后面的段落有所不同。
<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>
Run Code Online (Sandbox Code Playgroud)
<em>在HTML4中具有<strong>强调和强调的意思。但在HTML5中<em>意味着强调强调并且<strong>意味着强烈的重要性。
在下面的例子中,阅读之前的单词时应该有语言上的变化......
<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>
Run Code Online (Sandbox Code Playgroud)
在同一个示例中,我们可以<strong>按如下方式使用标签..
<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>
Run Code Online (Sandbox Code Playgroud)
重视活动日期。
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