Klicken Sie hier, um zur Spalte Wulin.com HTML Tutorial zurückzukehren.
Oben: Markup -Sprache - Ankerpunkt
Originalquelle Kapitel 8 Sprechen wir noch einmal über die Liste
Zuvor im ersten Kapitel haben wir verschiedene Möglichkeiten zur Markierung von Listen erörtert und die Vorteile der Markierung als ungeordnete Listen mit <ul> und <li> untersucht. Diese Methode kann die Struktur der Liste identifizieren, sicherstellen, dass alle Browser und Geräte ihren Inhalt korrekt anzeigen können, und ermöglicht es uns, mit CSS verschiedene Stile hinzuzufügen.
In verschiedenen Umgebungen ist es nicht schwierig, das gesamte Buch zu füllen, indem alle Praktiken der Markierungslisten beim Umgang mit individuellen Themen geschrieben werden. Ich habe nicht vor, das gesamte Buch zu füllen, aber ich plane, einige andere Listenkategorien in einem unabhängigen Kapitel neben ungeordneten Listen zu besprechen. Erforschen Sie mehrere Situationen, die für die Verwendung von Listen geeignet sind.
Checklisten sind ein leistungsstarkes Werkzeug zum Organisieren von Seitenstruktur und fügen jedem unabhängigen Projekt eine Bedeutung hinzu, sodass Sie später in CSS unabhängige Stile hinzufügen können.
Schauen wir uns zunächst die nummerierte Projektliste und zwei Möglichkeiten an, solche Listen zu markieren. Vielleicht können Sie erkennen, welche Methode auf einen Blick vorteilhafter ist, aber ich werde dieses Beispiel noch einmal im Detail erklären, um die Bedeutung der strukturierten Markierung und die Verwendung der richtigen Tools zur Lösung von Problemen zu betonen. Welches ist der beste Weg, um eine nummerierte Projektliste zu markieren?
Angenommen, Sie planen, eine Schrittliste zu markieren. Jedes Projekt hat zuvor eine Zahl. Wir werden zwei verschiedene Methoden untersuchen, die dieses Ziel erreichen können, und erklären, warum eine bestimmte Methode eher anwendbar ist. Methode A: Ordnung im Chaos
<ul>
<li> 1. Die Zwiebeln hacken. </Li>
<li> 2. Die Zwiebeln 3 Minuten anbraten. </Li>
<li> 3. Fügen Sie 3 Cllowes Knoblauch hinzu. </Li>
<li> 4. Weitere 3 Minuten kochen. </Li>
<li> 5. Essen. </Li>
</ul>
Die vorherige Liste kann eines der schlechtesten Rezepte in der Kochhistorie sein. Aber es ist ziemlich angemessen, es als einfaches Beispiel zu verwenden, wenn das Hinzufügen von ein wenig Salz und Eier besser ist oder ... egal was, wieder auf den Punkt.
Methode A Wir entscheiden, diese Schritte mit einer ungeordneten Liste zu markieren, um alle Vorteile zu erhalten, die wir in Kapitel 1 erwähnt haben. Wir fügen dem Inhalt Struktur hinzu und wissen, dass die meisten Browser, Bildschirmleser und andere Geräte diesen Teil korrekt behandeln können, und wir können auch CSS verwenden, um es einfach zu stylen, was großartig ist! Aber ... digitale Spiele
Da es sich um eine nummerierte Liste handelt, fügen wir vor jedem Projekt Zahlen hinzu und folgen einen Zeitraum, um die Reihenfolge jedes Schritts zu identifizieren. Was sollten wir jedoch tun, wenn wir neue Schritte zwischen den Schritten 2 und 3 hinzufügen müssen? Jetzt müssen wir alle Gegenstände nach den neuen Schritten (manuell) nummerieren. Diese Liste ist kein Problem, aber wenn Sie eine Liste von 100 Elementen ändern, wird der Änderungsprozess sehr langweilig. Kleine Punktsymbole werden erscheinen
Da wir die Struktur in diesem Beispiel mit einer ungeordneten Liste markieren, werden wir vor jedem nummerierten Projekt ein kleines Punktsymbol sehen (wie Abbildung 8-1). Sie mögen das kleine Punktsymbol. Wenn es Ihnen nicht gefällt, können Sie es natürlich durch CSS entfernen, aber Sie werden diese kleinen Punktsymbole beim Durchsuchen dieser Liste auf jeden Fall ohne Verwendung von CSS sehen.
Abbildung 8-1, Ergebnisse der Browser-CSS-Lesemethode a
Es gibt eine einfachere, aussagekräftigere und leichtere Methode. Schauen wir uns die Methode B. Methode B: Bestellte Liste an
<ol>
<li> Die Zwiebeln hacken. </li>
<li> die Zwiebeln 3 Minuten anbraten. </li>
<li> Fügen Sie 3 Cllowes Knoblauch hinzu. </li>
<li> weitere 3 Minuten kochen. </li>
<li> essen. </li>
</ol>
Ich bin mir sicher, dass dies das ist, was die meisten Leute tun, aber dies bedeutet nicht, dass wir keine Methode A verwenden. Was ist etwas Besonderes an Methode B? Automatische Nummerierung
Vielleicht stellen Sie fest, dass wir jeden Listenelement nicht manuell nummerieren müssen. Wenn wir <ol> verwenden, generieren wir automatisch Zahlen in der Reihenfolge. Wenn unsere Schrittliste mehr als 100 Elemente enthält und wir ein paar neue Schritte in die Mitte einfügen müssen, müssen wir einfach nur ein neues <li> Element in die richtige Position einfügen, und der Browser nummeriert es automatisch wie Magie.
Wenn die Methode A verwendet wird, müssen wir beim Einfügen jedes Projekts alle Zahlen manuell korrigieren. Ich kann mir leicht an eine interessanere Arbeit vorstellen, um ...
Abbildung 8-2, der Effekt der elften Version der Browser-Anzeigemethode B, fügte vor jedem Schritt automatisch eine Zahl hinzu.
Abbildung 8-2 Der glückliche Effekt der Browser-Anzeigemethode B, Teil 2
Ein weiterer Vorteil von Methode B besteht darin, dass ein langer Listenelement nach der generierten Nummer eingerichtet wird, während die Methode A unter die Zahl gefaltet ist (Abbildung 8-3).
Abbildung 8-3 Vergleich der Liste der neuen Linieneffekte von Methode A und Methode B
Obwohl die voreingestellten Nummerierungsstile einer geordneten Liste normalerweise arabische Ziffern (1,2,3,4,5 usw.) sind, können wir den Nummerierungsstil ersetzen, indem wir das Attribut vom Listenstil-Typ von CSS verwenden. Der Typ im Listenstil kann in einem der folgenden Auswahl ausgewählt werden: Dezimal: 1,2,3,4, ... (normalerweise der voreingestellte Wert) Upper-Alpha: A, B, C, D ... Lower-Alpha: A, B, C, D ... ober-roman: i, ii, ii, iv ... unter-roman: i, i, iii, iv ... nicht
Wenn wir beispielsweise die Methode B einer Kapitalrömischzahl erstellen möchten, können wir das folgende CSS erreichen:
ol li {
Listenstil-Typ: Oberroman;
}
Abbildung 8-4 ist der Anzeigeeffekt der Methode B mit diesem CSS im Browser. Unsere Schrittliste ist keine voreingestellten arabischen Ziffern mehr, sondern wird durch römische Ziffern ersetzt. Natürlich sind die markierten Teile immer noch genau gleich. Hast du deine Meinung geändert? Nehmen Sie einfach einige kleine Änderungen vor und ändern Sie andere zuvor aufgeführte Stile, und Sie können die Nummerierungsmethode der Liste sofort in das ändern, was Sie mögen.
Abbildung 8-4 Bestellte Liste der Schalter zu römischen Ziffern
HTML -Typattribut: Vorher können einige Personen das Typattribut des Typs direkt im <OL> -Tag verwenden und die Nummerierungsmethode der Liste in römischen Ziffern, englischen Buchstaben usw. ändern. Um die zuvor genannten CSS -Regeln zu unterstützen, wird nicht empfohlen, das Typ -Attribut des Typs zu verwenden, da der HTML 4.01 -Standard. Daher sollten Sie das Typ -Attribut nicht mehr verwenden, sondern stattdessen CSS verwenden.
Später, in der Tipperweiterung, werden wir diese geordnete Liste mit CSS stylen. Aber jetzt schauen wir uns ein anderes Beispiel für Listentyp an.
Vorherige Seite 1 2 3 Nächste Seite Lesen Sie den vollständigen Text