HTML 键盘输入

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70783{{"`HTML 键盘输入`"}} html/head_elems -.-> lab-70783{{"`HTML 键盘输入`"}} html/doc_flow -.-> lab-70783{{"`HTML 键盘输入`"}} html/inter_elems -.-> lab-70783{{"`HTML 键盘输入`"}} end

设置 HTML 文件

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

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

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

使用 <kbd> 标签添加键盘输入元素

在网页中需要表示键盘输入元素的地方,使用 <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> 标签中

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

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

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

总结

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

您可能感兴趣的其他 HTML 教程