HTML 列表
减小字体
增大字体在HTML文档中，可以使用列表来组织相关数据。在HTML中列表分为无序列表、有序列表和自定义列表三种类型。每种列表有若干项构成。
无序列表
无序列表（Unordered List）的各项没有顺序要求。
无序列表以<ul>标签开始，并以</ul>标签结束。
每个列表项（List Item）使用<li>和</li>标签进行定义。
一个无序列表根据实际需求可以包含多个列表项。
默认情况下，无序列表的各项以●进行标识。
无序列表的例子
<p>无序列表的例子</p>
<p>一年有四季：</p>
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>显示效果如下：
无序列表的type属性
使用type属性可以改变无序列表项的标识。
无序列表中type的取值及标识符号如下表所示：
| type取值 | 列表项符号 |
|---|---|
| disc | 实心圆点 ● （默认值） |
| circle | 空心圆圈 ○ |
| square | 实心正方形 ■ |
| none | 不显示任何标识 |
无序列表不同type取值的例子
<p>type="disc"</p>
<p>我喜欢的运动</p>
<ul
type="disc">
<li>篮球</li>
<li>跑步</li>
<li>羽毛球</li>
<li>打太极拳</li>
</ul>
<p>type="circle"</p>
<p>我喜欢的水果</p>
<ul
type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>鸭梨</li>
<li>李子</li>
</ul>
<p>type="square"</p>
<p>我去过的地方</p>
<ul
type="square">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>杭州</li>
</ul>显示效果如下图所示：
如果不需要显示任何标识符号，则可以将type属性值设置为none，特别是在使用ul元素来定义菜单，图片列表时，不需要任何标识符号。
<p>我使用的编程语言</p>
<ul type="square">
<li>C#</li>
<li>Java</li>
<li>Python</li>
<li>R</li>
</ul>
其显示效果如下：
有序列表
有序列表（Ordered List）的各项是有顺序的，因此，有序列表会以阿拉伯数字、罗马数字或大小写字母来表示先后顺序。
有序列表以<ol>开始，并以</ol>结束进行定义。有序列表项（List Item）也以<li>进行定义。
有序列表的各项默认以阿拉伯数字进行编序。
有序列表根据实际需要可以包含多个列表项。
有序列表使用的例子
<p>请选出你喜欢的水果：</p>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Grape</li>
</ol>
其显示效果如下：
有序列表的type属性
使用<ol>元素的type属性可以改变无序列表的编序方式。
有序列表type属性的取值如下表所示：
| type取值 | 列表项符号 |
|---|---|
| 1 | 阿拉伯数字（默认值）：1. 2. 3. ...... |
| a | 小写英文字母：a. b. c. ...... |
| A | 大写英文字母：A. B. C. ...... |
| i | 小写罗马数字：i. ii. iii. ...... |
| I | 大写罗马数字：I. II. III. ...... |
有序列表type="a"
<p>请选出你喜欢的水果：</p>
<ol type="a">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Grape</li>
</ol>
其预览效果如下图所示：
有序列表type="A"
<p>请选出你喜欢的水果：</p>
<ol type="A">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Grape</li>
</ol>
其预览效果如下图所示：
有序列表type="i"
<p>请选出你喜欢的水果：</p>
<ol type="i">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Grape</li>
</ol>
其预览效果如下图所示：
有序列表type="I"
<p>请选出你喜欢的水果：</p>
<ol type="I">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Grape</li>
</ol>
其显示效果如下图所示：
控制有序列表的起始序号
默认情况下，有序列表的数字或字母都从第1个开始，但有时为了需要可能从指定的数字或字母开始，这时可以借助start属性来指定。
有序列表的start属性指定开始编序的起始位置。
<p>请选择你去过的城市：</p>
<ol type="A" start="28">
<li>长沙</li>
<li>武汉</li>
<li>沧州</li>
<li>兰州</li>
</ol>
其显示效果如下图所示：
定义列表（描述性列表）
定义列表亦即描述性列表（Description List）,其除了给出要描述的术语（名称）之外，还给出术语（名称）的详细描述。
自定义列表使用<dl>标签进行定义，使用<dt>标签（Description Term）定义一个术语，使用<dd>标签描述术语（Describe Destails）。
<p>请选择你去过的省及城市：</p>
<dl>
<dt>河北省</dt>
<dd>石家庄</dd>
<dd>沧州</dd>
<dd>兰州</dd>
<dt>黑龙江省</dt>
<dd>哈尔滨市</dd>
<dd>牡丹江市</dd>
<dd>大庆市</dd>
</dl>
<p>WEB前端技术</p>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，定义网页结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，定义网页元素的样式</dd>
<dt>JavaScript</dt>
<dd>客户端脚本语言，实现客户端交互</dd>
</dl>
其预览效果如下图所示：
HTML 列表总结
在实际中，往往借助CSS来控制无序列表、有序列表以及定义列表的显示样式，以实现其更具有美感的效果。
以上各例的具体效果，读者可以点击这里在自己的浏览器中预览其效果。
以上讲解了HTML 列表的无序列表<ul>、有序列表<ol>和定义列表<dl>三种HTML 元素的具体使用方法，如有问题请留言。
如需转载，请注明出处：翔宇亭IT乐园（http://www.biye5u.com），并给出本文的详细地址：http://www.biye5u.com/article/HTML5/2023/6596.html
微信搜索“优雅的代码”关注本站的公众号，或直接使用微信扫描下面二维码关注本站公众号，以获取最新内容。
个人成长离不开各位的关注，你的关注就是我继续前行的动力。
- 给好评 如果您觉得此内容好，就请您
100%(1) 
- 给差评 如果您觉得此内容差，就请您
0%(0) 