In diesem Artikel wird hauptsächlich die erweiterte Anwendung der geordneten Listen-Tags ol und li in HTML vorgestellt.
Wenn wir geordnete Listeninhalte im Webdesign entwerfen, fügen wir häufig vor jedem ITEM manuell einen Wert hinzu durch das Programm.
Und wenn Sie die geordneten Listentags ol und li verwenden, müssen Sie sich nicht so viele Mühe geben, die Ordnungszahlen selbst einzugeben. Diese Funktion scheint nicht offensichtlich zu sein Bei Verwendung einer einstufigen Liste sind die Merkmale bei Verwendung einer mehrstufigen Liste zu diesem Zeitpunkt offensichtlich.
Der allgemeine Anwendungscode der Tags für geordnete Listen ol und li lautet wie folgt:
<ol> <li>列表内容一</li> <li>列表内容二</li> <li>列表内容三</li> <li>列表内容四</li> <li>列表内容五</li> </ol>
Lassen Sie uns einen Blick auf die erweiterte Anwendung der Tags für geordnete Listen ol und li werfen:
Ändern Sie den Startwert der geordneten Liste
Ändern Sie den Startwert des -Attributs ist: „start“, Folgendes ist die Sequenznummer ab 10. Beispielcode für die Sequenztabelle:
<ol start="10"> <li>列表内容一</li> <li>列表内容二</li> <li>列表内容三</li> <li>列表内容四</li> <li>列表内容五</li> </ol>
Führen Sie den Code aus, um den -Effekt zu sehen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS在线-示例</title> <style type="text/css"> </style> </head> <body> <ol start="10"> <li>列表内容一</li> <li>列表内容二</li> <li>列表内容三</li> <li>列表内容四</li> <li>列表内容五</li> </ol> </body> </html>
Legen Sie den Seriennummerntyp der geordneten Liste fest
Das Attribut, das den Nummerntyp ändert, ist: „Typ“, der Typtyp hat die folgenden Typen :
A Großbuchstaben A, B , C, D, E
a Kleinbuchstaben a, b, c, c, e
I Große römische Ziffern I, II , III, IV, V
i Römische Kleinbuchstaben i, ii, iii, iv, v
1 Arabische Ziffern 1, 2, 3, 4, 5
Die Im Folgenden finden Sie einen Beispielcode einer Sequenztabelle mit Großbuchstaben im Seriennummerntyp:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS在线-示例</title> <style type="text/css"> </style> </head> <body> <ol type="A"> <li>列表内容一</li> <li>列表内容二</li> <li>列表内容三</li> <li>列表内容四</li> <li>列表内容五</li> </ol> </body> </html>
Das obige ist der detaillierte Inhalt vonErweiterte Anwendung von ol-Tag und li-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
