第五章 使用列表
5.1 认识列表标签
HTML列表共有3种类型，无序列表，项目符号由几个符号构成；有序列表，项目符号由字母或者数字进行排序；定义列表，产生条件和描述的双重列表，可以对列表进行更为灵活的定义。
5.2 有序列表ol
有序列表在列表中将每个元素按数字或字母顺序标号。有序列表以<ol></ol>开始结束，每个列表元素用<li></li>
语法：
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
......
</ol>
eg：
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ol>
</body>
</html>
运行结果：
5.2.2 有序列表的序号类型type
默认情况下，有序列表的序号是数字的，通过type属性可以改变序号类型，包括大小写字母，阿拉伯数字和大小写罗马数字。
语法：
<ol type="序号类型">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
......
</ol>
说明：有序列表序号类型有5种
| type | 列表项目的序号类型 |
| 1 | 数字1、2、3、4...... |
| a | 小写英文字母a、b、c、d...... |
| A | 大写英文字母A、B、C、D...... |
| i | 小写罗马数字i、ii、iii、iv...... |
| I | 大写罗马数字I、II、III、IV...... |
eg:
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol type="I">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ol>
<hr>
<ol type="A">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ol>
<hr>
<ol type="i">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ol>
<hr>
<ol type="a">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ol>
<hr>
<ol type="1">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ol>
</body>
</html>
有序结果：
提示：type属性仅仅适用于有序和无序列表，不适用于目录列表、自定义列表和菜单列表
5.2.3 有序列表的起始数值 start
默认从1开始（没有0）
语法：
<ol start="起始数值">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
......
</ol>
说明：起始数值只能写数字，可以对字母和罗马数字起作用
eg:
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol start=2 type='a'>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ol>
</body>
</html>
运行结果：
5.3 无序列表
无序列表和有序列表类似，但无序列表不使用数字或字母，且序号没有顺序
5.3.1 无序列表标签 <ul>
语法：
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
......
</ul>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ul>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ul>
</body>
</html>运行结果：
5.3.2 无序列表的类型type
语法：
<ul type="符号类型">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
......
</ul>
说明：
| 类型值 | 列表项目的符号 |
| Disc | 默认值,黑色实心圆点项目符号“●” |
| circle | 空心圆环项目符号“○” |
| square | 正方形的项目符号“□” |
eg:
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ul type="Disc">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ul>
<hr>
<ul type="circle">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ul>
<hr>
<ul type="square">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ul>
</body>
</html>
运行结果:
5.3.3 目录列表标签
功能与无序列表相同，可相互替代
语法：
<dir>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
......
</dir>
eg： （type属性只有有序和无序列表有 目录列表没有 设置了也没用）
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<p>星期数</p>
<dir type="square">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</dir>
</body>
</html>
运行结果:
5.3.4 定义列表标签 <dl>
定义列表由两部分组成：定义条件和定义描述。
定义列表dl全称：definition list
<dt>用来指定需要解释的名词，全称：definition term
<dd>是具体解释，全称：definition description
语法：
<dl>
<dt>定义术语<./dt>
<dd>术语解释</dd>
... ...
</dl>
eg：
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<dl>
<dt>CSS</dt>
<dd>CSS 就是Cascading Style Sheets,中文翻译，“层叠样式表”，简称样式表</dd>
<dt>html</dt>
<dd>超文本标记语言（标准通用标记语言下的一个应用，外语缩写HTML），是迄今为止网络上应用最为广泛的语言，也是构成网页文档的主要语言</dd>
<dt>JavaScript</dt>
<dd>JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</dd>
</dl>
</body>
</html>
运行结果：
提示：<dd>标签有缩进功能，尽管可以在自定义列表外使用，但这并不是有效的HTML,在某些浏览器可能引发难以预料的后果
5.3.5 菜单列表标签<menu>
主要用于设计用于单列的列表，功能和无序列表相同，可以相互互换
eg：
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<menu>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</menu>
</body>
</html>运行结果:
第五章小结
有序列表
<ol type="类型" start="起始数字n">
<li>XXX</li>
<li>XXX</li>
</ol>