recherche
Maisoninterface Webtutoriel HTMLTutoriel d'apprentissage du balisage de liste de pages Web HTML_HTML/Xhtml_Production de pages Web

Tutoriel d'apprentissage du balisage de liste de pages Web HTML_HTML/Xhtml_Production de pages Web

PHP中文网
PHP中文网
May 16, 2016 pm 04:44 PM

Tutoriel d'apprentissage du balisage de liste de pages Web HTML. Dans les pages HTML, les listes peuvent jouer le rôle de rédaction de plans. Les listes sont divisées en deux types, l’une est une liste ordonnée et l’autre est une liste non ordonnée. Le premier utilise des puces pour marquer les éléments non ordonnés, tandis que le second utilise des chiffres pour enregistrer l'ordre des éléments. Ce qu'on appelle l'ordre consiste à organiser les éléments d'une liste par ordre numérique ou alphabétique. soi-disant Tutoriel d'apprentissage du balisage de liste de pages Web HTML.
Dans les pages HTML, les listes peuvent jouer le rôle de rédaction de plans. Les listes sont divisées en deux types, l’une est une liste ordonnée et l’autre est une liste non ordonnée. Le premier utilise des puces pour marquer les éléments non ordonnés, tandis que le second utilise des chiffres pour enregistrer l'ordre des éléments. Ce qu'on appelle l'ordre consiste à organiser les éléments d'une liste par ordre numérique ou alphabétique. Le soi-disant désordre fait référence à des éléments de liste commençant par ●, ○, □, etc., sans ordre.
Les principales balises de la liste sont telles qu'indiquées dans le tableau ci-dessous

    ​ ​ ​ Liste non ordonnée                                                                                            Liste ordonnée                                                                                                                           Liste du répertoire                                                                                                                     ​ ​ ​ Liste de définitions                                                                                                                                    Liste des menus                                                                                                                        Définir le label de la liste                                                                                                                           Balise d'élément de liste                   ​ Balises de liste ordonnée

    Les listes ordonnées utilisent des nombres au lieu de puces pour organiser les éléments. Les éléments de la liste commencent par un chiffre ou une lettre anglaise, et il existe généralement une séquence entre les éléments. Dans une liste ordonnée, les deux balises
      et
    1. sont principalement utilisées, ainsi que le type et les deux attributs start.
      • Grammaire de base
        1. Élément un
        2. Élément deux
        3. Élément trois...

      Explication de la syntaxe
      Dans une liste ordonnée, utilisez Pour une déclaration ordonnée, utilisez

    2. au début de chaque élément. Exemple de fichier : 7-1.htm
      Créez une liste ordonnée via les balises 

        01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-1.htm -->
03 <!-- 文件说明：建立有序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立有序列表</title>
08 </head>
09 <body>
10 <h2 id="图像设计软件">图像设计软件</h2>
11 <ol>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 </body>
18 </html>

文件说明

        La ligne 11 définit le type de liste comme ordonné, et les lignes 12 à 15 utilisent la marque


      1.                                                                                       #p# L'attribut de type TYPE
        de la liste ordonnée. Par défaut, la liste ordonnée utilise une séquence numérique comme début de liste. Nous pouvons définir le type de la liste ordonnée sur des lettres anglaises ou romaines via l'attribut type.
        • Grammaire de base

        Explication de la syntaxe
        La valeur de la valeur est telle qu'indiquée dans le tableau suivant 1 Numéros 1, 2, 3...                                     un                       Lettres minuscules a, b, c                                     UN               Lettres majuscules A, B, C                                     je ​ ​ ​ ​ Chiffres romains minuscules i, ii, iii...                                     je    Chiffres romains majuscules Ⅰ, Ⅲ, Ⅲ...                   ​ Exemple de fichier : 7-2.htm
        Définissez le type de numéro de liste ordonnée via l'attribut type. 

        01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-2.htm -->
