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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
---
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>
|
