首页 > web前端 > html教程 > HTML网页列表标记学习教程_HTML/Xhtml_网页制作

HTML网页列表标记学习教程_HTML/Xhtml_网页制作

PHP中文网
发布: 2016-05-16 16:44:10
原创
2074 人浏览过

HTML网页列表标记学习教程. 在html页面中,列表可以起到提纲写领的作用。列表分为两种类型,一是有序列表,一是无序列表。前者用项目符号来标记无序的项目,而后者则使用编号来记录项目的顺序。    所谓有序,指的是按照数字或字母等顺序排列列表项目。    所谓 HTML网页列表标记学习教程.
在html页面中,列表可以起到提纲写领的作用。列表分为两种类型,一是有序列表,一是无序列表。前者用项目符号来标记无序的项目,而后者则使用编号来记录项目的顺序。    所谓有序,指的是按照数字或字母等顺序排列列表项目。    所谓无序,是指以●、○、□等开头的,没有顺序的列表项目。
关于列表的主要标记,如下表所示

               无序列表                            
                 有序列表                                        目录列表                            
                 定义列表                                        菜单列表                            
                 定义列表的标记                            
    1.            列表项目的标记             有序列表标记

        有序列表使用编号,而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头,通常各项目间有先后的顺序性。在有序列表中,主要使用
        1. 两个标记以及type和两个start属性。

          • 基本语法
            1. 项目一
            2. 项目二
            3. 项目三 ……

          语法解释
          在有序列表中,使用

            作为有序的声明,使用
          1. 作为每一个项目的起始。 文件范例:7-1.htm
            通过
            1. 标记建立有序列表。

              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>
              
              文件说明
              登录后复制

              第11行定义了列表的类型为有序,第12行到第15行使用了

            2. 标记作为列表项目的开始。
              #p# 有序列表的类型属性TYPE
              在有序列表的默认情况下,使用数字序号作为列表的开始,我们可以通过type属性将有序列表的类型设置为英文或罗马字母。

              • 基本语法

              语法解释
              其中value的值如下表所示1 数字1,2,3…… a 小写字母a,b,c A 大写字母A,B,C i 小写罗马数字i,ii,iii…… I 大写罗马数字Ⅰ,Ⅲ,Ⅲ…… 文件范例:7-2.htm
              通过type属性设定有序列表编号的类型。

              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>
              
              文件说明
              登录后复制

              第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>
              
              文件说明
              登录后复制

              第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>
                      
                      文件说明
                      登录后复制
                      登录后复制

                      第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>
                              
                              文件说明
                              登录后复制
                              登录后复制

                              第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>
                              
                              文件说明
                              登录后复制

                              第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> 
                              
                              文件说明
                              登录后复制

                              第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>
                            
                            文件说明
                            登录后复制

                            第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>
                            
                            文件说明
                            登录后复制

                            第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>
                            
                            文件说明
                            登录后复制

                            第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中文网(m.sbmmt.com)!


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板