首頁 >web前端 >html教學 >如何在HTML中使用標籤進行鍵盤輸入格式化?

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

PHPz
PHPz轉載
2023-08-20 11:45:381270瀏覽

如何在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中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除