以下文章概述了 HTML 中的 kbd 标签。 HTML 中的标签有助于识别由用户键盘输入定义的文本。它用于从键盘获取输入。它主要在需要显示用户通过键盘输入的文本时使用。它属于称为短语标签的标签类别。这也称为内联元素。为此标记设置的默认字体是字体系列中的等宽字体。人们可以使用不同的样式代码来改善 中包含的文本的外观和感觉。标签。它始终包含可以通过键盘轻松输入的文本。
语法
在 HTML 中定义的标签，位于开头 内并关闭标签。
此标签内包含的文本如下：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Kbd tag in HTML
< kbd> Text </kbd> <kbd> Text </kbd> <kbd> Text </kbd>
</body>
</html>
登录后复制
这个标签被称为短语标签，它包括等宽字体格式。人们可以更改 中包含的文本样式。使用不同 CSS 属性的标签如下：
- 要更改文本的字体样式，可以对文本使用 CSS-font-style 属性，这样文本可以是普通、斜体、首字母等。
- 基本上， 中包含的文本是是等宽格式，但可以使用 CSS-font-family 更改；它可以显示多个字体系列的列表，以便人们可以在其中选择适合文本的字体。
- 还可以使用 CSS-font-size 更改文本大小。
- 可以通过使用 CSS-font-weight 属性来更改字体粗细，以粗体或粗体格式显示文本。还可以通过 CSS-text-transform 使文本大写或控制文本大小写。
- 出于文本装饰的目的，我们可以使用 CSS-text-decoration 等属性，它可以帮助文本着色、文本装饰线条、文本装饰风格等。简单来说，text-decoration-color 使用2 个属性，例如用于文本颜色的 CSS-color 和用于将颜色设置为背景的 CSS-background-color。
用于将文本布局样式设置为 ;标签，CSS中有不同的属性如下：
- 要处理文本中的空白，可以使用 CSS 空白。
- 要显示未向用户显示的溢出文本内容可以使用 CSS-text-overflow。
- 要在行或单词内进行中断，可以使用 CSS-word-break 来完成。
- 使用 CSS-text-shadow 属性为文本添加阴影。
- 要在行的最后位置对齐文本，可以使用 CSS-text-align-last 属性。
- 使用 CSS-letter-spacing 属性在字母或字符之间留出空格。
- 要定义线条的高度，可以使用 CSS-line-height 属性。
- 可以使用 CSS-word-spacing 来定义单词之间的空格。
- HTML 中的标签没有任何特殊属性。它将支持全局属性以及 HTML 中可用的事件属性。
- 此标签始终在 中使用部分。
kbd 标签在 HTML 中如何工作？
tag 是 HTML 中用于各种目的的最有用的标签之一。 的主要用途是标记到用户文档中。因为它有助于显示将在键盘上键入的文本。它是 HTML 中一个奇妙而有用的元素。该标签还用于创建键盘快捷键。
这将有助于创建新文档、保存文档、在新选项卡中打开文档等。它适用于样式输出的各种 CSS 属性。假设我们要使用 创建键盘快捷键HTML 中的标签。在这里，我们复制一些文本并粘贴。
所以我们将使用 标签通过快捷方式完成此操作，如下所示：
ctrl + c;然后ctrl + v
因此，此示例将创建一个快捷方式，用于从 ctrl +c 复制文本并使用 ctrl + v 粘贴文本。
HTML 中的 kbd 标签示例
下面是 HTML 中 kbd 标签的示例：
示例 #1 – 这是 的一个简单示例标签。
<!DOCTYPE html>
<html>
<head>
<title>kbd tag</title>
<style>
kbd.key {
padding: 3px 3px 0;
border-radius: 2px;
border: 1px solid #666;
border-color: blueviolet;}
</style>
</head>
<body>
<p>Copy some code using <kbd><kbd>Ctrl</kbd>+<kbd>c</kbd></kbd>.</p>
<p>Paste copied code using <kbd><kbd>Ctrl</kbd>+<kbd>v</kbd></kbd>.</p>
<p>Save all the details of the data using <kbd ><kbd class="key" >Ctrl</kbd>+
<kbd class="key">s</kbd></kbd>.</p>
<p>Create a new document by pressing <kbd><kbd class="key">Ctrl</kbd>+
<kbd class="key">N</kbd></kbd>.</p>
</body>
</html>登录后复制
输出：
示例 #2 – ;使用 CSS 属性标记。
<!DOCTYPE html>
<html>
<head>
<title>kbd tag</title>
<style>
kbd.font {
font-style: italic;
font-size: 20px;
}
kbd.cursive{
font-family: cursive;
}
kbd.fantasy{
font-family:fantasy;
color:darkmagenta;
}
kbd.inherit{
font-family:inherit;
}
kbd.sans-serif{
font-family:sans-serif;
background-color: aquamarine;
}
kbd.weight{
font-weight:bold;
}
</style>
</head>
<body>
<h4>kbd tag uses Font style</h4>
<p><kbd class="font">The Whole world steps aside for the man who knows where he is going</kbd><hr>
<h4>kbd tag uses Font Family</h4>
<p><kbd class="cursive">People rarely succeed unless they have fun in what they are doing</kbd>
<p><kbd class="fantasy">People rarely succeed unless they have fun in what they are doing</kbd>
<p><kbd class=" inherit">People rarely succeed unless they have fun in what they are doing</kbd>
<p><kbd class="sans-serif">People rarely succeed unless they have fun in what they are doing</kbd>
<hr>
<h4>kbd tag uses Font weight </h4>
<p><kbd class="weight"> Only those who dare to fail greatly can ever achieve greatly</kbd>
<hr>
</body>
</html>登录后复制
输出：
示例#3
<!DOCTYPE html>
<html>
<head>
<title>HTML kbd Tag</title>
</head>
<body>
<p>kbd tag to reopen previously closed tab by clicking
<br>
<br>
<kbd>ctrl</kbd>+
<kbd>shift</kbd>+
<kbd>t</kbd>
</body>
</html>
登录后复制
输出：
Après avoir cliqué sur les touches ctrl+shift+t du clavier, un onglet précédemment fermé dans le navigateur sera rouvert.
Conclusion – balise kbd en HTML
La balise en HTML est utilisée pour afficher le texte lors de la saisie au clavier. Il est en police monospace. Cette balise peut être stylisée en utilisant différentes propriétés CSS telles que font-family, font-weight, font-color, background-color, font-size, font-style, text-decoration, white-space, text- pause, ombre de texte, alignement de texte –dernier, espacement des lettres de texte, débordement de texte, etc.
以上是HTML 中的 kbd 标签的详细内容。更多信息请关注PHP中文网其他相关文章！
