使用 HTML kbd 标签创建键盘输入元素

介绍

HTML <kbd> 标签用于在网页上为用户创建键盘输入元素。该标签表示一段内联文本，表示以键盘、语音输入或任何其他键盘文本输入格式的输入。

在本实验中，你将学习如何使用 HTML kbd 标签在网页中创建键盘输入元素。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

创建一个名为 index.html 的新 HTML 文件，并设置 HTML 文档的基本结构。

将以下代码添加到你的 index.html 文件中以设置文档结构：

<!doctype html>
<html>
  <head>
    <title>使用 HTML kbd 标签创建键盘输入元素</title>
  </head>
  <body>
    <!-- 在此处添加内容 -->
  </body>
</html>

在网页中需要表示键盘输入元素的地方，使用 <kbd> 标签添加键盘输入元素。

在 <body> 标签内添加以下代码，使用 <kbd> 标签定义 "CTRL + V" 命令的键盘输入元素：

<p>要粘贴文本，请按 <kbd>Ctrl</kbd> + <kbd>V</kbd></p>

接下来，在 <body> 标签内添加以下代码，使用 <kbd> 标签定义 "Shift + Enter" 命令的键盘输入元素：

<p>要创建新行，请按 <kbd>Shift</kbd> + <kbd>Enter</kbd></p>

如果你想表示输入已被系统响应给用户，可以将 <kbd> 标签嵌套在 <samp> 标签中。

在 <body> 标签内添加以下代码，将 <kbd> 标签嵌套在 <samp> 标签中，以表示系统响应的输入：

<p>
  输入的值是：<samp><kbd>Enter Value</kbd>:</samp>
</p>

在本实验中，你学习了如何使用 HTML <kbd> 标签在网页中创建键盘输入元素。你可以在网页中任何需要表示键盘输入元素的地方使用该标签。<kbd> 标签可以嵌套在 <samp> 标签中，以表示系统响应给用户的输入。