Wenig bekannte, aber nützliche HTML-Tags-CSS-Tutorial-php.cn

Wenig bekannte, aber nützliche HTML-Tags

Susan Sarandon

Freigeben： 2024-10-06 06:09:02

Original

566 Leute haben es durchsucht

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

Nach dem Login kopieren

ITTLE KNOWN BUT USEFUL HTML TAGS

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:

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>

Nach dem Login kopieren

3. HTML-Markierungs-Tag

Sie können Teile eines Textes mit dem Tag markieren hervorheben.

Beispiel :

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>

Nach dem Login kopieren

Sie können die Hervorhebungsfarbe ändern, wenn Sie möchten.


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

Nach dem Login kopieren

ITTLE KNOWN BUT USEFUL HTML TAGS

4. HTML-Feldsatz-Tag

Sie können verwandte Elemente im Formular mithilfe des Tags fieldset gruppieren. Zeichnet einen Rahmen um Elemente.

Beispiel:

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>

Nach dem Login kopieren

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 :

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>

Nach dem Login kopieren

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 :

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>

Nach dem Login kopieren

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!