03 <!-- 文件说明：设定有序列表编号类型-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定有序列表编号类型</title>
08 </head>
09 <body>
10 <h2 id="图像设计软件">图像设计软件</h2>
11 <ol type=a>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 <hr>
18 <h2 id="图像设计软件">图像设计软件</h2>
19 <ol type=I>
20 <li>Photoshop
21 <li>Illustrator
22 <li>Freehand
23 <li>CorelDraw
24 </ol>
25 <hr>
26 <h2 id="网页动画软件">网页动画软件</h2>
27 <ol type=i>
28 <li>Flash
29 <li>LiveMotion
30 </OL>
31</body>
32 </html>

文件说明

        第11行定义了列表的编号类型为小写字母，第19行定义了列表的编号类型为大写的罗马字母，第27行定义了列表的编号类型为小写的罗马字母。
                                                       #p# 有序列表的起始属性START
        在默认的情况下，有序列表从数字1开始记数，这个起始值通过start属性可以调整，并且英文字母和罗马字母的起始值也可以调整。

        • 基本语法

        语法解释
        其中不论列表编号的类型是数字、英文字母还是罗马字母，value的值都是其始的数字。 文件范例：7-3.htm
        通过start属性设定有序列表的起始编号。

        01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-3.htm -->
03 <!-- 文件说明：设定有序列表起始编号-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定有序列表起始编号</title>
08 </head>
09 <body>
10 <h2 id="图像设计软件">图像设计软件</h2>
11 <ol start=5>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 <hr>
18 <h2 id="图像设计软件">图像设计软件</h2>
19 <ol type=I start=3>
20 <li>Photoshop
21 <li>Illustrator
22 <li>Freehand
23 <li>CorelDraw
24 </ol>
25 </body>
26 </html>

文件说明

        第11行定义了数字有序列表从5开始，第19行定义了罗马数字的有序列表从Ⅲ开始。
                                                       #p# 无序列表标记


          在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用
            、、
            、、
          • 几个标记和type属性。
            • 基本语法

              • 项目一
              • 项目二
              • 项目三 ……

            语法解释
            在无序列表中，使用

              作为无序的声明，使用
            • 作为每一个项目的起始。 文件范例：7-4.htm
              通过
                和
              • 标记建立无序列表。
                01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-4.htm -->
03 <!-- 文件说明：建立无序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立无序列表</title>
08 </head>
09 <body>
10 <h2 id="图像设计软件">图像设计软件</h2>
11 <ul>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ul>
17 </body>
18 </html>

文件说明

                第11行定义了列表的类型为无序，第12行至15行使用了

              • 标记作为列表项目的开始。
                                                               #p# 无序列表标记

                  在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用
                    、、
                    、、
                  • 几个标记和type属性。
                    • 基本语法

                      • 项目一
                      • 项目二
                      • 项目三 ……

                    语法解释
                    在无序列表中，使用

                      作为无序的声明，使用
                    • 作为每一个项目的起始。 文件范例：7-4.htm
                      通过
                        和
                      • 标记建立无序列表。
                        01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-4.htm -->
03 <!-- 文件说明：建立无序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立无序列表</title>
08 </head>
09 <body>
10 <h2 id="图像设计软件">图像设计软件</h2>
11 <ul>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ul>
17 </body>
18 </html>

文件说明

                        第11行定义了列表的类型为无序，第12行至15行使用了

                      • 标记作为列表项目的开始。
                                                                       #p# 目录列表标记
                        目录列表用于显示文件内容的目录大纲，通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容，例如字典中的索引或单词表中的单词等。列表中每项至多只能有20个字符。
                        • 基本语法
                        • 项目一
                        • 项目二
                        • 项目三   ……

                        语法解释
                        在目录列表中，使用

                        作为目录列表的声明，使用
                      • 作为每一个项目的起始。 文件范例：7-5.htm
                        通过和
                      • 标记建立目录列表。
                        01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-5.htm -->
