Ungewöhnliche, aber nützliche Tags in Xhtml

Ungewöhnliche, aber nützliche Tags in Xhtml
Xhtml hat viele Tags, die nicht häufig verwendet werden, aber sehr nützlich sind. Einige können mit halbem Aufwand das doppelte Ergebnis erzielen, andere können die Semantik verbessern und wieder andere können die Benutzerfreundlichkeit verbessern. Ich habe einige davon zusammengefasst. Das Prinzip der Zusammenfassung ist, dass sie nützlich sind und verwendet werden können. Das heißt, die meisten Browser müssen sie unterstützen, sonst wird es nicht als "gutes Geschäft" angesehen. Was bringt es, nur auf das „Schild“ zu schauen und zu seufzen?
Das <base>-Tag
Wirkung: Der Tag gibt die Standard-Linkadresse oder das Standard-Linkziel für alle Links auf der Seite an. Manchmal müssen wir alle Links auf der Homepage in einem neuen Fenster öffnen. Normalerweise schreiben wir die Links so, und mit diesem Tag geht das in einem Rutsch!
Eigentum:
Href: Linkadresse
Ziel: Ziel, sein Wert kann _blank, _parent, _self, _top sein, kann in allen Modi außer dem strikten Modus verwendet werden. Ich habe diese Verwendung erstmals auf 163.com entdeckt.
Verwendung:
 <head > <!—寫在head標簽之間-- >
 <base href = "http://www.qq.com/" /> <!—將默認鏈接定義為http://www.qq.com/-- >
 <base target = "_blank" /> <!—將默認鏈接目標定義為新窗口中打開-- >
 </head>

 <caption>-Tag
 Funktion: Das Beschriftungs-Tag wird verwendet, um den Titel der Tabelle zu definieren. Der Tabelle einen Titel zu geben, der erklärt, wofür die Tabelle gedacht ist, ist sehr „semantisch“. Die Beschriftung sollte nach der Tabelle geschrieben werden. Standardmäßig wird sie oben in der Mitte der Tabelle angezeigt. Sie können den Stil über CSS ändern.
 Verwendung:
 <table width = "200" border = "1" >
 <caption > <!--caption應該寫在table之后-->
其實我是caption
 </caption>
 <tr >
 <td > &nbsp; </td>
 <td > &nbsp; </td>
 </tr>
 <tr >
 <td > &nbsp; </td>
 <td > &nbsp; </td>
 </tr>
 </table>

 <thead>-Tag, <tbody>-Tag, <tfoot>-Tag
    Funktion: Kopf, Fuß 
Die tbody-Tags sind genau wie ihre Namen die Kopfzeile (viele Leute verwenden einfach th), das Thema und die Fußzeile der Tabelle. Sie können der Tabelle mehr Bedeutung verleihen und uns ermöglichen, die Leistung der Tabelle bequemer zu steuern. Im Ausland werden diese drei Tabellen teilweise auf sehr ungewöhnliche Weise verwendet, sodass der Titel der Tabelle folgt oder der Textkörper eine feste Höhe hat und für die zusätzlichen Zeilen Bildlaufleisten angezeigt werden. Bei Interesse können Sie hier danach suchen oder es ausprobieren.
 Hinweis: Wenn Sie thead, tfoot und tbody verwenden 
Elemente, müssen Sie alle verwenden. Sie werden in dieser Reihenfolge angezeigt: thead, tfoot, tbody, sodass der Browser den Footer rendern kann, bevor er alle Daten empfängt.
 Verwendung:
 <table border = "1" >
 <thead >
 <tr >
 <th >科目</th>
 <th >分數</th>
 </tr>
 </thead>
 <tfoot >
 <tr >
 <td >總分</td>
 <td > 159 </td>
 </tr>
 </tfoot>

 <tbody >
 <tr >
 <td >語文</td>
 <td > 99 </td>
 </tr>
 <tr >
 <td >數學</td>
 <td > 60 </td>
 </tr>
 </tbody>
 </table>

 <fieldset>-Tag und <legend>-Tag
 Funktion: Das Element <fieldset> dient der Klassifizierung von Elementen im Formular, während <legend> einen Titel für diese Gruppe definieren kann. Sie haben sicherlich schon einmal ein Layout gesehen, das dem folgenden ähnelt: domo! Sie können auch über CSS gestaltet werden.
 Verwendung:
 <form >
 <fieldset >
 <legend >基本信息</legend>
姓名: <input type = "text" />
性別: <input type = "text" />
 </fieldset>
 </form>

 <sub>-Tag und <sup>-Tag
    Funktion: 
