HTML 中的 kbd 標籤
- WBOY原創
- 2024-09-04 16:29:16352瀏覽
以下文章概述了 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 貼上文字。 以下是 HTML 中 kbd 標籤的範例： 輸出： 輸出： 輸出： 從鍵盤上點選 ctrl+shift+t 鍵後，它將在瀏覽器中重新開啟先前關閉的標籤。 HTML 中的標籤用於將文字顯示為鍵盤輸入。它採用等寬字體。此標籤可以使用不同的CSS 屬性進行樣式設置，例如字體系列、字體粗細、字體顏色、背景顏色、字體大小、字體樣式、文字裝飾、空白、文字-中斷、文字陰影、文字最後對齊、文字字母間距、文字溢位等
ctrl + c;然後ctrl + v 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>
結論 – HTML 中的 kbd 標籤
以上是HTML 中的 kbd 標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！