files/zh-cn/web/html/element/kbd/index.html


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

---
title: <kbd>
slug: Web/HTML/Element/kbd
translation_of: Web/HTML/Element/kbd
---
<h2 id="摘要">摘要</h2>

<p>HTML 键盘输入元素 (<strong>&lt;kbd&gt;</strong>) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parent elements</th>
   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the interface {{domxref("HTMLSpanElement")}} for this element.</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>该元素仅支持<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>.</p>

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

<pre class="brush: html">&lt;p&gt;Type the following in the Run dialog: &lt;kbd&gt;cmd&lt;/kbd&gt;&lt;br /&gt;Then click the OK button.&lt;/p&gt;

&lt;p&gt;Save the document by pressing &lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;S&lt;/kbd&gt;&lt;/p&gt;</pre>

<h3 id="结果">结果</h3>

<p>Type the following in the Run dialog: <kbd>cmd</kbd><br>
 Then click the OK button.</p>

<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

<h4 id="结果说明：">结果说明：</h4>

<p style="text-indent: 2em;">此显示效果为 MDN 特殊显示效果，无法更改。具体显示效果请自行测试。</p>

<h2 id="注意">注意</h2>

<p>通过定义 CSS 规则可以改变 kbd 的默认字体。用户首选项设置可能会比该 CSS 规则具有更高优先级。</p>

<p>当&lt;kbd&gt;元素处于&lt;samp&gt;元素之中时，它代表着被系统回显的输入。</p>

<p>当&lt;kbd&gt;元素中包含&lt;samp&gt;元素时，该输入是基于系统输出的，比如调用某个菜单项。</p>

<p>当&lt;kbd&gt;元素处于另一个&lt;kbd&gt;元素之中时，它代表了一个实际的按键，或是该输入机制下的某个单位输入。</p>

<h2 id="Specifications" name="Specifications">规范</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', 'text-level-semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Expanded to include any user input, like voice input and individual keystrokes.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;kbd&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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

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

<h2 id="参阅">参阅</h2>

<ul>
 <li>{{htmlelement("code")}}</li>
</ul>

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