Hier sind 10 nicht genutzte oder missverstandene HTML -Tags. Vielleicht sind sie nicht sehr bekannt, aber in bestimmten Situationen sehr nützlich.
Webentwickler möchten oft mehrere Sprachen verstehen und beherrschen. Daher ist es schwierig, alles in einer Sprache zu lernen, aber es ist leicht zu ermitteln, dass Sie nicht vollständig die besonderen, aber nützlichen Tags nutzen.
Übersetzt aus: Tutsplus
Leider haben wir uns noch nicht auf das Potenzial dieser weniger bekannten HTML-Tags eingelassen. Aber es wird nie wieder in das Reich eintreten und damit beginnen, Code zu schreiben, um die Energie dieser unerforschten Tags aufzudecken.
Hier sind 10 nicht genutzte oder missverstandene HTML -Tags. Vielleicht sind sie nicht sehr bekannt, aber in bestimmten Situationen sehr nützlich.
1. <Cite>
Es scheint, dass jeder mit dem <blockquote> -Tag vertraut ist, aber kennen Sie den kleinen Bruder von <Blockquote> <Cite>? <Cite> ermöglicht es Ihnen, den Text in einem Element als Referenz zu definieren. Im Allgemeinen verwendet der Browser Kursivschrift, um den Text im <Cite> -Tag anzuzeigen, dies kann jedoch mit ein wenig CSS geändert werden.
Das <Cite> -Tag ist nützlich für Verweise auf Verzeichnisse oder andere Websites. Hier ist ein Beispiel für die Verwendung des CITE -Tags im Absatz:
David Allens bahnbrechendes Organisationsbuch , das Ihre Arbeit erledigt hat, hat einen Sturm zum Vergessen gebracht. 2. <Optgroup>
Das <Optgroup> -Tag ist eine großartige Möglichkeit, Gruppierungsoptionen im SELECT -Tag zu definieren. Wenn Sie beispielsweise Filmlisten nach Zeit gruppieren müssen, können Sie dies tun:
12
<label for=showtimes>Release time</label><select id=showtimes name=showtimes> <optgroup label=1:00 pm></optgroup> <option value=titanic>Titanic</option> <option value=nd>Slumdog Millionaire</option> <option value=wab>Monster Shrek</option> <optgroup label=2:00 pm></optgroup> <option value = bkrW> Der Löwenking </option> <Option Value = Stf> Superman </Option> </select>
Demo:
Es kann visuell Filmlisten unterscheiden. 3. <Akronym>
<Akronym> ist eine Möglichkeit, eine Reihe von Texten zu definieren oder zu interpretieren. Wenn Sie den Text mit dem <Akronym> -Tag mit Ihrer Maus setzen, wird ein Feld mit dem Inhalt des Titel -Tags unten angezeigt. Zum Beispiel:
1
Weibo -Website <Akronymtitel = gegründet im Jahr 2006> Twitter </Akronym> wurde in letzter Zeit häufig Ausfallzeiten.
Beispiel:Die Weibo -Website Twitter war in letzter Zeit Ausfallzeiten. 4. <adresse>
Das <adress> -Tag ist ein sehr unauffälliges kleines Tag, aber das bedeutet nicht, dass es nutzlos ist. Wie der Name schon sagt, können Sie <adresse> Tags in HTML semantisieren. Dieses kleine Etikett zeigt den Inhalt im Etikett in der Standard -Kursivschrift an. Natürlich kann die Verwendung von Stilen den Standardstil leicht ändern.
1234
<adresse> Glen Stansberry1234 Web Dev Laneanywhere, USA </Adresse> 5. <ins> und <Del>
Wenn Sie Tags verwenden möchten, um bearbeitete Versionen anzuzeigen, sind <ins> und <Del> genau richtig. Wie der Name schon sagt, hebt <ins> Highlights mit einem Unterstrich den Inhalt hinzu, während <Del> einen Strikethrough verwendet, um entfernte Informationen anzuzeigen.
1
John <Del> mag </del> <ins> liebt </iNS> seinen neuen iPod.
Beispiel: Alle wie Verlassen Zblog. 6. <label>
Es scheint, dass Formelemente am wahrscheinlichsten vergessen, wann sie Text markieren sollen. Für Formelemente ist das häufigste, was ich vergesse, das <label> -Tag. Nicht nur eine bequeme Möglichkeit, Text zu markieren, auch das <label> -Tag kann auch ein für Attribut übergeben, um anzugeben, welches Element zugeordnet ist. <Label> ist nicht nur einfach mit Stilen zu steuern, sondern ermöglicht es auch, den Titel zu klicken.
12
<Label für = Benutzername> Benutzername < /Label> <Eingabe -ID = Benutzername Typ = text /> 7. <Fieldset>
Fieldset ist ein kleines Tag, mit dem Sie Ihren Formelementen logische Gruppierungen hinzufügen können. Das <Fieldset> -Tag zeichnet eine Box um die Elemente darin. Ein weiterer Punkt ist, dass Sie dem Fieldset ein <label> -Tag hinzufügen können, um den Titel der Gruppe zu definieren.
1234567
<form> <Fieldset> <Legend> Sind Sie schlauer als ein 5-jähriger Schüler? </legend> Natürlich <Eingabe name = ja type = radio value = Ja/> Ich weiß nicht <Eingabename = no type = radio value = no/> </fieldset> </form>
Beispiel: 8. <abbr>Das <ABBR> -Tag ist dem <Akronym> -Tag ziemlich ähnlich. Der Unterschied besteht darin, dass das <abbr> -Tag nur zur Definition von Abkürzungen verwendet wird. Genau wie <Akronym> können Sie eine Titeleigenschaft für dieses Tag definieren. Wenn der Benutzer die Maus über den Abkürzungstext legt, wird der gesamte Inhalt unten angezeigt. <abbr> Tags werden selten verwendet, sind aber sehr nützlich für Bildschirmleser, Zauberprüfern und Suchmaschinen.
1
<abbr title = hirnless> nc </abbr> ist ein unzivilisierter Begriff.
Beispiel:Es ist eine nicht sehr zivilisierte Amtszeit. Es ist eine nicht sehr zivilisierte Amtszeit. 9. rel
REL kann eine äußerst nützliche Eigenschaft sein, und jedes HTML -Element kann eine Relief -Eigenschaft anwenden. Es hilft, zusätzliche Parameter ohne zusätzliche angegebene zu übergeben. Dies ist sehr nützlich, wenn JavaScript in HTML verwendet wird. Wenn Sie einen Link haben, den Sie in der Zeile bearbeiten möchten, können Sie hinzufügen:
1
<a rel = klickbar href = page.html> Dieser Link ist bearbeitet. </a>
JavaScript sucht nach einem Link mit einem REL -Attribut anklickbar und wenden Sie etwas AJAX an und erlauben Sie ihn in der Zeile bearbeitet werden. Dies ist nur eine Verwendung vieler Techniken, die Sie mit dem Rel -Attribut verwenden können, da sein Potenzial endlos ist. Interessierte Freunde können die Einführung von W3C in die Tiefe studieren. 10. <wbr>
<WBR> Das Tag ist ein unglaubliches und unmutiges Tag. Ehrlich gesagt bezweifle ich auch, dass Sie diesem Tag ausgesetzt sind, weil es fast nie verwendet wird. (In der Tat habe ich dieses Tag kaum gesehen, bevor ich diesen Beitrag geschrieben habe). Tatsächlich ist dieses Tag ein weicher Linienbrecher, mit dem Sie einen Zeilenunterbrechungspunkt in einer bestimmten Linie angeben können, was darauf hinweist, dass die Linienbrüche an diesem Punkt gebrochen werden können, aber es nicht unbedingt bricht, sondern nur bricht, wenn dies erforderlich ist. Wenn Sie horizontale Bildlaufleisten vermeiden möchten, ist die Verwendung dieses Tags großartig.
Beispiel:Unten finden Sie ein 200 Pixel breites Feld ohne definierte Überlauf. NOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBR
Havawbr Havawbr HAVAWBRHAVAWBRHAVAWBRHAVAWBRHAVAWBRHAVAWBRHAVAWBR Havawbr
Wenn Sie den gleichen Effekt erzielen möchten, ohne das <WBR> -Tag zu verwenden, können Sie es versuchen oder & schüchtern;. Es wird gesagt, dass keiner dieser drei Tags von allen Browsern vollständig unterstützt wird. Sie können diesen Artikel verwenden, um die Unterstützung jedes Browsers für drei Tags anzuzeigen.
PS: Nachdem Shenfei diesen Artikel mit Schwierigkeiten übersetzt hatte, spürte er den Charme der Semantik und die Kraft von HTML -Tags zutiefst. Ich glaube, wir haben nicht viele Tags erkannt. Infolgedessen ist jeder mit gemeinsamen Tags vertraut und jeder können keine ungewöhnlichen Tags verwenden. Wie ich bereits in einem Artikel erklärte, besteht ein großer Teil der Semantik darin, die richtigen Etiketten an den richtigen Stellen zu verwenden, anstatt sie nur zu divieren. Wenn wir mehr HTML -Tags lernen können, können wir mehr semantischen HTML -Code schreiben, wodurch die Schwierigkeit und Arbeitsbelastung des Schreibens von CSS erheblich verringert und unsere Seitenstruktur vernünftiger werden kann.