03 <!-- 文件说明：建立目录列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立目录列表</title>
08 </head>
09 <body>
10 <h2 id="图像设计软件">图像设计软件</h2>
11 <dir>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </dir>
17 </body>
18 </html>

文件说明

                        第11行定义了列表的类型为目录，第12行至第15行使用了

                      • 标记作为列表项目的开始。
                                                                       #p# 定义列表标记

                        定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。定义列表也称为字典列表，因为它与字典具有相同的格式。在定义列表中，每个列表项带有一个缩进的定义字段，就好象字典对文字进行解释一样。
                        • 基本语法
                          名词一
                          解释一
                          名词二
                          解释二
                          名词三
                          解释三  ……

                        语法解释
                        在定义列表中，使用

                        作为定义列表的声明，使用
                        作为名词的标题，
                        用来解释名词。 文件范例：7-6.htm
                        通过
                        、
                        、
                        标记建立定义列表。
                        01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-6.htm -->
03 <!-- 文件说明：建立定义列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07<title>建立定义列表</title>
08 </head>
09 <body>
10 <h2 id="图像设计软件">图像设计软件</h2>
11 <dl>
12 <dt>Photoshop<dd>Adobe公司的图像处理软件
13 <dt>Illustrator<dd>Adobe公司的矢量绘图软件
14 <dt>Freehand<dd>Macromedia公司的矢量绘图软件
15 <dt>CorelDraw<dd>Corel公司的图形图像软件
16 </dl>
17 </body>
18 </html> 

文件说明

                        第11行定义了列表的类型为定义列表，第12行至15行使用了

                        显示软件名称，
                        显示软件的说明。
                                                                       #p# 菜单列表标记
                        菜单列表用于显示菜单内容，设计单列的菜单。在Internet Explorer浏览器中的显示和无序列表是相同的。
                        • 基本语法

                        • 项目一

                        • 项目二

                        • 项目三

                        • ……

                        语法解释
                        在菜单列表中，使用

                        作为菜单列表的声明，使用
                      • 作为每一个项目的起始。 文件范例：7-7.htm
                        通过和
                      • 标记建立目录列表。
                        01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-7.htm -->
03 <!-- 文件说明：建立菜单列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立菜单列表</title>
08 </head>
09 <body>
10 <h2 id="图像设计软件">图像设计软件</h2>
11 <menu>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </menu>
17 </body>
18 </html>

文件说明

                        第11行定义了列表的类型为菜单，第12行至第15行使用了

                      • 标记作为列表项目的开始。
                                                                       #p# 无序列表的类型属性TYPE
                        在无序列表的默认情况下，使用●作为列表的开始，我们可以通过TYPE属性将无序列表的类型设置为○或□。
                        • 基本语法

                        语法解释
                        其中value的值如下表所示disc            ●                            circle            ○                            square            □             文件范例：7-8.htm
                        通过type属性设定无序列表编号的类型。

                        01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-8.htm -->
03 <!-- 文件说明：设定无序列表编号类型-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定无序列表编号类型</title>
08 </head>
09 <body>
10 <h2 id="图像设计软件">图像设计软件</h2>
11 <ul type=circle>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ul>
17 <hr>
18 <h2 id="图像设计软件">图像设计软件</h2>
19 <ul type=square>
20 <li>Photoshop
21 <li>Illustrator
22 <li>Freehand
23 <li>CorelDraw
24 </ul>
25 <body>
26 </html>

文件说明

                        第11行定义了列表的编号类型为○，第19行定义了列表的编号类型为□。
                                                                       #p# 定义列表的嵌套
                        嵌套列表指的是多于一级层次的列表，一级项目下面可以存在二级项目、三级项目等。项目列表可以进行嵌套，以实现多级项目列表的形式。定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。

                        • 基本语法
                          名词一
                          解释一
                          解释二
                          解释三
                        • 名词二
                        解释一
                        解释二
                        解释三  ……

                      语法解释
                      在定义列表中，一个

                      标记下可以有多个
                      标记作为名词的解释和说明，以实现定义列表的嵌套。 文件范例：7-9.htm
                      通过
                      、
                      、
                      标记建立定义列表的嵌套。
                      01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-9.htm -->
