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. |
>>: Lösen Sie das Problem der Docker-Protokollmontage
Artikel empfehlen
Teilen Sie die von Webdesign-Meistern häufig verwendeten responsiven Frameworks (Zusammenfassung)
Dieser Artikel stellt die von Webdesign-Meistern ...
Detaillierte Schritte zur Installation von MySQL 5.7 über YUM auf CentOS7
1. Gehen Sie zu dem Speicherort, an dem Sie das I...
Detaillierte Erklärung des Grid-Layouts und des Flex-Layouts der Anzeige in CSS3
Das Gitterlayout weist einige Ähnlichkeiten mit d...
So überwachen Sie die Windows-Leistung auf Zabbix
Hintergrundinformationen Ich habe kürzlich einige...
Eigenschaften von JavaScript-Pfeilfunktionen und Unterschiede zu normalen Funktionen
Inhaltsverzeichnis 1. Verwendung von Pfeilfunktio...
Mehrere gängige Methoden zum Senden von Anfragen mit Axios in React
Inhaltsverzeichnis Installieren und Einführen von...
Zusammenfassung einiger gängiger Möglichkeiten zum Abkürzen von Javascript-Code
Inhaltsverzeichnis Vorwort Pfeilfunktionen Beherr...
Detaillierte Erläuterung des MySQL-Download- und Installationsprozesses
1: MySql herunterladen Offizielle Download-Adress...
Detaillierte Erläuterung der grundlegenden Verwendung der CentOS7-Firewall unter Linux
1. Grundlegende Verwendung von Firewalld Start-up...
CSS verwendet calc(), um die aktuell sichtbare Bildschirmhöhe zu ermitteln
Schauen wir uns zunächst die relativen Längeneinh...
JavaScript zum Erreichen einer festen Seitenleiste
Verwenden Sie Javascript, um eine feste Seitenlei...
MySQL Installations-Tutorial unter Windows mit Bildern und Text
Anweisungen zur MySQL-Installation MySQL ist ein ...
Zusammenfassung gängiger Docker-Befehle
Docker-Installation 1. Anforderungen: Linux-Kerne...
Erste Schritte: Eine kurze Einführung in die grundlegenden Tags und Attribute von HTML
HTML besteht aus Tags und Attributen, die zusamme...
Häufig verwendete höherwertige Funktionen und umfassende Beispiele in Vue
1. Häufig verwendete höherwertige Funktionen von ...