如何在 HTML 中使用 標籤對鍵盤輸入格式進行設定？

我們使用 <kbd> 標籤來定義鍵盤輸入。它是一個短語標籤，用於識別表示使用者鍵盤輸入的文字。其中的內容在大多數瀏覽器中顯示為預設等寬字型。我們可以使用樣式表覆蓋字型。

語法

<kbd> Keyboard text…

示例 1

以下是在 HTML 中使用 <kbd> 標籤的示例 -

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>
      Open a new file using the keyboard shortcut 
      <kbd>Ctrl</kbd> + <kbd>N</kbd>
   </p>
   <p>Press<kbd>Ctrl </kbd> + <kdb>C </kdb>to copy text from the file.</p>
   <p>Press<kbd>Ctrl </kbd> + <kdb>P </kdb>to paste text to the file.</p>
</body>
</html>

示例 2

此標籤可以在 html 文件中使用，如下 -

<html>
   <body>
      <p>Two special keys in keyboard are:<kbd>ctrl</kbd>, <kbd>alt</kbd>.</p>
   </body>
</html>

示例 3

我們還可以在 HTML 文件中為鍵盤值新增樣式。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      kbd {
         border-radius: 2px;
         padding: 2px;
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <p>
      Open a new file using the keyboard shortcut
      <kbd>Ctrl</kbd> + <kbd>N</kbd>
   </p>
   <p>Press<kbd>Ctrl </kbd> + <kdb>C </kdb>to copy text from the file.</p>
   <p>Press<kbd>Ctrl </kbd> + <kdb>P </kdb>to paste text to the file.</p>
</body>
</html>

更新日期：2022 年 10 月 19 日

448 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.