10 zu wenig genutzte oder missverstandene HTML-Tags

10 zu wenig genutzte oder missverstandene HTML-Tags

Hier sind 10 HTML-Tags, die zu wenig verwendet oder missverstanden werden. Sie sind vielleicht nicht sehr bekannt, können aber in bestimmten Situationen sehr nützlich sein.
Webentwickler möchten oft mehrere Sprachen kennen und beherrschen. Daher kann es schwierig sein, alles zu lernen, was eine Sprache zu bieten hat. Es kann jedoch schnell passieren, dass Sie einige der spezielleren, aber nützlicheren Tags nicht voll ausnutzen.
Übersetzt von: TutsPlus
Leider haben wir das volle Potenzial dieser weniger bekannten HTML-Tags noch nicht erkundet. Aber es ist nie zu spät, das Feld erneut zu betreten und mit dem Schreiben von Code zu beginnen, um die Energie dieser ungenutzten Tags auszuschöpfen.
Hier sind 10 HTML-Tags, die zu wenig verwendet oder missverstanden werden. Sie sind vielleicht nicht sehr bekannt, können aber in bestimmten Situationen sehr nützlich sein.
1. <zitieren>
Jeder scheint mit dem Tag <blockquote> vertraut zu sein, aber kennen Sie auch den kleinen Bruder von <blockquote>, <cite>? Mit dem <cite>-Element können Sie den Text innerhalb des Elements als Referenz definieren. Normalerweise zeigen Browser Text innerhalb von <cite>-Tags kursiv an, dies kann jedoch mit ein wenig CSS geändert werden.
Der <cite>-Tag ist nützlich, um Referenzen aus Verzeichnissen oder anderen Websites zu zitieren. Hier ist ein Beispiel für die Verwendung des Cite-Tags innerhalb eines Absatzes:
David Allens bahnbrechendes Organisationsbuch „Get Your Work Done“ eroberte das Vergessen im Sturm. 2. <optgroup>
Mit dem Tag <optgroup> können Sie Gruppierungen von Optionen innerhalb eines Auswahltags hervorragend definieren. Wenn Sie beispielsweise eine Liste von Filmen nach Zeit gruppieren müssen, können Sie Folgendes tun:
1 2
< label for = "showtimes" > Spielzeiten < / label > < select id = "showtimes" name = " showtimes" > < optgroup label = "13:00" >< / optgroup > < option value = "titanic" > Titanic < / option > < option value = "nd" > Slumdog Millionaire < / option > < option value = "wab" > Shrek – Die Monster < / option > < optgroup label = "14:00" >< / optgroup > < option value = "bkrw" > Der König der Löwen < / option > < option value = "stf" > Superman für alle < / option > < / select >
Demo:


