一.列表
在内容排列比较规范的地方使用列表（List），列表是网页中最常用的一种数据排列方式，我们在浏览网页时，经常可以看到列表的身影。
在HTML中，列表又可以细分为：无序列表，有序列表和自定义列表。
二，无序列表
语法：
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
ul，即unordered list (无序列表)。li，即list（列表项）。
无序列表，很好理解，列表里面的每一项都是没有顺序的。默认情况下，无序列表项符号是●，可以通过type属性来改变样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
<li>柚子</li>
</ul>
<!-- type属性修改列表项符号样式，这里改为空心圆 -->
<ul type="circle">
<li>倚天屠龙记</li>
<li>笑傲江湖</li>
<li>鹿鼎记</li>
<li>射雕英雄传</li>
</ul>
</body>
</html>
效果图：
在实际的前端开发中，无序列表比有序列表更有用。更准确的说，一般使用的都是无序列表，几乎用不到有序列表。如新浪网的导航，工具栏，淘宝网的分类，都是用无序列表实现的。
三，有序列表
语法：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
ol，即ordered list（有序列表）。li，即list（列表项）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ol>
<!-- type属性改变列表项符号 -->
<ol type="A">
<li>李小龙</li>
<li>成龙</li>
<li>李连杰</li>
<li>甄子丹</li>
<li>赵文卓</li>
</ol>
</body>
</html>
效果图：
四，自定义列表
语法：
<dl>
<dt>名词</dt>
<dd>列表项</dd>
<dd>列表项</dd>
<dd>列表项</dd>
</ol>
dl 即 definition list（自定义列表），dt即definition term（自定义名词），而dd即definition description（自定义描述）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>网页的骨架</dd>
<dt>CSS</dt>
<dd>美化网页</dd>
<dt>JavaScript</dt>
<dd>网页的动态效果</dd>
</dl>
</body>
</html>
效果图：
