次の記事では、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 は使用します。テキストの色を目的とする CSS-color と、背景として色を設定する CSS-background-color の 2 つの属性。
テキストレイアウトスタイルをに設定します。タグの場合、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 でさまざまな目的に使用される最も便利なタグの 1 つです。 の主な用途は次のとおりです。タグをユーザードキュメントに追加します。キーボードに入力されるテキストを表示するのに役立つからです。これは 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>
ログイン後にコピー
出力:
Selepas mengklik kekunci ctrl+shift+t daripada papan kekunci, ia akan membuka semula tab yang ditutup sebelum ini dalam penyemak imbas.
Kesimpulan – Teg kbd dalam HTML
tag dalam HTML digunakan untuk menunjukkan teks sebagai input papan kekunci. Ia dalam fon monospace. Teg ini boleh digayakan menggunakan sifat CSS yang berbeza seperti font-family, font-weight, font-color, background-color, font-size, font-style, text-decoration, white-space, text- pecah, bayang teks, jajarkan teks –terakhir, jarak huruf teks, limpahan teks dll.
以上がHTMLのkbdタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
