aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/html/element/b/index.html
blob: c9c430ebb257c2cbe739139f141271426298936b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
---
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>&lt;b&gt;</code></strong>用于吸引读者的注意到该元素的内容上(如果没有另加特别强调)。这个元素过去被认为是<strong>粗体(Boldface)元素</strong>,并且大多数浏览器仍然将文字显示为粗体。尽管如此,你不应将 <code>&lt;b&gt;</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>&lt;b&gt;</code> 应用场合如:摘要中的关键字、评论中的产品名称,或其他典型的应该加粗显示的文字(除此之外无其它特别强调)。</p>
 </li>
 <li>
  <p>不要将&lt;b&gt;元素与 {{HTMLElement("strong")}}{{HTMLElement("em")}}{{HTMLElement("mark")}}元素混淆。 {{HTMLElement("strong")}}元素表示某些重要性的文本,{{HTMLElement("em")}}强调文本,而{{HTMLElement("mark")}}元素表示某些相关性的文本。 <code>&lt;b&gt;</code>元素不传达这样的特殊语义信息;仅在没有其他合适的元素时使用它。</p>
 </li>
 <li>类似的,也不要用 <code>&lt;b&gt;</code> 元素来标记标题。如果需要表示标题,请使用 {{HTMLElement("h1")}} 到 {{HTMLElement("h6")}} 标签。此外,可以通过样式表来改变这些元素的的默认样式,结果就是它们并<em>不一定</em>都是粗体。</li>
 <li>通过在 <code>&lt;b&gt;</code> 元素上添加<strong> </strong>{{htmlattrxref("class")}} 属性来表示额外的语义信息是一个很好的方式(例如 <code>&lt;b class="lead"&gt;</code> 来表示段落中的第一句)。这可以在样式需要变动的情况下更轻松地处理不同应用场合的 <code>&lt;b&gt;</code> 元素,无须改动 HTML。</li>
 <li>以前 <code>&lt;b&gt;</code> 元素的意思就是让文本变成粗体。但从 HTML4 开始,不赞成标签表示带样式信息,于是 <code>&lt;b&gt;</code> 元素的含义发生了变化。</li>
 <li>如果不是出于语义目的而使用 <code>&lt;b&gt;</code> 元素,那么让文本显示粗体更好的方式是使用将 CSS 的 {{cssxref("font-weight")}} 属性设置为 <code>"bold"</code></li>
</ul>

<h2 id="例子">例子</h2>

<pre class="brush: html">&lt;p&gt;
  This article describes several &lt;b&gt;text-level&lt;/b&gt; elements.
  It explains their usage in an &lt;b&gt;HTML&lt;/b&gt; document.
&lt;/p&gt;
Keywords are displayed with the default style of the &lt;b&gt; 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 &lt;b&gt; 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', '&lt;b&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '&lt;b&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

{{Compat("html.elements.b")}}

<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 &lt;b&gt; and &lt;i&gt; elements (W3C)</a></li>
</ul>

<div>{{HTMLRef}}</div>