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
Syntax explanation
In an ordered list, use
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> 文件说明
Line 11 defines the type of the list as ordered, and lines 12 to 15 use the
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> 文件说明
第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#
无序列表标记
语法解释
在无序列表中,使用
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行使用了
语法解释
在无序列表中,使用
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行使用了
语法解释
在目录列表中,使用
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行使用了
语法解释
在定义列表中,使用
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行使用了
语法解释
在菜单列表中,使用