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

Detaillierte Verwendung der MySQL-Funktionen row_number() und over()

Syntaxformat: row_number() über (Partition durch ...

Detaillierte Erklärung zur Verwendung des CMD-Befehls zum Bedienen einer MySql-Datenbank

Erstens: Starten und stoppen Sie den MySQL-Dienst...

So greifen Sie über die IP-Adresse auf MySql zu

1. Melden Sie sich bei MySQL an: mysql -u root -h...

So ändern Sie die inländische Imagequelle für Docker

Konfigurieren Sie den Beschleuniger für den Docke...

Die Architektur und Praxis der Synchronisierung von Meituan DB-Daten mit dem Data Warehouse

Hintergrund Bei der Data-Warehouse-Modellierung w...

Grafisches Tutorial zur MySQL8-Installationsversion

Installation Die erforderlichen Unterlagen finden...

Tomcat verwendet Thread-Pool zur Verarbeitung gleichzeitiger Remote-Anfragen

Wenn wir verstehen, wie Tomcat gleichzeitige Anfr...

Hinweise zur Zeitverwaltung des Linux-Kernel-Gerätetreibers

/****************** * Zeitverwaltung des Linux-Ke...

js, um einen simulierten Einkaufszentrumsfall zu erreichen

Freunde, die HTML-, CSS- und JS-Frontend lernen, ...

Lehr- oder Lernprogramm für Webdesign

Abschnitt Studieninhalte Std 1 Webdesign-Übersich...

Detaillierte Erklärung zur Verwendung der Funktionen IF(), IFNULL(), NULLIF() und ISNULL() in MySQL

In MySQL können Sie die Funktionen IF(), IFNULL()...

Centos6.9-Installation Mysql5.7.18 Schrittaufzeichnung

Installationsreihenfolge rpm -ivh mysql-community...

Lösung für das Problem, dass VC6.0 bei Installation unter WIN10 nicht verwendet werden kann

VC6.0 ist tatsächlich zu alt VC6.0 ist ein Entwic...

Die Auswirkungen des Limits auf die Abfrageleistung in MySQL

I. Einleitung Lassen Sie mich zunächst die MySQL-...

Komponentendesignspezifikationen für die Entwicklung von WeChat-Miniprogrammen

Designspezifikationen für WeChat Mini-Programmkom...