Es kann die Filmliste optisch differenzieren. 3. <Akronym>
Ein <Akronym> ist eine Möglichkeit, einen Satz von Literalen zu definieren bzw. genauer zu interpretieren. Wenn Sie mit der Maus über den Text mit dem Tag <acronym> fahren, wird darunter ein Feld mit dem Inhalt des Titel-Tags angezeigt. Zum Beispiel:
1
Bei der Microblogging-Site < acronym title = "Gegründet 2006" > Twitter < / acronym > kommt es in letzter Zeit häufig zu Ausfallzeiten.
Beispiel:
Auf der Microblogging-Site Twitter kam es in letzter Zeit häufig zu Ausfallzeiten. 4. <Adresse>
Das <address>-Tag ist ein ziemlich obskurer kleiner Tag, aber das bedeutet nicht, dass es nicht nützlich ist. Wie der Name schon sagt, können Sie mit <address> Ihr HTML semantisch markieren. Dieses kleine Tag zeigt den Inhalt standardmäßig kursiv an. Natürlich kann der Standardstil mithilfe von Stilen leicht geändert werden.
1 2 3 4
<Adresse> Glen Stansberry 1234 Web Dev Lane Überall, USA </Adresse> 5. <ins> und <del>
Wenn Sie Tags verwenden möchten, um bearbeitete Versionen anzuzeigen, sind <ins> und <del> hierfür ideal. Wie die Namen schon vermuten lassen, hebt <ins> hinzugefügte Inhalte durch eine Unterstreichung hervor, während <del> entfernte Informationen durchstreicht.
1
John < del > mag < / del > < ins > LIEBT < / ins > seinen neuen iPod.
Beispiel:
Alle wie Verlassen ^ "Zblog". 6. <Bezeichnung>
Bei Formularelementen scheint es am leichtesten zu vergessen, wann Text markiert werden muss. Das am häufigsten vergessene Formularelement ist das <label>-Tag. Das <label>-Tag ist nicht nur eine praktische Möglichkeit zum Markieren von Text. Es kann auch mit einem „for“-Attribut versehen werden, um anzugeben, mit welchem ​​Element es verknüpft werden soll. <label> lässt sich nicht nur leicht formatieren, sondern ermöglicht es Ihnen auch, den Titel anklickbar zu machen.
1 2
< label for = "Benutzername" > Benutzername < / label > < input id = "Benutzername" type = "Text" / > 7. <Feldsatz>
Fieldset ist ein kleines Tag, mit dem Sie Ihren Formularelementen logische Gruppierungen hinzufügen können. Das <fieldset>-Tag zeichnet einen Rahmen um die darin enthaltenen Elemente. Ein weiterer Punkt ist, dass Sie im Feldsatz ein <label>-Tag hinzufügen können, um den Titel der Gruppe zu definieren.
1 2 3 4 5 6 7
< form >< fieldset > < legend > Sind Sie schlauer als ein Fünftklässler? < / legend > Natürlich < input name = "yes" type = "radio" value = "yes" / > Ich weiß nicht < input name = "no" type = "radio" value = "no" / > < / fieldset > < / form >
Beispiel: 8. <abbr>
Das <abbr>-Tag ist dem <acronym>-Tag sehr ähnlich, mit dem Unterschied, dass das <abbr>-Tag nur zum Definieren von Abkürzungen verwendet wird. Genau wie bei <acronym> können Sie für dieses Tag ein Titelattribut definieren. Wenn der Benutzer mit der Maus über den gekürzten Text fährt, wird darunter der vollständige Inhalt angezeigt. Das <abbr>-Tag wird selten verwendet, ist aber für Bildschirmleseprogramme, Rechtschreibprüfungen und Suchmaschinen sehr nützlich.
1
< abbr title = "Brain Damage" > NC </abbr> ist ein unzivilisierter Begriff.
Beispiel:
Das ist ein unzivilisierter Begriff. Das ist ein unzivilisierter Begriff. 9. relativ
Rel kann ein äußerst nützliches Attribut sein. Auf jedes HTML-Element kann ein Rel-Attribut angewendet werden. Es hilft, zusätzliche Parameter zu übergeben, die nicht anderweitig angegeben sind. Dies ist sehr nützlich, wenn Sie JavaScript in HTML verwenden. Wenn Sie einen Link haben, den Sie inline bearbeiten möchten, können Sie Folgendes hinzufügen:
1
< a rel = "clickable" href = "page.html" > Dieser Link ist editierbar. < / ein >
Das Javascript sucht nach einem Link mit dem Rel-Attribut „klickbar“, wendet etwas Ajax an und ermöglicht die Inline-Bearbeitung. Dies ist nur eine von vielen Techniken, bei denen Sie das rel-Attribut verwenden können, da sein Potenzial endlos ist. Interessierte Freunde können die Einführung des W3C zu Rel. eingehend studieren. 10.
Das <wbr>-Tag ist ein unglaublich obskurer Tag. Ehrlich gesagt bezweifle ich, dass Sie auf dieses Etikett stoßen werden, da es fast nie verwendet wird. (Tatsächlich hatte ich dieses Etikett vor dem Schreiben dieses Artikels kaum jemals gesehen). Tatsächlich handelt es sich bei diesem Tag um einen weichen Zeilenumbruch, mit dem Sie einen Zeilenumbruchpunkt innerhalb einer Zeile angeben können. Dies bedeutet, dass die Zeile an dieser Stelle unterbrochen werden kann, dies jedoch nicht unbedingt der Fall ist. Die Zeile wird nur unterbrochen, wenn es erforderlich ist. Dieses Tag ist ideal, wenn Sie horizontale Bildlaufleisten vermeiden möchten.
Beispiel:
Unten ist ein 200 Pixel breites Feld ohne definierten Überlauf. JetztNoch ...
Abonnieren Abonnieren HavaWbrHavaWbrHavaWbrHavaWbrHavaWbr Abonnieren
Wenn Sie denselben Effekt ohne Verwendung des <wbr>-Tags erzielen möchten, können Sie &#8203; oder &shy; ausprobieren. Es wird gesagt, dass nicht alle drei Tags von allen Browsern vollständig unterstützt werden. Sie können den Supportstatus jedes Browsers für die drei Tags in diesem Artikel überprüfen.
PS: Es war ziemlich schwierig, diesen Artikel zu übersetzen. Shen Fei hat den Charme der Semantik und die Macht der HTML-Tags zutiefst gespürt. Ich glaube, es gibt viele Tags, die wir nicht erkannt haben. Daher kennt jeder die gängigen Tags, aber niemand weiß, wie man ungewöhnliche Tags verwendet. Wie ich in einem früheren Artikel erklärt habe, besteht ein großer Teil der „Semantik“ darin, die richtigen Tags an den richtigen Stellen zu verwenden, anstatt nur Divs zu verwenden. Wenn wir mehr HTML-Tags verstehen, können wir mehr semantischen HTML-Code schreiben, was auch den Schwierigkeitsgrad und den Arbeitsaufwand beim Schreiben von CSS erheblich verringern und unsere Seitenstruktur sinnvoller gestalten kann.

