recherche

Maison >interface Web >tutoriel HTML >Balise kbd en HTML

Balise kbd en HTML

WBOY
WBOYoriginal
2024-09-04 16:29:16374parcourir

L'article suivant décrit la balise kbd en HTML. Le La balise HTML aide à reconnaître le texte défini par la saisie au clavier de l’utilisateur. Il est utilisé pour saisir les entrées du clavier. Il est principalement utilisé chaque fois qu'il est nécessaire d'afficher du texte que l'utilisateur saisit via son clavier. Il relève de la catégorie des balises connues sous le nom de balise de phrase. Ceci est également connu sous le nom d’élément en ligne. La police par défaut définie pour cette balise est le monospace de la famille de polices. On peut utiliser différents codes de style pour améliorer l'apparence du texte inclus dans la balise étiqueter. Il contient toujours du texte que l'on peut facilement saisir via un clavier.

Syntaxe

Le balise définie dans le HTML dans l'ouverture et fermeture étiquette.

Le texte inclus dans cette balise comme suit :

<!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>

Ce La balise est connue sous le nom de balise de phrase, qui inclut le format de police en type monospace. On peut modifier le style du texte inclus dans le fichier balise en utilisant différentes propriétés CSS comme suit :

  1. Pour changer le style de police du texte, on peut utiliser l'attribut CSS-font-style au texte afin que le texte puisse être normal, italique, initial, etc.
  2. Fondamentalement, le texte inclus dans est au format monospace, mais il peut être modifié en utilisant CSS-font-family So; il peut afficher une liste de plusieurs familles de polices afin que l'on puisse choisir celles qui conviennent au texte.
  3. Il est également possible de modifier la taille du texte en utilisant CSS-font-size.
  4. On peut modifier le poids de la police en utilisant la propriété CSS-font-weight pour afficher le texte en format gras ou épais. Il est également possible de mettre le texte en majuscule ou de prendre le contrôle de la casse du texte via CSS-text-transform.
  5. À des fins de décoration de texte, nous pouvons utiliser des propriétés telles que CSS-text-decoration, qui permet de colorer le texte, la décoration de texte avec des lignes, le style de décoration de texte, etc. En bref, text-decoration-color utilise 2 attributs comme CSS-color pour la couleur du texte et CSS-background-color pour définir la couleur comme arrière-plan.

Pour définir le style de mise en page du texte sur balise, il existe différentes propriétés dans le CSS sont les suivantes :

  1. Pour gérer les espaces blancs du texte, on peut utiliser les espaces blancs CSS.
  2. Pour afficher le contenu texte débordé qui n'est pas affiché à l'utilisateur, vous pouvez utiliser CSS-text-overflow.
  3. Pour donner une pause dans la ligne ou les mots, vous pouvez utiliser CSS-word-break.
  4. Pour donner de l'ombre au texte en utilisant la propriété CSS-text-shadow.
  5. Pour aligner le texte à la dernière position de la ligne, vous pouvez utiliser la propriété CSS-text-align-last.
  6. Pour donner des espaces entre les lettres ou les caractères en utilisant la propriété CSS-letter-spacing.
  7. Pour définir la hauteur de la ligne, on peut utiliser la propriété CSS-line-height.
  8. Définir un espace entre les mots est possible en utilisant CSS-word-spacing.
  • La balise en HTML n’a pas d’attributs spéciaux. Il allait prendre en charge les attributs globaux ainsi que les attributs d'événement disponibles en HTML.
  • Cette balise est toujours utilisée dans la balise rubrique.

Comment fonctionne la balise kbd en HTML ?

La balise est l’une des balises les plus utiles utilisées en HTML à diverses fins. L'utilisation principale de balise dans la documentation utilisateur. Parce que cela permet d'afficher le texte qui va être tapé sur le clavier. C'est un élément fantastique et utile en HTML. la balise est également utilisée pour créer des raccourcis clavier.

Cela aidera à créer un nouveau document, à enregistrer le document, à l'ouvrir dans un nouvel onglet, etc. Cela fonctionne sur diverses propriétés CSS pour une sortie stylisée. Supposons que nous allons créer un raccourci clavier en utilisant balise en HTML. Ici, nous copions du texte et le collons.

Nous allons donc faire cette chose en utilisant la balise via les raccourcis comme suit :


ctrl + c puis ctrl + v

Cet exemple créera donc un raccourci pour copier le texte de ctrl +c et le collera également en utilisant ctrl + v.

Exemples de balise kbd en HTML

Vous trouverez ci-dessous des exemples de balises kbd en HTML :

Exemple n°1 – Ceci est un exemple simple du étiquette.

<!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>

Sortie :
Balise kbd en HTML

Exemple n°2 – balise en utilisant les propriétés 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>

Sortie :
Balise kbd en HTML

Exemple #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>

Sortie :

Balise kbd en HTML

Nachdem Sie auf der Tastatur auf die Tasten Strg+Umschalt+T geklickt haben, wird eine zuvor geschlossene Registerkarte im Browser erneut geöffnet.

Fazit – kbd-Tag in HTML

-Tag in HTML wird zum Anzeigen von Text als Tastatureingabe verwendet. Es handelt sich um eine Monospace-Schriftart. Dieses Tag kann mithilfe verschiedener CSS-Eigenschaften wie „font-family“, „font-weight“, „font-color“, „background-color“, „font-size“, „font-style“, „text-decoration“, „white-space“, „text-“ Pause, Textschatten, Textausrichtung – zuletzt, Textbuchstabenabstand, Textüberlauf usw.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html define for format break using Attribute Property Event copy default this display position overflow background transform input word
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Balise de code HTMLArticle suivant：Balise de code HTML

Articles Liés

Voir plus