03 <!-- 文件说明：定义列表嵌套 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>定义列表嵌套</title>
08 </head>
09 <body>
10 <h2 id="图像设计软件">图像设计软件</h2>
11 <dl>
12 <dt><u>Photoshop</u>
13 <dd>Adobe公司出品
14 <dd>图像处理软件
15 <dt><u>Illustrator</u>
16 <dd>Adobe公司出品
17 <dd>矢量绘图软件
18 <dt><u>Freehand</u>
19 <dd>Macromedia公司出品
20 <dd>矢量绘图软件
21 <dt><u>CorelDraw</u>
22 <dd>Corel公司出品
23 <dd>图形图像软件
24 </dl>
25 </body>
26 </html>

文件说明

                      第12、15、18、21行定义了定义列表的第一级，并使用了标记加注了下划线，第13和14行 、第16和第17行、第19行和第20行、第22行和23行定义了列表的解释。
                                                                     #p# 无序列表和有序列表的嵌套
                      这种嵌套类型是最常见的列表嵌套，重复地使用

                        和
                        通过
                          和
                          标记建立列表的嵌套。

                        01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-10.htm -->
03 <!-- 文件说明：列表嵌套 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>列表嵌套</title>
08 </head>
09 <body>
10 <ul type=square>
11 <li><u>图像设计软件</u>
12 <ol type=I>
13 <li>Photoshop
14 <li>Illustrator
15 <li>Freehand
16 <li>CorelDraw
17 </ol>
18 <li><u>网页制作软件</u>
19 <ol type=I>
20 <li>Dreamweaver
21 <li>Frontpage
22 <li>Golive
23 </ol>
24 <li><u>网页动画软件</u>
25 <ol type=I>
26 <li>Flash
27 <li>LiveMotion
28 </ol>
29 </ul>
30 </body>
31 </html>

