Maison >interface Web >tutoriel CSS >Balises HTML peu connues mais utiles
Balises HTML peu connues mais utiles
- Susan Sarandonoriginal
- 2024-10-06 06:09:02773parcourir
Bonjour à tous, dans cet article, je vais vous parler de 6 balises HTML peu connues mais utiles. Vous pouvez utiliser ces éléments dans vos applications.
1. Balise de détails HTML
Vous pouvez utiliser la balise détails pour créer un widget interactif sur lequel l'utilisateur peut cliquer pour ouvrir ou fermer. Le widget est désactivé par défaut. Une fois ouvert, il se développe et le contenu à l'intérieur est visible.
<!DOCTYPE html> <html> <body> <details> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </details> </body> </html> **Gif**
Attribut
Ouvrir : Spécifie que les détails doivent être visibles (ouverts) pour l'utilisateur
2. Balise de compteur HTML
À l'aide de la balise meter, vous pouvez définir une mesure scalaire ou une valeur fractionnaire dans une plage connue.
Exemple :
<!DOCTYPE html> <html> <body> <label for="member">Member</label> <meter id="member" value="2" min="0" max="10">2 out of 10</meter><br> <label for="register">Register:</label> <meter id="register" value="0.6">60%</meter> </body> </html>
3. Balise de marque HTML
Vous pouvez surligner des parties d'un texte à l'aide de la balise mark.
Exemple :
<!DOCTYPE html> <html> <body> <p><mark>Lorem Ipsum</mark> is simply dummy text of the printing and typesetting industry.</p> </body> </html>
Vous pouvez changer la couleur de surbrillance si vous le souhaitez.
mark {
background-color: red;
color: black;
}
4. Balise de jeu de champs HTML
Vous pouvez regrouper les éléments associés dans le formulaire à l'aide de la balise fieldset. Dessine une boîte autour des éléments.
Exemple :
<!DOCTYPE html> <html> <body> <form > <fieldset> <legend>User:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </fieldset> </form> </body> </html>
Attributs
Désactivé : Spécifie qu'un groupe d'éléments de formulaire associés doit être désactivé
Nom : Spécifie un nom pour l'ensemble de champs
5. Balise de sortie HTML
Vous pouvez utiliser la balise output pour afficher les résultats d'un calcul.
Gif :
<p><!DOCTYPE html><br>
<html><br>
<body><br>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"><br>
<input type="range" id="a" value="50"><br>
+<input type="number" id="b" value="25"><br>
=<output name="x" for="a b"></output><br>
</form><br>
</body><br>
</html></p>
- Balise de modèle HTML
Si vous souhaitez masquer certains contenus lors du chargement de la page de votre application, utilisez l'élément template. Utilisez JavaScript pour afficher.
Gif :
<p><!DOCTYPE html><br>
<html><br>
<body></p>
<p><button onclick="showContent()">Show hidden content</button><br>
<template><br>
<h2>Flower</h2><br>
<img src="https://picsum.photos/200" width="214" height="204"><br>
</template></p>
<p><script><br>
function showContent() {<br>
let temp = document.getElementsByTagName("template")[0];<br>
let clon = temp.content.cloneNode(true);<br>
document.body.appendChild(clon);<br>
}<br>
</script></p>
<p></body><br>
</html></p>
Conclusion
Dans cet article, nous avons examiné 6 balises HTML peu connues mais utiles.
Vous pouvez utiliser ces éléments dans vos applications.
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!