HTML - kbd 标签

HTML <kbd> 标签用于定义来自键盘、语音输入或任何其他文本输入设备的用户输入。

<kbd> 标签中包含的所有文本通常以浏览器的默认等宽字体显示。当文档需要显示用户从其键盘输入的文本时，使用它。

语法


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

属性

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

HTML kbd 标签示例

在下面的示例中，我们将看到 <kbd> 标签的不同示例。每个示例都将说明<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样式示例

考虑到下面的示例，我们执行的操作与上一个示例相同，但此处我们包含 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>

<kbd> 标签的 <samp>用法示例

让我们看一下下面的例子，我们将在 <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>	Yes	Yes	Yes	Yes	Yes

打印本页