HTML - <kbd>標籤



HTML <kbd> 標籤用於定義使用者從鍵盤、語音輸入或任何其他文字輸入裝置輸入的內容。<kbd> 標籤中包含的所有文字通常以瀏覽器的預設等寬字型顯示。當文件需要顯示使用者從鍵盤輸入的文字時,可以使用它。

語法

<kbd>.....</kbd> 

屬性

HTML kbd 標籤支援 HTML 的全域性事件屬性。

HTML kbd 標籤示例

在下面的示例中,我們將看到kbd元素的不同示例。每個示例都將說明 html kbd 標籤的使用案例。

實現 kbd 標籤

在下面的示例中,我們建立一個 HTML 文件並使用 <kbd> 標籤顯示鍵盤輸入。

<!DOCTYPE html>
<html>
<body>
   <p>
      Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an current page. </p>
</body>
</html>

kbd 元素的樣式

考慮下面的示例,我們與前面的示例做同樣的事情,但在這裡我們包含 CSS 屬性以使鍵盤更具樣式。

<!DOCTYPE html>
<html>
<head>
   <style>
      kbd {
         background-color: #eee;
         border-radius: 3px;
         border: 1px solid #b4b4b4;
         color: #333;
         display: inline-block;
         font-size: 0.85em;
         font-weight: 700;
         line-height: 1;
         padding: 2px 4px;
         white-space: nowrap;
      }
   </style>
</head>
<body>
   <p>
      Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> 
      to re-render an current page.
   </p>
</body>
</html>

使用 samp 元素實現 kbd

讓我們來看下面的例子,我們將使用巢狀的 <kbd> 標籤在 <samp> 標籤內,表示系統已將輸入回顯給使用者。

<!DOCTYPE html>
<html>
<body>
   <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>
</body>
</html>

支援的瀏覽器

標籤 Chrome Edge Firefox Safari Opera
kbd
html_tags_reference.htm
廣告