HTML 標記鍵盤輸入標籤 kbd

在筆者的部落格文章中時常會出現鍵盤的快捷鍵，但是不會使用什麼特殊標記，每次就只是和其他文字一樣，沒有使用任何其他額外的格式。例如： Ctrl + Shift + R

剛剛在翻 mdn 時發現 HTML 中有 <kbd>這個標籤可以使用，所有主流瀏覽器都支援，會使用瀏覽器預設的等寬字體(monospace)顯示： Ctrl + Shift + R

標籤使用方式如下：

    
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>
    

也可以在整個快捷鍵的外面再包一層 <kbd> 標籤：

    
<kbd>
	<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>
</kbd>
    

瀏覽器並沒有做出多大的改動，字體看起來不會有多大的差別，不過 mdn 有建議可以使用的 css 樣式，把 kbd 標籤中的 kbd 標籤做特殊處理，這樣就可以很方便的做出好看的快捷鍵標記了：

    
kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
    

顯示結果： Ctrl + Shift + R

參考資料：
mdn - <kbd>