Tags und <sub> 
Die Tags sind hochgestellt bzw. tiefgestellt. Obwohl sie sich in verschiedenen Browsern unterschiedlich verhalten, können Sie ihre Stile auch mit CSS definieren.
 Verwendung:
 2 <sup >我是上標</sup>
 2 <sub >我是下標</sub>

 Das <label>-Tag
 Zweck: Etikett 
Der Einsatz von Labels kann die Benutzerfreundlichkeit von Formularen verbessern, indem sie den Klickbereich des Formulars erweitern. Sehen Sie sich die folgende Verwendung an: Ein Klick auf den Text entspricht einem Klick auf das Optionsfeld. Wäre das nicht eine bessere Benutzererfahrung?
 Verwendung:
 <form >
 <label for = "nan" >先生</label>
 <input type = "radio" name = "sex" id = "nan" />
 <br />
 <label for = "nv" >女士</label>
 <input type = "radio" name = "sex" id = "nv" />
 </form>
 <optgroup>-Tag
 Wirkung: 
Tags können verwendet werden, um Optionen in der Auswahl zu gruppieren. Dies ist sehr nützlich, wenn viele Dropdown-Elemente vorhanden sind. Verwenden Sie das Label-Tag, um jede Gruppe zu benennen. Sie können mit CSS auch unterschiedliche Farben für jede Gruppe definieren, wie es Taobao macht.
 Verwendung:
 <select >
 <optgroup label = "自駕游" > <!--配合label標簽給每組命名-->
 <option >省內</option>
 <option >省外</option>
 </optgroup>
 <optgroup label = "旅行社" >
 <option >省內</option>
 <option >省外</option>
 <option >國外</option>
 </optgroup>
 </select>
    Wenn Sie an weiteren XHTML-Tags interessiert sind, können Sie einen Blick in das Buch „HTML and XHTML Definitive Guide“ werfen, das Sie auch in der elektronischen Version online finden. Ich habe die englische Kopie gelesen. Obwohl sie auf Englisch ist, ist sie nicht allzu schwer zu verstehen.
    Wenn Sie weitere nützliche Tags kennen, teilen Sie uns dies bitte mit!

<<:  Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

>>:  14 Techniken für leistungsstarke Websites

Artikel empfehlen

CSS erkennt, dass die linke Seite der Webseitenspalte fixiert ist und passt die Position beim Scrollen nach unten automatisch an

Vorschauadresse: https://ovsexia.gitee.io/leftfix...

Synchrone und asynchrone JS-Schwierigkeiten sowie Umfang und Abschluss und detaillierte Erklärung von Prototypen und Prototypenketten

Inhaltsverzeichnis JS Drei Berge Synchron Asynchr...

Unicode-Signatur-BOM-Problem (Byte Order Mark) für UTF-8-Dateien

Beim Debuggen einer chinesischen Zen Cart-Website...

Konfigurationsprozess für die MySQL-Master-Slave-Replikation

Konfiguration der Hauptbibliothek 1. Konfiguriere...

Einige grundlegende Anweisungen für Docker

Inhaltsverzeichnis Einige grundlegende Anweisunge...

Detaillierte Erklärung zum Festlegen des Kontextpfads in der Webanwendung

URL: http://hostname.com/contextPath/servletPath/...

So erstellen Sie eine LNMP-Umgebung unter Ubuntu 20.04

Einfache Beschreibung Da es zuvor mit Centos7 ers...

Erste Schritte: Eine kurze Einführung in die grundlegenden Tags und Attribute von HTML

HTML besteht aus Tags und Attributen, die zusamme...

Beispiel einer Vorrendering-Methode für eine Vue-Einzelseitenanwendung

Inhaltsverzeichnis Vorwort vue-cli 2.0 Version vu...

Implementierung eines Tomcat-Images, das mit Dockerfile basierend auf Alpine erstellt wurde

1. Laden Sie das Alpenbild herunter [root@docker4...

Verwenden Sie three.js, um coole 3D-Seiteneffekte im Acid-Stil zu erzielen

In diesem Artikel wird hauptsächlich die Verwendu...

Linux-Befehl „cut“ erklärt

Der Cut-Befehl in Linux und Unix dient dazu, aus ...

Design-Tipps: Wir glauben, es wird Ihnen gefallen

<br />Wenn Sie sich diesen Titel ansehen, ko...

Der Unterschied zwischen HTML-Block-Level-Tags und Inline-Tags

1. Blockebenenelement: bezieht sich auf die Fähigk...

SQL IDENTITY_INSERT-Fallstudie

Wenn eine Spalte in einer Datentabelle einmal als...