Einführung in 5 coole und praktische HTML-Tags und -Attribute_HTML/Xhtml_Webpage-Produktion

Eigentlich ist das auch eine Überschrift, und man kann nicht sagen, dass sie „umwerfend“ ist. Das liegt nur daran, dass ich unwissend bin und diese Etiketten noch nie gesehen habe. Diese Funktionen sind auf normalen Websites nicht sehr verbreitet, daher kommt es mir sehr frisch vor. Dann werde ich eine Reihe erstellen, um alle guten HTML-Tags aufzuzeichnen, auf die ich gestoßen bin (vielleicht HTML5-Tags, es gibt keine Garantie dafür, dass alle Browser kompatibel sind).

1. Inhaltlich bearbeitbar

Dies ist ein neuer Tag in HTML5, der es ermöglicht, den Inhalt eines Bereichs zu bearbeiten, wie zum Beispiel der folgenden Tabelle: (Die Tabelle im IE scheint dieses Attribut nicht zu unterstützen, aber div und body scheinen es zu unterstützen. Wenn Sie IE verwenden, klicken Sie bitte auf die 100-Dollar- und 50-Dollar-Teile. Ich habe diesen beiden Feldern inhaltsbearbeitbare Tags hinzugefügt. Wenn Sie nicht IE sind, sollte der gesamte Inhalt bearbeitbar sein

Monatliche Ersparnisse

Monat	Einsparungen
Januar	$100
Februar	$50

Tipp: Sie können einen Teil des Codes ändern, bevor Sie

ausführen

Beachten Sie, dass diese Tabelle direkt bearbeitet werden kann, ohne Textfelder hinzuzufügen. Wenn das Unter-Tag dieses Attribut nicht angibt, wird es standardmäßig geerbt, was sehr praktisch ist . (Wenn Sie dieses Attribut dem Körper hinzufügen, kann natürlich alles bearbeitet werden, was wirklich beängstigend ist ...)

2. Fieldset-Tag

Dieses Ding entspricht der GroupBox in .NET, aber ich wusste es nicht. Seine Funktion besteht darin, verwandte Elemente in der Form zu gruppieren:

<fieldset> <legend>Index:</legend> <ul> <li><a href="#">Index aller Artikel</a></li> <li><a href="#">Dinge, die Schafe für heute aufwachen müssen</a></li> <li><a href="#">Sheeple, wir haben es geschafft, aufzuwachen</a></li> </ul> </fieldset>

Tipp: Sie können einen Teil des Codes ändern, bevor Sie

ausführen Das

legend-Tag gibt den Titel dieser BOX an.

3. Bereichs-Tag

Ein Hyperlink kann direkt auf einem bestimmten Bereich des Bildes platziert werden! Passen Sie einfach das Karten-Tag und das usemap-Attribut von img an (beachten Sie, dass Sie nach dem Klicken auf das Bild, um zu anderen Seiten zu springen, daran denken, ^_^ zurückzugeben):

Tipp: Sie können einen Teil des Codes ändern, bevor Sie ausführen

4. output标签

这个标签能够直接显示脚本的运算结果（注意：目前IE的任何版本都不支持），以下脚本似乎不工作，可能是因为WP的原因所致：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form></p> <p><p><strong>Note:</strong> The output tag is not supported in Internet Explorer.</p> </form>
提示：您可以先修改部分代码再运行

5. mark标签

直接能够高亮一段文字，不需要把文字拆开即可实现：

<p>Do not forget to buy <mark>milk</mark> today.</p>
提示：您可以先修改部分代码再运行

今天先到这吧，以后看到好的HTML标签和特效再贴上来。