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

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

PHPz
發布: 2023-08-20 11:45:38
轉載
1250 人瀏覽過

如何在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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板