Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“ von 123WORDPRESS.COM zurückzukehren. Zurück: Auszeichnungssprache – Anker <br />Originalquelle Kapitel 8 Lassen Sie uns noch einmal über Listen sprechen. In Kapitel 1 haben wir verschiedene Möglichkeiten zum Markieren von Listen besprochen und die Vorteile der Markierung als ungeordnete Listen mit <ul> und <li> untersucht. Mit dieser Methode lässt sich die Struktur der Liste identifizieren, sodass alle Browser und Geräte ihren Inhalt korrekt anzeigen können. Außerdem können wir ihr mit CSS verschiedene Stile hinzufügen. Ich habe nicht vor, ein ganzes Buch mit allen Möglichkeiten zu füllen, Listen zu markieren, um individuelle Probleme in verschiedenen Kontexten zu lösen, aber ich beabsichtige, ein separates Kapitel einigen anderen Arten von Listen neben ungeordneten Listen zu widmen. Ich werde mir einige Situationen ansehen, in denen es angemessen ist, eine Liste zu verwenden. Checklisten sind ein leistungsstarkes Tool zum Organisieren Ihrer Seitenstruktur. Sie verleihen einzelnen Elementen Bedeutung, sodass Sie sie später mit CSS individuell gestalten können. Sehen wir uns zunächst nummerierte Aufzählungslisten und zwei Möglichkeiten zum Markieren solcher Listen an. Sie können wahrscheinlich auf den ersten Blick erkennen, welche Methode vorteilhafter ist, aber ich gehe dieses Beispiel noch einmal durch, um die Bedeutung strukturierter Markups und der Verwendung des richtigen Werkzeugs für die Aufgabe hervorzuheben. Welches ist die beste Methode zum Markieren einer nummerierten Aufzählungsliste? Angenommen, Sie möchten eine Checkliste mit Schritten beschriften, wobei jedem Punkt eine Nummer vorangestellt wird. Wir werden uns zwei verschiedene Möglichkeiten ansehen, dies zu erreichen, und warum eine Methode besser ist als die andere. Methode A: Ordnung im Chaos
Die obige Liste ist wahrscheinlich eines der schlechtesten Rezepte der Kochgeschichte. Als einfaches Beispiel ist es jedoch durchaus geeignet. Mit etwas Salz und Eiern könnte es besser schmecken, oder... Wie auch immer, zurück zum Thema. Ansatz A Wir haben uns entschieden, diese Schritte als ungeordnete Liste zu markieren, damit wir alle Vorteile erhalten, die wir in Kapitel 1 erwähnt haben. Wir geben dem Inhalt Struktur, wissen, dass die meisten Browser, Bildschirmleseprogramme und andere Geräte diesen Inhalt korrekt verarbeiten, und wir können ihn später problemlos mit CSS formatieren. Großartig! Aber ... Zahlenspiel Da dies eine nummerierte Liste ist, setzen wir vor jedes Element Zahlen und nach der Zahl einen Punkt, um die Reihenfolge jedes Schritts anzugeben. Aber was, wenn wir später zwischen Schritt 2 und Schritt 3 einen neuen Schritt hinzufügen müssen? Wir müssten dann alle Elemente nach dem neuen Schritt (manuell) neu nummerieren. Für diese Liste ist dies keine große Sache, aber wenn Sie eine Liste mit 100 Elementen bearbeiten, würde der Vorgang mühsam werden. Aufzählungspunkte erscheinen Da wir die Struktur in diesem Beispiel als ungeordnete Liste markiert haben, sehen Sie vor jedem nummerierten Element einen Aufzählungspunkt (wie in Abbildung 8-1 gezeigt). Vielleicht gefallen Ihnen die Aufzählungspunkte, aber wenn sie Ihnen nicht gefallen, können Sie sie sicherlich mit CSS entfernen, aber Sie werden sie auf jeden Fall wieder sehen, wenn Sie diese Liste ohne CSS durchsuchen. ![]() Abbildung 8-1, das Ergebnis von Methode A, wenn der Browser das Lesen von CSS deaktiviert. Es gibt eine einfachere, aussagekräftigere und leichter zu wartende Methode. Schauen wir uns Methode B an. Methode B: Sortierte Liste
Ich bin sicher, dass die meisten Leute diesen Ansatz wählen, aber das heißt nicht, dass wir nicht irgendwann einmal aus irgendeinem Grund Ansatz A verwendet haben. <ol> steht für „geordnete Liste“, also verwenden wir semantisch das richtige Element, um das vorliegende Problem zu lösen. Was ist sonst noch so besonders an Ansatz B? Automatische Nummerierung Sie haben vielleicht bemerkt, dass wir nicht jedes Listenelement manuell nummerieren müssen. Bei Verwendung von <ol> werden Nummern automatisch der Reihe nach generiert. Wenn unsere Liste mit Schritten mehr als 100 Elemente enthält und wir in der Mitte ein paar neue Schritte einfügen müssen, können wir einfach neue <li>-Elemente an der richtigen Position einfügen und der Browser nummeriert sie automatisch neu. Es ist wie Magie. Wenn wir Methode A verwenden, müssten wir beim Einfügen jedes Elements alle Zahlen manuell korrigieren, und mir fallen interessantere Dinge ein, die man tun könnte … Abbildung 8-2, Version 11 des Browsers zeigt die Wirkung der Methode B, wobei vor jedem Schritt automatisch Zahlen hinzugefügt werden. ![]() Abbildung 8-2 Der Browser zeigt die Wirkung von Methode B. Ein angenehmer Wrapper. Ein weiterer Vorteil von Methode B besteht darin, dass beim Umbrechen eines langen Listenelements dieses hinter der generierten Nummer eingerückt wird, während Methode A unter der Nummer gefaltet wird (Abbildung 8-3). ![]() Abbildung 8-3 Vergleich der Zeilenumbrucheffekte von Methode A und Methode B. Listentyp Obwohl der Standardnummerierungsstil für geordnete Listen normalerweise arabische Ziffern (1,2,3,4,5 usw.) sind, können wir den Nummerierungsstil mithilfe der CSS-Eigenschaft „list-style-type“ ändern. „list-style-type“ kann aus den folgenden Optionen ausgewählt werden: decimal: 1,2,3,4,... (normalerweise der Standardwert) upper-alpha: A,B,C,D... lower-alpha: a,b,c,d... upper-roman: I,II,III,IV... lower-roman: i,ii,iii,iv... none: keine Nummerierung. Wenn wir also beispielsweise möchten, dass Methode B römische Zahlen in Großbuchstaben erzeugt, können wir dies mit dem folgenden CSS erreichen:
Abbildung 8-4 zeigt, wie Methode B mit diesem CSS im Browser aussieht. Unsere Liste der Schritte ist jetzt mit römischen Ziffern statt mit den standardmäßigen arabischen Ziffern nummeriert. Natürlich sind die beschrifteten Teile immer noch genau gleich. Sie haben es sich anders überlegt? Nehmen Sie einfach ein paar kleine Änderungen vor und verwenden Sie die anderen oben aufgeführten Stile, um die Nummerierungsmethode der Liste nach Ihren Wünschen zu ändern. ![]() Abbildung 8-4 Sortierte Liste mit römischen Ziffern HTML-Typattribut: Manche Leute haben das Typattribut möglicherweise direkt im <ol>-Tag verwendet, um die Nummerierung der Liste in römische Ziffern, englische Buchstaben usw. zu ändern. Um jedoch die zuvor genannten CSS-Regeln zu unterstützen, ist die Verwendung des Typattributs seit dem HTML 4.01-Standard veraltet. Daher sollten Sie das Typattribut nicht mehr verwenden und stattdessen CSS verwenden. Wir werden diese geordnete Liste später im erweiterten Tipp mit CSS formatieren. Aber sehen wir uns zunächst ein weiteres Beispiel für den Listentyp an. Vorherige Seite 1 2 3 Nächste Seite Mehr lesen |
<<: Detaillierte Analyse jeder Phase der HTTP-Anforderungsverarbeitung von Nginx
>>: Zusammenfassung der Funktionsweise von JS auf Seiten innerhalb und außerhalb von Iframes
Inhaltsverzeichnis Holen Sie sich die Zeit in der...
Verwendung: Datum [Optionen]... [+Format] oder: D...
Inhaltsverzeichnis Ein Set ist eine spezielle Sam...
Die Anzeigeeffekte in den Brow...
Vorwort Workbench ist auf einem Computer installi...
Mit der Verbreitung mobiler Endgeräte wie dem iPa...
Laden Sie zuerst die Version 15.1 von VMware Work...
Designer müssen Psychologie verstehen, indem sie ...
Ein Datenbankindex ist eine Datenstruktur, deren ...
Nur den oberen Rand anzeigen <table frame=above...
Lösung 1: Verwenden Sie bedingten Import im HTML-...
Kürzlich wurde auf Unternehmensseite gemeldet, da...
Einige Projekte haben ein relativ einfaches Gesch...
Teil des Codes: Code kopieren Der Code lautet wie...
Das Zählen der Größe jeder Tabelle in jeder Daten...