HTML学习4:常用标签之列表标签
最后更新于:2022-04-01 11:28:03
HTML 列表标签支持有序、无序和定义列表。
列表标签表格:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_5721558722213.jpg)
### 一.无序列表
无序列表是一个项目的列表。无序列表项开始于 < ul> 标签,结束于< /ul>标签。每个列表项开始于 < li>标签,结束于</ li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。在这里只是最基础的文字来演示。
~~~
<html>
<head>
<title>列表标签演示</title>
</head>
<body>
<h1>这是一个无序列表标签演示</h1>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>西瓜</li>
<li>荔枝</li>
</ul>
</body>
</html>
~~~
浏览器结果显示为:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_5721558733a13.jpg)
### 二.有序列表
同样,有序列表也是一列项目,列表项目使用数字,字母等进行标记。有序列表开始于 < ol> 标签,结束于< /ol>标签。每个列表项始于 < li> 标签,结束于< /li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
~~~
<html>
<head>
<title>列表标签演示</title>
</head>
<body>
<h1>这是一个有序列表标签演示</h1>
<ol type="a"><!--利用标签的属性设置属性值,从a开自增长-->
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>西瓜</li>
<li>荔枝</li>
</ol>
</body>
</html>
~~~
浏览器结果显示为:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_572155874429a.jpg)
~~~
<html>
<head>
<title>列表标签演示</title>
</head>
<body>
<h1>这是一个有序列表标签演示</h1>
<ol type="1"><!--利用标签的属性设置属性值,从1开始自增长-->
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>西瓜</li>
<li>荔枝</li>
</ol>
</body>
</html>
~~~
浏览器结果显示为:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_57215587553d8.jpg)
### 三.定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 < dl> 标签开始,结束于< /dl>标签。每个自定义列表项以 < dt> 开始,结束于< /dt>标签。每个自定义列表项的定义以 < dd> 开始,结束于< /dd>标签。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
~~~
<html>
<head>
<title>列表标签演示</title>
</head>
<body>
<h1>这是一个定义列表标签演示</h1>
<!--HTML注释:演示列表标签
列表标签:dl
上层项目:dt
下层项目:dd:封装的内容是会被缩进的,有自动缩进的效果。
-->
<dl>
<dt>游戏名称</dt>
<dd>红色警戒</dd>
<dd>三国无双</dd>
<dd>反恐精英</dd>
<dd>街头篮球</dd>
</dl>
</body>
</html>
~~~
浏览器结果显示为:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_572155876609e.jpg)
对于列表标签,可以自己和自己嵌套,也可以和其他的列表标签嵌套。