Markup-Sprache – eine weitere Diskussionsliste_HTML/Xhtml_Webseitenproduktion-HTML-Tutorial-php.cn

Zuvor haben wir in Kapitel 1 verschiedene Möglichkeiten zum Markieren von Listen besprochen und die Vorteile der Markierung als ungeordnete Listen mit

<ul>
<li>1. Chop the onions.</li>
<li>2. Saute the 
onions for 3 minutes.</li>
<li>3. Add 3 cloves of 
garlic.</li>
<li>4. Cook for another 3 
minutes.</li>
<li>5. Eat.</li>
</ul>

Nach dem Login kopieren

Die vorherige Liste ist vielleicht eines der schlechtesten Rezepte in der Geschichte des Kochens, aber als einfaches Beispiel ist es vielleicht besser, etwas Salz und Eier hinzuzufügen, oder... was auch immer zum Thema.
Methode A Wir markieren diese Schritte als ungeordnete Liste, um alle in Kapitel 1 erwähnten Vorteile zu nutzen. Wir fügen dem Inhalt Struktur hinzu und wissen, dass die meisten Browser, Bildschirmleseprogramme und anderen Geräte dies können Wenn wir diesen Teil des Inhalts richtig gelesen haben, können wir ihn später auch problemlos mit CSS spezifizieren, was großartig ist. Zahlenspiel
Da es sich um eine nummerierte Liste handelt, fügen wir vor jedem Element eine Nummer und einen Punkt nach der Nummer ein, um die Reihenfolge der einzelnen Schritte festzulegen. Wenn Sie dies jedoch später zwischen Schritt 2 und Schritt 3 tun müssen, was passiert, wenn wir eine hinzufügen? Neuer Schritt? Jetzt müssen wir alle Elemente nach dem neuen Schritt (manuell) neu nummerieren. Für diese Liste ist das kein Problem, aber wenn Sie eine Liste mit 100 Elementen ändern, wird der Änderungsprozess sehr langwierig. Es erscheint ein kleines Punktsymbol
Da wir die Strukturen in diesem Beispiel als ungeordnete Liste gekennzeichnet haben, sehen Sie vor jedem nummerierten Element ein kleines Punktsymbol (genau wie in Abbildung 8-1). Das kleine Punktsymbol könnte Ihnen natürlich auch gefallen Sie können es über CSS entfernen, wenn es Ihnen nicht gefällt, aber wenn Sie diese Liste durchsuchen, ohne CSS zu verwenden, werden Sie diese kleinen Punktsymbole auf jeden Fall wieder sehen

Markup-Sprache – eine weitere Diskussionsliste_HTML/Xhtml_Webseitenproduktion

Bild 8 -1. Der Browser schließt das Ergebnis der CSS-Lesemethode A
Es gibt eine einfachere, aussagekräftigere und einfacher zu wartende Methode B. Methode B: Geordnete Liste

<ol>
<li>Chop 
the onions.</li>
<li>Saute the onions for 3 
minutes.</li>
<li>Add 3 cloves of 
garlic.</li>
<li>Cook for another 3 
minutes.</li>
<li>Eat.</li>
</ol>

Nach dem Login kopieren

Ich bin mir sicher, dass dies das ist, was die meisten Leute tun, aber das bedeutet nicht, dass wir aus irgendeinem Grund nicht alle Methode A verwenden.

-Element an der richtigen Position einfügen, und der Browser wird es wie von Zauberhand automatisch neu nummerieren.
Wenn wir Methode A verwenden, müssen wir beim Einfügen jedes Elements alle Zahlen manuell korrigieren. Ich kann mir interessantere Aufgaben als diese vorstellen ...
Abbildung 8-2, der Browser der 11. Version zeigt den Effekt von Methode B, wobei vor jedem Schritt automatisch Zahlen hinzugefügt werden

Abbildung 8-2 Browser-Anzeigeeffekt von Methode B The Happy Wrapper, Teil 2
Ein weiterer Vorteil von Methode B besteht darin, dass beim Umschließen eines langen Listenelements dieses nach der generierten Nummer eingerückt wird, während Methode A unter der Nummer gefaltet wird (Abbildung 8-3)

Abbildung 8-3 Vergleich der Zeilenumbrucheffektlistentypen von Methode A und Methode B
Obwohl der Standard-Nummerierungsstil geordneter Listen normalerweise arabische Ziffern (1, 2, 3, 4, 5 usw.) sind, können wir den Nummerierungsstil ändern, indem wir die Eigenschaft list-style-type von CSS And list verwenden - Stiltyp kann eine der folgenden Optionen wählen: Dezimalzahl: 1,2,3,4,... (normalerweise der Standardwert) oberes Alpha: A,B,C,D...unteres Alpha: a,b,c,d... Oberrömisch: I,II,III,IV... Unterrömisch: i,ii,iii,iv... keine: Keine Nummerierung
Wenn wir beispielsweise möchten, dass Methode B römische Großbuchstaben erzeugt, können wir das Ziel mit dem folgenden CSS erreichen:
```
ol li {
list-style-type: 
upper-roman;
}
```
Nach dem Login kopieren
图8-4就是方法B配上这份CSS在浏览器内的显示效果,我们的步骤列表现在不再是预设的阿拉伯数字,而是改用罗马数字编号了.当然,标记的部分仍然完全相同.改变主意了吗?只要做点小小的修改,换上先前列出的其他样式,就能马上把清单的编号方式改成你喜欢的样子.

图8-4 换用罗马数字的有序清单
HTML的type属性:之前可能有些人会直接在