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

Ubuntu 20.04 stellt eine Verbindung zu WLAN her (2 Methoden)

Ich habe vor Kurzem Ubuntu 20.04 installiert und ...

Schritte zur Einführung von PWA in ein Vue-Projekt

Inhaltsverzeichnis 1. Abhängigkeiten installieren...

mysql5.6.zip-Format komprimierte Version Installations-Grafik-Tutorial

Vorwort: MySQL ist ein relationales Datenbankverw...

Details zur Verwendung von Bimface in Vue

Inhaltsverzeichnis 1. Installieren Sie das Vue-Ge...

Detaillierte Erläuterung des Implementierungsprozesses des Docker-Cross-Host-Container-Kommunikations-Overlays

Es gibt auch zwei Server: Vorbereitung: Legen Sie...

Zusammenfassung der Unterschiede zwischen HTML, SHHTML und XHTML

Zum Beispiel: <u> Dies hat kein Endzeichen u...

Eine kurze Diskussion über die Semantik von HTML und einige einfache Optimierungen

1. Was ist Semantisierung? Erklärung zum Bing-Wör...

So verwenden Sie die ElementUI-Paginierungskomponente Paginierung in Vue

Die Verwendung der ElementUI-Paging-Komponente Pa...

Schritte zur VSCode-Konfiguration mit der Git-Methode

Git ist in vscode integriert und viele Vorgänge k...

Kann die wiederholbare Leseebene von MySQL Phantomlesevorgänge lösen?

Einführung Als ich mehr über die Datenbanktheorie...

Tutorial zur Installation von Odoo14 aus dem Quellcode unter Ubuntu 18.04

Inhaltsverzeichnis Hintergrund dieser Serie Überb...

Ideen und Codes zur Realisierung des Lupeneffekts in js

In diesem Artikelbeispiel wird der spezifische Co...

MySQL Failover-Hinweise: Ausführliche Erläuterung zum anwendungsorientierten Design

1. Einleitung Wie wir alle wissen, muss im Anwend...

Docker verwendet Dockerfile, um die Node.js-Anwendung zu starten

Schreiben einer Docker-Datei Am Beispiel des von ...

WeChat-Applet zur automatischen Videowiedergabe imitiert Beispiel eines GIF-Animationseffekts

Nachfragehintergrund: Fügen Sie dynamische GIF-Bi...