Balises HTML peu connues mais utiles-tutoriel CSS-php.cn

Balises HTML peu connues mais utiles

Susan Sarandon

Libérer： 2024-10-06 06:09:02

original

569 Les gens l'ont consulté

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

Copier après la connexion

ITTLE KNOWN BUT USEFUL HTML TAGS

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 :

ITTLE KNOWN BUT USEFUL HTML TAGS


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

Copier après la connexion

3. Balise de marque HTML

Vous pouvez surligner des parties d'un texte à l'aide de la balise mark.

Exemple :

ITTLE KNOWN BUT USEFUL HTML TAGS


<!DOCTYPE html>
<html>
<body>
  <p><mark>Lorem Ipsum</mark> is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>

Copier après la connexion

Vous pouvez changer la couleur de surbrillance si vous le souhaitez.


mark {
  background-color: red;
  color: black;
}

Copier après la connexion

ITTLE KNOWN BUT USEFUL HTML TAGS

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 :

ITTLE KNOWN BUT USEFUL HTML TAGS


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

Copier après la connexion

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 :

ITTLE KNOWN BUT USEFUL HTML TAGS


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

Copier après la connexion

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 :

ITTLE KNOWN BUT USEFUL HTML TAGS


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

Copier après la connexion