HTML网页列表标记学习教程_HTML/Xhtml_网页制作
| HTML网页列表标记学习教程.在html页面中，列表可以起到提纲写领的作用。列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。 所谓有序，指的是按照数字或字母等顺序排列列表项目。 所谓HTML网页列表标记学习教程. 在html页面中，列表可以起到提纲写领的作用。列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。 所谓有序，指的是按照数字或字母等顺序排列列表项目。 所谓无序，是指以●、○、□等开头的，没有顺序的列表项目。 关于列表的主要标记，如下表所示 <ul> 无序列表 <ol> 有序列表 <dir> 目录列表 <dl> 定义列表 <menu> 菜单列表 <dt>、<dd> 定义列表的标记 <li> 列表项目的标记 有序列表标记<OL> 有序列表使用编号，而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用<ol>和<li>两个标记以及type和两个start属性。
语法解释 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>Photoshop13 <li>Illustrator14 <li>Freehand15 <li>CorelDraw16 </ol>17 </body>18 </html>文件说明 第11行定义了列表的类型为有序，第12行到第15行使用了<li>标记作为列表项目的开始。
语法解释 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>Photoshop13 <li>Illustrator14 <li>Freehand15 <li>CorelDraw16 </ol>17 <hr>18 <h2>图像设计软件</h2>19 <ol type=I>20 <li>Photoshop21 <li>Illustrator22 <li>Freehand23 <li>CorelDraw24 </ol>25 <hr>26 <h2>网页动画软件</h2>27 <ol type=i>28 <li>Flash29 <li>LiveMotion30 </OL>31</body>32 </html>文件说明 第11行定义了列表的编号类型为小写字母，第19行定义了列表的编号类型为大写的罗马字母，第27行定义了列表的编号类型为小写的罗马字母。
语法解释 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>Photoshop13 <li>Illustrator14 <li>Freehand15 <li>CorelDraw16 </ol>17 <hr>18 <h2>图像设计软件</h2>19 <ol type=I start=3>20 <li>Photoshop21 <li>Illustrator22 <li>Freehand23 <li>CorelDraw24 </ol>25 </body>26 </html>文件说明 第11行定义了数字有序列表从5开始，第19行定义了罗马数字的有序列表从Ⅲ开始。
语法解释 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>Photoshop13 <li>Illustrator14 <li>Freehand15 <li>CorelDraw16 </ul>17 </body>18 </html>文件说明 第11行定义了列表的类型为无序，第12行至15行使用了<li>标记作为列表项目的开始。
语法解释 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>Photoshop13 <li>Illustrator14 <li>Freehand15 <li>CorelDraw16 </ul>17 </body>18 </html>文件说明 第11行定义了列表的类型为无序，第12行至15行使用了<li>标记作为列表项目的开始。
语法解释 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>Photoshop13 <li>Illustrator14 <li>Freehand15 <li>CorelDraw16 </dir>17 </body>18 </html>文件说明 第11行定义了列表的类型为目录，第12行至第15行使用了<li>标记作为列表项目的开始。
语法解释 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行使用了<dt>显示软件名称，<dd>显示软件的说明。
语法解释 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>Photoshop13 <li>Illustrator14 <li>Freehand15 <li>CorelDraw16 </menu>17 </body>18 </html>文件说明 第11行定义了列表的类型为菜单，第12行至第15行使用了<li>标记作为列表项目的开始。
语法解释 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>Photoshop13 <li>Illustrator14 <li>Freehand15 <li>CorelDraw16 </ul>17 <hr>18 <h2>图像设计软件</h2>19 <ul type=square>20 <li>Photoshop21 <li>Illustrator22 <li>Freehand23 <li>CorelDraw24 </ul>25 <body>26 </html>文件说明 第11行定义了列表的编号类型为○，第19行定义了列表的编号类型为□。
语法解释 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行定义了定义列表的第一级，并使用了<u>标记加注了下划线，第13和14行 、第16和第17行、第19行和第20行、第22行和23行定义了列表的解释。 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>Photoshop14 <li>Illustrator15 <li>Freehand16 <li>CorelDraw17 </ol>18 <li><u>网页制作软件</u>19 <ol type=I>20 <li>Dreamweaver21 <li>Frontpage22 <li>Golive23 </ol>24 <li><u>网页动画软件</u>25 <ol type=I>26 <li>Flash27 <li>LiveMotion28 </ol>29 </ul>30 </body>31 </html>文件说明 第10行定义了列表的第一级，第11、18、24行定义了无序列表的内容，并使用了标记加注了下划线，第12至17行、第19至23行、第25至28行定义了二级列表。
以上就是HTML网页列表标记学习教程_HTML/Xhtml_网页制作的内容， |