1.特点
整齐、整洁、有序,它作为布局会更加自由和方便
2.无序列表
特点:
- 各个列表项之间没有顺序级别之分,是并列关系
- <ul></ul>中只能嵌套<li></li>
- <li></li>之间可以放所有元素
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表</title>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>
效果:
3.有序列表
特点:
- 各个列表项之间有先后顺序
- <ol></ol>中只能嵌套<li></li>
- <li></li>中可以放所有元素
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<ol>
<li>列表一
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</li>
<li>列表二</li>
<li>列表三</li>
</ol>
</body>
</html>
效果:
4.自定义列表
使用场景:
用于对术语或者名称进行解释描述
特点:
- <dl></dl>中只能包含<dt></dt>和<dd></dd>标签,不限数量
- <dt></dt>和<dd></dd>中可以有其他标签
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义列表</title>
</head>
<body>
<dl>
<dt>搜索</dt>
<dd>百度</dd>
<dd>搜狗</dd>
</dl>
</body>
</html>
效果:
5.文章参考链接
a. https://www.boxuegu.com/
b. http://www.divcss5.com/html/h88.shtml