文件说明

                        第10行定义了列表的第一级，第11、18、24行定义了无序列表的内容，并使用了标记加注了下划线，第12至17行、第19至23行、第25至28行定义了二级列表。                                                

                        标记 描述 值 描述 值 描述

                         以上就是HTML网页列表标记学习教程_HTML/Xhtml_网页制作的内容，更多相关内容请关注PHP中文网（www.php.cn）！


        Déclaration
        Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
        Article connexe
        HTML: construire la structure des pages WebHTML: construire la structure des pages WebApr 14, 2025 am 12:14 AM

        HTML est la pierre angulaire de la construction de la structure des pages Web. 1. HTML définit la structure et la sémantique du contenu et les utilisations, etc. Tags. 2. Fournir des marqueurs sémantiques, tels que, etc., pour améliorer l'effet SEO. 3. Pour réaliser l'interaction de l'utilisateur via des balises, faites attention à la vérification de la forme. 4. Utilisez des éléments avancés tels que, combinés avec JavaScript pour obtenir des effets dynamiques. 5. Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non déposées et des outils de vérification sont nécessaires. 6. Les stratégies d'optimisation comprennent la réduction des demandes HTTP, la compression du HTML, l'utilisation de balises sémantiques, etc.

        Du texte aux sites Web: la puissance de HTMLDu texte aux sites Web: la puissance de HTMLApr 13, 2025 am 12:07 AM

        HTML est un langage utilisé pour créer des pages Web, définissant la structure des pages Web et le contenu via des balises et des attributs. 1) HTML organise la structure des documents via des balises, telles que. 2) Le navigateur analyse HTML pour construire le DOM et rend la page Web. 3) De nouvelles caractéristiques de HTML5, telles que, améliorez les fonctions multimédias. 4) Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non attribuées. 5) Les suggestions d'optimisation incluent l'utilisation de balises sémantiques et la réduction de la taille du fichier.

        Comprendre HTML, CSS et JavaScript: un guide pour débutantComprendre HTML, CSS et JavaScript: un guide pour débutantApr 12, 2025 am 12:02 AM

        WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

        Le rôle de HTML: Structurer le contenu WebLe rôle de HTML: Structurer le contenu WebApr 11, 2025 am 12:12 AM

        Le rôle de HTML est de définir la structure et le contenu d'une page Web via des balises et des attributs. 1. HTML organise le contenu via des balises telles que, ce qui le rend facile à lire et à comprendre. 2. Utilisez des balises sémantiques telles que, etc. pour améliorer l'accessibilité et le référencement. 3. Optimisation du code HTML peut améliorer la vitesse de chargement des pages Web et l'expérience utilisateur.

        HTML et code: un examen plus approfondi de la terminologieHTML et code: un examen plus approfondi de la terminologieApr 10, 2025 am 09:28 AM

        Htmlisaspecificypeofcodefocusedonconstructringwebcontent, tandis que "code" en général incluse les langues liés à lajavaScriptandpythonforfonctionnality.1) htmldefineswebpagestructureusingtags.2) "Code" enclueSawidererRangeFlanguageForgicandInteract "

        HTML, CSS et JavaScript: outils essentiels pour les développeurs WebHTML, CSS et JavaScript: outils essentiels pour les développeurs WebApr 09, 2025 am 12:12 AM

        HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

        Les rôles de HTML, CSS et JavaScript: responsabilités de baseLes rôles de HTML, CSS et JavaScript: responsabilités de baseApr 08, 2025 pm 07:05 PM

        HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

        HTML est-il facile à apprendre pour les débutants?HTML est-il facile à apprendre pour les débutants?Apr 07, 2025 am 12:11 AM

        HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

        See all articles

        Outils d'IA chauds

        Undresser.AI Undress

        Undresser.AI Undress

        Application basée sur l'IA pour créer des photos de nu réalistes

        AI Clothes Remover

        AI Clothes Remover

        Outil d'IA en ligne pour supprimer les vêtements des photos.

        Undress AI Tool

        Undress AI Tool

        Images de déshabillage gratuites

        Clothoff.io

        Clothoff.io

        Dissolvant de vêtements AI

        AI Hentai Generator

        AI Hentai Generator

        Générez AI Hentai gratuitement.

        Afficher plus

        Article chaud

        R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
        3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
        R.E.P.O. Meilleurs paramètres graphiques
        3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
        Assassin's Creed Shadows: Solution d'énigmes de coquille
        2 Il y a quelques semainesByDDD
        R.E.P.O. Comment réparer l'audio si vous n'entendez personne
        3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
        WWE 2K25: Comment déverrouiller tout dans Myrise
        4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
        Afficher plus

        Outils chauds

        Adaptateur de serveur SAP NetWeaver pour Eclipse

        Adaptateur de serveur SAP NetWeaver pour Eclipse

        Intégrez Eclipse au serveur d'applications SAP NetWeaver.

        Télécharger la version Mac de l'éditeur Atom

        Télécharger la version Mac de l'éditeur Atom

        L'éditeur open source le plus populaire

        ZendStudio 13.5.1 Mac

        ZendStudio 13.5.1 Mac

        Puissant environnement de développement intégré PHP

        VSCode Windows 64 bits Télécharger

        VSCode Windows 64 bits Télécharger

        Un éditeur IDE gratuit et puissant lancé par Microsoft

        Envoyer Studio 13.0.1

        Envoyer Studio 13.0.1

        Puissant environnement de développement intégré PHP

        Afficher plus

        Sujets chauds

        Où se trouve l’entrée de connexion pour la messagerie Gmail ?
        7489
        15
        Tutoriel CakePHP
        1377
        52
        Quel est le format du nom de compte de Steam
        77
        11
        Clé d&amp;amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent
        52
        19
        NYT Connexions Indices et réponses
        19
        41
        Afficher plus