HTML-Tutorial: Sortierte Listen

HTML-Tutorial: Sortierte Listen
<br />Originaltext: http://andymao.com/andy/post/103.html
Vorheriger Abschnitt : Ungeordnete Liste Informationen sind manchmal ungeordnet zusammengefasst, manchmal weisen sie jedoch eine klare Ordnung auf, die auch im vorherigen Artikel erwähnt wurde. Denken wir also einfach einmal an die Dinge um uns herum, die eine Abfolge haben: Bedienschritte, Rankings, Buchkataloge... Wenn wir früher auf diese Inhalte mit einer Abfolge oder Zahlen gestoßen sind, die die Reihenfolge vorgaben, haben wir den Angaben meist selbst eine Zahl vorangestellt oder diese vom Programm hinzufügen lassen. Wenn Sie eine geordnete Liste verwenden, müssen Sie sich nicht so viel Mühe machen. Sie müssen die Ordnungszahl nicht selbst eingeben. Diese Funktion scheint bei der Verwendung einer einschichtigen Liste nicht offensichtlich zu sein, wird jedoch bei der Verwendung mehrerer Schichten sehr offensichtlich. Lassen Sie uns dann zunächst die Codeform der geordneten Liste verstehen:
<ol>
<li>Dies ist der Inhalt der Liste, dies ist der erste Satz</li>
<li>Dies ist der Inhalt der Liste, dies ist der zweite Satz</li>
<li>Dies ist der Inhalt der Liste, dies ist der dritte Satz</li>
<li>Dies ist der Inhalt der Liste, dies ist der vierte Satz</li>
<li>Dies ist der Inhalt der Liste, dies ist der fünfte Satz</li>
</ol>

Wie Sie sehen, ist die Grundform dieselbe wie bei einer ungeordneten Liste, mit der Ausnahme, dass die Namen der äußeren Tags unterschiedlich sind. Ungeordnet ist UL, und geordnet wird OL. Der Unterschied besteht darin, dass eine geordnete Liste mehr Tag-Attribute hat als eine ungeordnete Liste. Da es geordnet ist, umfasst es alle Aspekte der Abfolge.
Startwert ändern <br />Normalerweise nummeriert der Browser die Zahlen automatisch fortlaufend, beginnend mit der arabischen Ziffer „1“. Wenn eine geordnete Liste jedoch in zwei Teile aufgeteilt werden muss, wäre es falsch, den nächsten Teil von vorne zu nummerieren. Dann beginnt die Nummerierung des nächsten Teils natürlich mit der letzten Nummer des vorherigen Teils plus 1. Das bedeutet, dass wir den Startwert der Liste ändern müssen. Die Eigenschaft zum Ändern des Startwerts lautet: „start“, die formale Schreibweise ist:
<ol start="6">
<li>Dies ist der Inhalt der Liste, dies ist der erste Satz</li>
<li>Dies ist der Inhalt der Liste, dies ist der zweite Satz</li>
<li>Dies ist der Inhalt der Liste, dies ist der dritte Satz</li>
<li>Dies ist der Inhalt der Liste, dies ist der vierte Satz</li>
<li>Dies ist der Inhalt der Liste, dies ist der fünfte Satz</li>
</ol>

Wie Sie vielleicht bemerkt haben, besagt der obige Code, dass der Startwert der Liste bei 6 beginnt. Können Sie nun versuchen, dieses Attribut zu einer geordneten Liste hinzuzufügen, um zu sehen, ob sich etwas ändert?
Nummerierungstyp ändern <br />Standardmäßig verwenden Browser arabische Ziffern für Listennummern. Gibt es einen anderen Typ? Ja, das Attribut ist „Typ“, aber es sind nur fünf Typen verfügbar:
Beispiel für eine Mustersequenz zur Typwertgenerierung A Großbuchstaben A, B, C, D, E a Kleinbuchstaben a, b, c, c, e I römische Großbuchstaben I, II, III, IV, V i römische Kleinbuchstaben i, ii, iii, iv, v 1 Arabische Ziffern 1, 2, 3, 4, 5
Der Code sollte wie folgt geschrieben werden:
<ol Typ="A">
<li>Dies ist der Inhalt der Liste, dies ist der erste Satz</li>
<li>Dies ist der Inhalt der Liste, dies ist der zweite Satz</li>
<li>Dies ist der Inhalt der Liste, dies ist der dritte Satz</li>
<li>Dies ist der Inhalt der Liste, dies ist der vierte Satz</li>
<li>Dies ist der Inhalt der Liste, dies ist der fünfte Satz</li>
</ol>

Ich denke, es ist besser, diesen Typwert seltener zu verwenden, da dieser Typ auch mit CSS festgelegt werden kann. Ich habe immer dafür plädiert, dass Stilfragen durch Stilsprachen geregelt werden sollten. Sofern keine besonderen Gründe vorliegen, ist es besser, dieses Attribut nicht zu verwenden. Natürlich wurde China weder in CSS1 noch in CSS2 grundsätzlich berücksichtigt. In CSS2 sind japanische Nummerierungszeichen vorgesehen, chinesische jedoch nicht. Meiner Meinung nach hat CSS2 diesbezüglich noch Mängel, zumindest bietet es keine bessere Form der Erweiterung. Auch wenn er uns die Vielfalt nicht geschenkt hat, können wir sie dennoch auf unsere eigene Weise erreichen. Wie geht das? Denken Sie bitte zuerst darüber nach. Wie ich mit dem Listenstil umgehe, erkläre ich später.

<<:  Die neueste Version von MySQL 8.0.22 herunterladen und installieren - super ausführliches Tutorial (Windows 64 Bit)

>>:  Lösen Sie das Problem der Docker-Protokollmontage

Artikel empfehlen

Zwei Möglichkeiten zum Beenden von Bash im Docker-Container unter Linux

Wenn Sie Bash beenden möchten, haben Sie zwei Mög...

Verwendung und Analyse des Mysql Explain-Befehls

Mit dem Befehl „mysql explain“ wird gezeigt, wie ...

Lösung für das Verschwinden des MySql-Dienstes aus unbekannten Gründen

Lösung für das Verschwinden des MySql-Dienstes au...

Vue realisiert einfachen Effekt des Lauflichts

In diesem Artikel wird der spezifische Code von V...

Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue

Inhaltsverzeichnis 1. Datenbankdesign 2. Frontend...

js implementiert Axios Limit-Anforderungswarteschlange

Inhaltsverzeichnis Der Hintergrund ist: Was wird ...

VUE implementiert Saugknopf an der Unterseite

In diesem Artikelbeispiel wird der spezifische Co...

Einführung in die Verschlüsselung des Grub-Boot-Programms in Linux

Inhaltsverzeichnis 1. Was ist Grub-Verschlüsselun...

Lösen Sie das Problem, dass ifconfig im Docker nicht verfügbar ist

Als ich kürzlich Docker lernte, stellte ich fest,...

Verwendungsanweisungen für den Befehl „Docker Create“

Mit dem Befehl „Docker Create“ können Sie einen C...

Lösung für MySql-Fehler 1698 (28000)

1. Problembeschreibung: MysqlERROR1698 (28000)-Lö...

So legen Sie in Linux eine feste IP fest (getestet und effektiv)

Öffnen Sie zunächst die virtuelle Maschine Öffnen...

Hinweise zu Linux-Systembefehlen

Dieser Artikel beschreibt die Linux-Systembefehle...