<<:  Verstehen Sie die Verwendung des All-Attributs von CSS3

>>:  JavaScript-Implementierung des Verifizierungscode-Falls

Artikel empfehlen

CSS3 verwendet scale() und rotate() zum Zoomen und Drehen

1. scale()-Methode Zoom steht für „Verkleinern“ u...

Detaillierte Erläuterung der Funktionen und Methoden des Vue3-Lebenszyklus

1. Übersicht Bei der sogenannten Lifecycle-Funkti...

Asynchrone JS ES6-Lösung

Inhaltsverzeichnis Erste Verwendung der Callback-...

MySQL: Praktische Erfahrung mit der Verwendung der Insert-Anweisung

Inhaltsverzeichnis 1. Mehrere Syntaxen von Insert...

Schreiben und Verstehen von Pfeilfunktionen und diesem in JS

Inhaltsverzeichnis Vorwort 1. So schreiben Sie Fu...

Spezifische Verwendung von CSS-Inhaltsattributen

Das Inhaltsattribut wird im Allgemeinen in den Ps...

So legen Sie eine statische IP für den Ubuntu 18.04-Server fest

1. Hintergrund Netplan ist ein neues Befehlszeile...

Einführung in die Verwendung von window.open, einem Sprungmenü, das in einem neuen Fenster geöffnet wird

Code kopieren Der Code lautet wie folgt: <vor&...

Warum brauchen wir Map, wenn wir in JavaScript bereits Object haben?

Inhaltsverzeichnis 1. Behandeln Sie Objekte nicht...

Ein kurzer Überblick über CSS3-Pseudoklassenselektoren

Vorwort Wenn CSS die Grundfertigkeit der Front-En...

17 404-Seiten, die Sie erleben möchten

Wie können wir sagen, dass wir 404 vermeiden soll...

Tipps zur Verwendung von Frameset zum Zentrieren des Breitbilds

Code kopieren Der Code lautet wie folgt: <fram...

Eine kurze Diskussion über das Prinzip der bidirektionalen Datenbindung von React

Inhaltsverzeichnis Was ist bidirektionale Datenbi...

Vue + SSM realisiert den Vorschaueffekt beim Hochladen von Bildern

Die aktuelle Anforderung lautet: Es gibt eine Sch...

MySQL-Leistungsoptimierungs-Index-Pushdown

Index Condition Pushdown (ICP) wird in MySQL 5.6 ...