如何在HTML中使用<kbd>标签进行键盘输入格式化？-html教程-PHP中文网

如何在HTML中使用标签进行键盘输入格式化？

PHPz

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

转载

1199 人浏览过

如何在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 in the default monospace 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中文网其他相关文章！