Home > Web Front-end > HTML Tutorial > HTML web page list markup learning tutorial_HTML/Xhtml_Web page production

HTML web page list markup learning tutorial_HTML/Xhtml_Web page production

PHP中文网
Release: 2016-05-16 16:44:10
Original
2083 people have browsed it

HTML web page list markup learning tutorial. In HTML pages, lists can play the role of outline writing. Lists are divided into two types, one is an ordered list and the other is an unordered list. The former uses bullet points to mark unordered items, while the latter uses numbers to record the order of items. The so-called ordering refers to arranging list items in numerical or alphabetical order. so-called HTML web page list markup learning tutorial.
In HTML pages, lists can play the role of outline writing. Lists are divided into two types, one is an ordered list and the other is an unordered list. The former uses bullet points to mark unordered items, while the latter uses numbers to record the order of items. The so-called ordering refers to arranging list items in numerical or alphabetical order. The so-called disorder refers to list items starting with ●, ○, □, etc., without order.
The main tags about the list are as shown in the table below

    ​ ​ ​ Unordered list                                                                                                                                    Ordered list                                                                                                                             Directory list                                                                                                                         ​ ​ ​ Definition list                                                                                                                                   Menu list                                                                                                                        Define the label of the list                                                                                                                                     List item tag                   ​ Ordered list tags

      Ordered lists use numbers instead of bullets to organize items. The items in the list start with a number or an English letter, and there is usually a sequence between the items. In an ordered list, the two tags
        and
      1. are mainly used, as well as the type and two start attributes.

        • Basic grammar
          1. Item one
          2. Item two
          3. Item three...

        Syntax explanation
        In an ordered list, use

          As an orderly statement, use
        1. at the beginning of each item. File example: 7-1.htm
          Create an ordered list through
            and
          1. tags.

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

            Line 11 defines the type of the list as ordered, and lines 12 to 15 use the

          2. mark as the start of the list item.
                                                                                                  #p# The type attribute TYPE
            of the ordered list. By default, the ordered list uses a numerical sequence as the start of the list. We can set the type of the ordered list to English or Roman letters through the type attribute.

            • Basic Grammar

            Syntax explanation
            The value of value is as shown in the following table 1 Numbers 1, 2, 3...                                     a                       Lowercase letters a, b, c                                     A               Capital letters A, B, C                                     i ​ ​ ​ ​ Lowercase Roman numerals i, ii, iii...                                     I ​ ​ ​ ​ Uppercase Roman numerals Ⅰ, Ⅲ, Ⅲ...                   ​ File example: 7-2.htm
            Set the type of ordered list number through the type attribute.

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

            第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>图像设计软件</h2>
            11 <ol start=5>
            12 <li>Photoshop
            13 <li>Illustrator
            14 <li>Freehand
            15 <li>CorelDraw
            16 </ol>
            17 <hr>
            18 <h2>图像设计软件</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>
            
            文件说明
            Copy after login

            第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>图像设计软件</h2>
                    11 <ul>
                    12 <li>Photoshop
                    13 <li>Illustrator
                    14 <li>Freehand
                    15 <li>CorelDraw
                    16 </ul>
                    17 </body>
                    18 </html>
                    
                    文件说明
                    Copy after login
                    Copy after login

                    第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>图像设计软件</h2>
                            11 <ul>
                            12 <li>Photoshop
                            13 <li>Illustrator
                            14 <li>Freehand
                            15 <li>CorelDraw
                            16 </ul>
                            17 </body>
                            18 </html>
                            
                            文件说明
                            Copy after login
                            Copy after login

                            第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>图像设计软件</h2>
                            11 <dir>
                            12 <li>Photoshop
                            13 <li>Illustrator
                            14 <li>Freehand
                            15 <li>CorelDraw
                            16 </dir>
                            17 </body>
                            18 </html>
                            
                            文件说明
                            Copy after login

                            第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>图像设计软件</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> 
                            
                            文件说明
                            Copy after login

                            第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>图像设计软件</h2>
                          11 <menu>
                          12 <li>Photoshop
                          13 <li>Illustrator
                          14 <li>Freehand
                          15 <li>CorelDraw
                          16 </menu>
                          17 </body>
                          18 </html>
                          
                          文件说明
                          Copy after login

                          第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>图像设计软件</h2>
                          11 <ul type=circle>
                          12 <li>Photoshop
                          13 <li>Illustrator
                          14 <li>Freehand
                          15 <li>CorelDraw
                          16 </ul>
                          17 <hr>
                          18 <h2>图像设计软件</h2>
                          19 <ul type=square>
                          20 <li>Photoshop
                          21 <li>Illustrator
                          22 <li>Freehand
                          23 <li>CorelDraw
                          24 </ul>
                          25 <body>
                          26 </html>
                          
                          文件说明
                          Copy after login

                          第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>图像设计软件</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>
                          
                          文件说明
                          Copy after login

                          第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>
                                
                                文件说明
                                Copy after login

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

                                标记 描述 描述 描述

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


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template