<kbd>：鍵盤輸入元素
<kbd> HTML 元素表示一段內聯文字，用於指示來自鍵盤、語音輸入或任何其他文字輸入裝置的文字使用者輸入。傳統上，使用者代理預設使用其預設等寬字型渲染 <kbd> 元素的內容，儘管 HTML 標準並未強制規定這一點。
試一試
<p>
Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an
MDN page.
</p>
kbd {
background-color: #eeeeee;
border-radius: 3px;
border: 1px solid #b4b4b4;
box-shadow:
0 1px 1px rgb(0 0 0 / 0.2),
0 2px 0 0 rgb(255 255 255 / 0.7) inset;
color: #333333;
display: inline-block;
font-size: 0.85em;
font-weight: bold;
line-height: 1;
padding: 2px 4px;
white-space: nowrap;
}
<kbd> 可以與 <samp>（示例輸出）元素以各種組合巢狀，以表示基於視覺線索的各種形式的輸入或輸出。
屬性
此元素僅包含全域性屬性。
用法說明
可以與其他元素結合使用 <kbd> 來表示更具體的情況
- 將一個
<kbd>元素巢狀在另一個<kbd>元素內，表示一個實際的鍵或其他輸入單元作為更大輸入的一部分。請參閱下面的表示輸入中的按鍵。 - 將
<kbd>元素巢狀在<samp>元素內，表示已被系統回顯給使用者的輸入。請參閱下面的回顯輸入中的示例。 - 另一方面，將
<samp>元素巢狀在<kbd>元素內，表示基於系統呈現的文字的輸入，例如選單和選單項的名稱，或螢幕上顯示的按鈕名稱。請參閱下面的表示螢幕輸入選項中的示例。
注意：您可以定義自定義樣式來覆蓋瀏覽器對 <kbd> 元素的預設字型選擇，儘管使用者的偏好可能會覆蓋您的 CSS。
示例
基本示例
<p>
Use the command <kbd>help my-command</kbd> to view documentation for the
command "my-command".
</p>
結果
表示輸入中的按鍵
要描述包含多個按鍵的輸入，您可以巢狀多個 <kbd> 元素，其中外部 <kbd> 元素表示整個輸入，每個單獨的按鍵或輸入元件都包含在其自己的 <kbd> 中。
未樣式化
首先，讓我們看看這只是純 HTML 的樣子。
HTML
<p>
You can also create a new document using the
<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> keyboard shortcut.
</p>
這會將整個按鍵序列包裝在一個外部 <kbd> 元素中，然後每個單獨的按鍵都包含在其自己的元素中，以表示序列的組成部分。
注意：您不需要進行所有這些包裝；您可以選擇透過省略外部 <kbd> 元素來簡化它。換句話說，將其簡化為 <kbd>Ctrl</kbd>+<kbd>N</kbd> 是完全有效的。
但是，根據您的樣式表，您可能會發現進行這種巢狀很有用。
結果
在沒有應用樣式表的情況下，輸出看起來是這樣的
自定義樣式
透過新增一些 CSS，我們可以讓它更有意義
CSS
我們為巢狀的 <kbd> 元素添加了一個新選擇器 kbd>kbd，我們在渲染鍵盤按鍵時可以使用它
kbd > kbd {
border-radius: 3px;
padding: 1px 2px 0;
border: 1px solid black;
}
HTML
然後我們更新 HTML，以便在要呈現的輸出中的按鍵上使用這個類
<p>
You can also create a new document by pressing the
<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> shortcut.
</p>
結果
結果正是我們想要的！
回顯輸入
將 <kbd> 元素巢狀在 <samp> 元素內，表示已被系統回顯給使用者的輸入。
<p>
If a syntax error occurs, the tool will output the initial command you typed
for your review:
</p>
<blockquote>
<samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>
結果
表示螢幕輸入選項
將 <samp> 元素巢狀在 <kbd> 元素內，表示基於系統呈現的文字的輸入，例如選單和選單項的名稱，或螢幕上顯示的按鈕名稱。
例如，您可以使用如下 HTML 來解釋如何選擇“檔案”選單中的“新建文件”選項
<p>
To create a new file, choose the <kbd><kbd><samp>File</samp></kbd>
⇒<kbd><samp>New Document</samp></kbd></kbd> menu option.
</p>
<p>
Don't forget to click the <kbd><samp>OK</samp></kbd> button to confirm once
you've entered the name of the new file.
</p>
這進行了一些有趣的巢狀。對於選單選項描述，整個輸入被包含在一個 <kbd> 元素中。然後，在該元素內部，選單和選單項的名稱都包含在 <kbd> 和 <samp> 中，表示從螢幕小部件中選擇的輸入。
結果
技術摘要
規範
| 規範 |
|---|
| HTML # the-kbd-element |
瀏覽器相容性
載入中…