Heim >Web-Frontend >CSS-Tutorial >Wenig bekannte, aber nützliche HTML-Tags
Wenig bekannte, aber nützliche HTML-Tags
- Susan SarandonOriginal
- 2024-10-06 06:09:02773Durchsuche
Hallo zusammen, in diesem Artikel werde ich euch von 6 wenig bekannten, aber nützlichen HTML-Tags erzählen. Sie können diese Elemente in Ihren Anwendungen verwenden.
1. HTML-Details-Tag
Mit dem Tag details können Sie ein interaktives Widget erstellen, auf das der Benutzer klicken kann, um es zu öffnen oder zu schließen. Das Widget ist standardmäßig deaktiviert. Beim Öffnen dehnt es sich aus und der Inhalt darin ist sichtbar.
<!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
Öffnen: Gibt an, dass Details für den Benutzer sichtbar (offen) sein sollen
2. HTML-Meter-Tag
Mit dem Tag meter können Sie eine Skalarmessung oder einen Bruchwert innerhalb eines bekannten Bereichs definieren.
Beispiel:
<!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. HTML-Markierungs-Tag
Sie können Teile eines Textes mit dem Tag markieren hervorheben.
Beispiel :
<!DOCTYPE html> <html> <body> <p><mark>Lorem Ipsum</mark> is simply dummy text of the printing and typesetting industry.</p> </body> </html>
Sie können die Hervorhebungsfarbe ändern, wenn Sie möchten.
mark {
background-color: red;
color: black;
}
4. HTML-Feldsatz-Tag
Sie können verwandte Elemente im Formular mithilfe des Tags fieldset gruppieren. Zeichnet einen Rahmen um Elemente.
Beispiel:
<!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>
Attribute
Deaktiviert: Gibt an, dass eine Gruppe verwandter Formularelemente deaktiviert werden soll
Name: Gibt einen Namen für den Feldsatz an
5. HTML-Ausgabe-Tag
Sie können das Tag output verwenden, um die Ergebnisse einer Berechnung anzuzeigen.
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>
- HTML-Vorlagen-Tag
Wenn Sie beim Laden der Seite Ihrer Anwendung einige Inhalte ausblenden möchten, verwenden Sie das Element template. Verwenden Sie JavaScript zum Anzeigen.
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>
Fazit
In diesem Artikel haben wir 6 wenig bekannte, aber nützliche HTML-Tags untersucht.
Sie können diese Elemente in Ihren Anwendungen verwenden.
Das obige ist der detaillierte Inhalt vonWenig bekannte, aber nützliche HTML-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!