如何在HTML中使用<kbd>標籤進行鍵盤輸入格式化？-html教學-PHP中文網

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

PHPz

發布： 2023-08-20 11:45:38

轉載

1198 人瀏覽過

如何在HTML中使用<kbd>標籤進行鍵盤輸入格式化？

We use tag to define keyboard input. It is a phrase tag that is used to identify text that represents user keyboard input. The content inside is displayed inspace the default mono表font by most browsers. We can override the font using style sheet.

Syntax

<kbd> Keyboard text…

登入後複製

Example 1

Following is the example using the tag in 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">
</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>

登入後複製

Example 2

的中文翻譯為：

範例2

這個標籤可以在HTML文件中使用，如下所示 −

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

登入後複製

Example 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>

登入後複製

以上是如何在HTML中使用標籤進行鍵盤輸入格式化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！