Application avancée des balises ol et li en HTML-tutoriel HTML-php.cn

Application avancée des balises ol et li en HTML

黄舟

Libérer： 2017-06-30 14:03:03

original

2293 Les gens l'ont consulté

Cet article présente principalement l'application avancée des balises de liste ordonnée ol et li en HTML,

Lorsque nous concevons le contenu d'une liste ordonnée lors de la conception Web, nous ajoutons souvent manuellement une valeur avant chaque ÉLÉMENT ou ajoutons cette valeur. par le programme.

Et si vous utilisez les balises de liste ordonnées ol et li, vous n'avez pas besoin d'être aussi gênant. Vous n'êtes pas obligé de remplir l'ordinal par vous-même. Cette fonctionnalité ne semble pas évidente. en utilisant une liste à un seul niveau, mais en utilisant une liste à plusieurs niveaux, ses caractéristiques sont évidentes à cette époque.

Le code d'application général des balises de liste ordonnée ol et li est le suivant :

 <ol>
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>

Copier après la connexion

Jetons un coup d'œil à l'application avancée des balises de liste ordonnée ol et li :

Changer la valeur de départ de la liste ordonnée

Changer la valeur de départ de l'attribut est : "start", ce qui suit est le numéro de séquence commençant à 10. Exemple de code de tableau séquentiel :

 <ol start="10">
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>

Copier après la connexion

Exécutez le code pour voir l' effet :

 <!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>

Copier après la connexion

Définir le type de numéro de série de la liste commandée

L'attribut pour changer le type de numéro est : "type", le type de type a les types suivants :

A Lettres majuscules A, B , C, D, E

a Lettres minuscules a, b, c, c, e

I Chiffres romains majuscules I, II , III, IV, V

i Chiffres romains minuscules i, ii, iii, iv, v

1 Chiffres arabes 1, 2, 3, 4, 5

Le Voici un exemple de code d'une table de séquence avec des lettres majuscules dans le type de numéro de série ：

<!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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!