HTML - <kbd>标签

HTML <kbd> 标签用于定义用户从键盘、语音输入或任何其他文本输入设备输入的内容。<kbd> 标签中包含的所有文本通常以浏览器的默认等宽字体显示。当文档需要显示用户从键盘输入的文本时，可以使用它。

语法

<kbd>.....</kbd>

属性

HTML kbd 标签支持 HTML 的全局和事件属性。

HTML kbd 标签示例

在下面的示例中，我们将看到kbd元素的不同示例。每个示例都将说明 html kbd 标签的使用案例。

实现 kbd 标签

在下面的示例中，我们创建一个 HTML 文档并使用 <kbd> 标签显示键盘输入。

<!DOCTYPE html>
<html>
<body>
   <p>
      Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an current page. </p>
</body>
</html>

kbd 元素的样式

考虑下面的示例，我们与前面的示例做同样的事情，但在这里我们包含 CSS 属性以使键盘更具样式。

<!DOCTYPE html>
<html>
<head>
   <style>
      kbd {
         background-color: #eee;
         border-radius: 3px;
         border: 1px solid #b4b4b4;
         color: #333;
         display: inline-block;
         font-size: 0.85em;
         font-weight: 700;
         line-height: 1;
         padding: 2px 4px;
         white-space: nowrap;
      }
   </style>
</head>
<body>
   <p>
      Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> 
      to re-render an current page.
   </p>
</body>
</html>

使用 samp 元素实现 kbd

让我们来看下面的例子，我们将使用嵌套的 <kbd> 标签在 <samp> 标签内，表示系统已将输入回显给用户。

<!DOCTYPE html>
<html>
<body>
   <p> 
      If a syntax error occurs, the tool will output the initial 
      command you typed for your review: 
   </p>
   <blockquote>
      <samp>
         <kbd>custom-git ad my-new-file.cpp</kbd>
      </samp>
   </blockquote>
</body>
</html>

支持的浏览器

标签
kbd	是	是	是	是	是

html_tags_reference.htm

打印页面