Rumah > hujung hadapan web > html tutorial > kbd Tag dalam HTML

kbd Tag dalam HTML

WBOY
Lepaskan: 2024-09-04 16:29:16
asal
374 orang telah melayarinya

Artikel berikut menggariskan teg kbd dalam HTML. Yang tag dalam HTML membantu mengenali teks yang ditakrifkan oleh input papan kekunci pengguna. Ia digunakan untuk mengambil input daripada papan kekunci. Ia digunakan terutamanya apabila terdapat keperluan untuk memaparkan teks yang dimasukkan oleh pengguna melalui papan kekunci mereka. Ia berada di bawah kategori teg yang dikenali sebagai teg frasa. Ini juga dikenali sebagai elemen sebaris. Fon lalai yang ditetapkan pada teg ini ialah monospace daripada keluarga fon. Seseorang boleh menggunakan kod gaya yang berbeza untuk menambah baik rupa dan rasa teks yang disertakan dalam tag. Ia sentiasa mengandungi teks yang boleh ditaip dengan mudah melalui papan kekunci.

Sintaks

teg yang ditakrifkan dalam HTML dalam pembukaan dan menutup tag.

Teks yang disertakan dalam teg ini seperti berikut:

<!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>
Salin selepas log masuk

Ini teg dikenali sebagai teg frasa, yang merangkumi format fon dalam jenis monospace. Seseorang boleh menukar penggayaan teks yang disertakan dalam teg menggunakan sifat CSS yang berbeza seperti berikut:

  1. Untuk menukar gaya fon teks, seseorang boleh menggunakan atribut gaya fon CSS pada teks supaya teks boleh menjadi normal, condong, awal, dsb.
  2. Pada asasnya, teks yang disertakan dalam adalah dalam format monospace, tetapi ia boleh diubah dengan menggunakan CSS-font-family Jadi; ia boleh memaparkan senarai berbilang keluarga fon supaya seseorang boleh memilih yang sesuai antara mereka untuk teks.
  3. Ia juga mungkin untuk menukar saiz teks dengan menggunakan CSS-font-size.
  4. Seseorang boleh menukar font-weight dengan menggunakan sifat CSS-font-weight untuk menunjukkan teks dalam format tebal atau tebal. Anda juga boleh menjadikan teks sebagai huruf besar atau mengawal kes teks melalui CSS-text-transform.
  5. Untuk tujuan hiasan teks, kita boleh menggunakan sifat seperti CSS-text-decoration, yang membantu untuk mewarnakan teks, text-decoration dengan garis, text-decoration style, dsb. Ringkasnya, text-decoration-color menggunakan 2 atribut seperti CSS-color untuk tujuan warna teks dan CSS-background-color untuk menetapkan warna sebagai latar belakang.

Untuk menetapkan gaya reka letak teks kepada tag, terdapat sifat yang berbeza ke dalam CSS adalah seperti berikut:

  1. Untuk mengendalikan ruang putih daripada teks, seseorang boleh menggunakan ruang putih CSS.
  2. Untuk menunjukkan kandungan teks melimpah yang tidak dipaparkan kepada pengguna boleh menggunakan CSS-text-overflow.
  3. Untuk memberi rehat dalam baris atau perkataan boleh dilakukan menggunakan CSS-word-break.
  4. Untuk memberi bayangan kepada teks dengan menggunakan sifat CSS-text-shadow.
  5. Untuk menjajarkan teks pada kedudukan terakhir baris boleh digunakan dengan sifat CSS-text-align-last.
  6. Untuk memberi ruang di antara huruf atau aksara dengan menggunakan sifat jarak huruf CSS.
  7. Untuk menentukan ketinggian garisan, seseorang boleh menggunakan sifat CSS-line-height.
  8. Untuk menentukan ruang di antara perkataan boleh dilakukan dengan menggunakan jarak perkataan CSS.
  • tag dalam HTML tidak mempunyai sebarang atribut khas. Ia akan menyokong atribut Global serta atribut Acara yang tersedia dalam HTML.
  • Teg ini sentiasa digunakan dalam bahagian.

Bagaimanakah Teg kbd Berfungsi dalam HTML?

tag adalah salah satu tag yang paling berguna yang digunakan dalam HTML untuk pelbagai tujuan. Penggunaan utama tag ke dalam dokumentasi pengguna. Kerana ia membantu untuk menunjukkan teks yang akan ditaip pada papan kekunci. Ia adalah elemen yang hebat dan membantu dalam HTML. teg juga digunakan untuk membuat pintasan papan kekunci.

Itu akan membantu membuat dokumen baharu, menyimpan dokumen, membukanya dalam tab baharu, dsb. Ia berfungsi pada pelbagai sifat CSS untuk output yang digayakan. Katakan kita akan membuat pintasan papan kekunci menggunakan tag dalam HTML. Di sini kami menyalin beberapa teks dan menampalnya.

Jadi kami akan melakukan perkara ini menggunakan tag melalui jalan pintas seperti berikut:


ctrl + c dan kemudian ctrl + v

Jadi contoh ini akan mencipta pintasan untuk menyalin teks daripada ctrl +c dan juga menampalnya menggunakan ctrl + v.

Contoh Teg kbd dalam HTML

Diberikan di bawah adalah contoh Tag kbd dalam HTML:

Contoh #1 – Ini ialah contoh mudah tag.

<!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>
Salin selepas log masuk

Output:
kbd Tag dalam HTML

Contoh #2 – teg menggunakan sifat 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>
Salin selepas log masuk

Output:
kbd Tag dalam HTML

Contoh #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>
Salin selepas log masuk

Output:

kbd Tag dalam HTML

从键盘上单击 ctrl+shift+t 键后,它将在浏览器中重新打开之前关闭的选项卡。

结论 – HTML 中的 kbd 标签

HTML 中的标签用于将文本显示为键盘输入。它采用等宽字体。此标签可以使用不同的 CSS 属性进行样式设置,例如字体系列、字体粗细、字体颜色、背景颜色、字体大小、字体样式、文本装饰、空白、文本-中断、文本阴影、文本最后对齐、文本字母间距、文本溢出等

Atas ialah kandungan terperinci kbd Tag dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan