---
title: <b>
slug: Web/HTML/Element/b
tags:
- HTML
- HTML 文本等级语义
- HTML 流内容
- HTML 表述内容
- Web
- 元素
- 参考
translation_of: Web/HTML/Element/b
---
<p id="摘要"><strong>HTML提醒注意（Bring Attention To）元素（<code><b></code>）</strong>用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是<strong>粗体（Boldface）元素</strong>，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <code><b></code> 元素用于显示粗体文字；替代方案是使用 CSS {{cssxref("font-weight")}} 属性来创建粗体文字。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容分类</a></th>
<td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td>
</tr>
<tr>
<th scope="row">允许的内容</th>
<td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
</tr>
<tr>
<th scope="row">标签略写</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">允许的父元素</th>
<td>任意可容纳 <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>任意</td>
</tr>
<tr>
<th scope="row">DOM 接口</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="属性">属性</h2>
<p><span style="line-height: 21px;">这个元素只包含<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</span></p>
<h2 id="使用说明"><strong>使用说明</strong></h2>
<ul>
<li>
<p><code><b></code> 应用场合如：摘要中的关键字、评论中的产品名称，或其他典型的应该加粗显示的文字（除此之外无其它特别强调）。</p>
</li>
<li>
<p>不要将<b>元素与 {{HTMLElement("strong")}}、{{HTMLElement("em")}}或{{HTMLElement("mark")}}元素混淆。 {{HTMLElement("strong")}}元素表示某些重要性的文本，{{HTMLElement("em")}}强调文本，而{{HTMLElement("mark")}}元素表示某些相关性的文本。 <code><b></code>元素不传达这样的特殊语义信息；仅在没有其他合适的元素时使用它。</p>
</li>
<li>类似的，也不要用 <code><b></code> 元素来标记标题。如果需要表示标题，请使用 {{HTMLElement("h1")}} 到 {{HTMLElement("h6")}} 标签。此外，可以通过样式表来改变这些元素的的默认样式，结果就是它们并<em>不一定</em>都是粗体。</li>
<li>通过在 <code><b></code> 元素上添加<strong> </strong>{{htmlattrxref("class")}} 属性来表示额外的语义信息是一个很好的方式（例如 <code><b class="lead"></code> 来表示段落中的第一句）。这可以在样式需要变动的情况下更轻松地处理不同应用场合的 <code><b></code> 元素，无须改动HTML。</li>
<li>以前 <code><b></code> 元素的意思就是让文本变成粗体。但从 HTML4 开始，不赞成标签表示带样式信息，于是 <code><b></code> 元素的含义发生了变化。</li>
<li>如果不是出于语义目的而使用 <code><b></code> 元素，那么让文本显示粗体更好的方式是使用将 CSS 的 {{cssxref("font-weight")}} 属性设置为 <code>"bold"</code>。</li>
</ul>
<h2 id="例子">例子</h2>
<pre class="brush: html"><p>
This article describes several <b>text-level</b> elements.
It explains their usage in an <b>HTML</b> document.
</p>
Keywords are displayed with the default style of the <b> element, likely in bold.
</pre>
<h3 id="结果">结果</h3>
<p>This article describes several <strong>text-level</strong> elements. It explains their usage in an <strong>HTML</strong> document.</p>
<p>Keywords are displayed with the default style of the <b> element, likely in bold.</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-b-element', '<b>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>Others elements conveying <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">text-level semantics</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
<li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags">Using <b> and <i> elements (W3C)</a></li>
</ul>
<div>{{HTMLRef}}</div>