1、列表是什么
在HTML中，列表有三种，分别是：无序列表、有序列表、自定义列表
有些同学可能会听过“目录列表dir”“菜单列表menu”事实上，这两种列表在HTML5的标准中已经废除了现在无序列表都是用ul来代替。
- 无序列表：ul
- 有序列表：ol
2、有序列表
在HTML中，有序列表一般采用数字、字母、阿拉伯数字作为符号。默认情况下列表符号是数字，那么我们需要修改列表符号则需要定义type属性值,这里等我们学到CSS之后，就可以不用type属性值了，而是用 list-style-type 属性，后面会学到这里不做过多解释。
- 有序列表的基本结构，ol里面写li
- 那么types属性值，只需要在type里面添加对应的值即可修改列表符号
- 有序列表的type属性值
| 属性值 | 列表符号 |
| :----: | :--------------------------: |
| 1 | 阿拉伯数字：1、2、3.... |
| a | 小写英文字母：a、b、c...... |
| A | 大写英文字母：A、B、C...... |
| I | 大写罗马数字：I、II、III、IV |
| i | 小写罗马数字：i、ii、iii、iv |
- 列举
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h3>默认值 阿拉伯数字</h3>
<ol>
<li>条目1</li>
<li>条目1</li>
<li>条目1</li>
<li>条目1</li>
</ol>
<h3>以大写字母A开头排序</h3>
<ol type="A">
<li>条目1</li>
<li>条目1</li>
<li>条目1</li>
<li>条目1</li>
</ol>
<h3>以大写字母a开头排序</h3>
<ol type="a">
<li>条目1</li>
<li>条目1</li>
<li>条目1</li>
<li>条目1</li>
</ol>
<h3>以大写罗马数字 I 开头排序</h3>
<ol type="I">
<li>条目1</li>
<li>条目1</li>
<li>条目1</li>
<li>条目1</li>
</ol>
<h3>以小写罗马数字 i 开头排序</h3>
<ol type="i">
<li>条目1</li>
<li>条目1</li>
<li>条目1</li>
<li>条目1</li>
</ol>
</body>
</html>
3、无序列表
在HTML中，有无序列表一般采用实心圆、空心圆、正方形作为符号。默认情况下实心圆，那么我们需要修改列表符号则需要定义type属性值,这里等我们学到CSS之后，就可以不用type属性值了，而是用 list-style-type 属性，后面会学到这里不做过多解释。
无序列表的基本结构，ul里面写li
types属性值，只需要在type里面添加对应的值即可修改列表符号
- 无序列表的type属性值
| 属性值 | 列表符号 |
| :----: | :------: |
| disc | 实心圆 |
| circle | 空心圆 |
| Square | 正方形 |
- 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 实心圆 -->
<ul type="disc">
<li>条目</li>
<li>条目</li>
<li>条目</li>
<li>条目</li>
</ul>
<!-- 空心圆 -->
<ul type="circle">
<li>条目</li>
<li>条目</li>
<li>条目</li>
<li>条目</li>
</ul>
<!-- 正方形 -->
<ul type="square">
<li>条目</li>
<li>条目</li>
<li>条目</li>
<li>条目</li>
</ul>
</body>
</html>
无序列表的用处多者去了，它可以用来制作：导航、工具栏、动态拦等地方
- 例如B站首页导航栏
- 例如京东首页
- 例如自建的个人博客网站
- 这些导航都是使用到了我们的无序列表，当然啦，这是需要配合CSS才能做出这样的效果，所以为后面的CSS学习，我们要打好html基础。
4、自定义列表
在实际开发中，自定义列表使用的场景是比较少的，在某些高级的效果，或者标签不够用的情况下会用到，但不代表这个定义列表不重要，重要它很重要，等我们玩明白CSS就知道自定义列表的好处了。
自定义列表的结构
例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!-- 接收HTML CSS JS 三者之间的关系 --> <dl> <dt>HTML</dt> <dd>HTML是网页的框架，可以比喻成鸟的身体</dd> <dt>CSS</dt> <dd>CSS是网页的样式，可以比喻成鸟的羽毛</dd> <dt>JavaScript</dt> <dd>JavScript是控制网页的行为，可以比喻成鸟的飞行动作</dd> </dl> </body> </html>
5、编码规范
在很多时候同学们写的代码乱糟糟的，没有结构性，还有写同学觉得我这个标签也能实现同样的工作，没必要学习新的标签，这是在学习HTML，Web前端的一个很严重的错误，下面讲解几种编码规范。
- 分块分区域，层次结构分明 右图的层次不分明，虽然显示效果一样，但左边的可以很容易的就知道左右的代码分别在哪一块。
- 要实现左边的这种效果出了，我们编码上需要主要，我们还需要在VS Code上面做一些小操作
第一个格式化文本，鼠标右键对着代码窗口，点击格式化文本即可，快捷键在后面
- 点击查看——自动换行弄个出来，这样你就有了一个比较美观的代码了
- 巧用 TAB快捷键
使用相对应的标签，这两种标签虽然是可以这么去实现大致一样的效果，但我们不推荐这么去写。
- 命名规范，可以采用驼峰方式命名（开头第一个单词小写 后面的所有单词开头第一个字母大写）（或者使用下划线命名法） 者见名知意（见到名字知道意思） 这里看不懂没关系，主要是理解命名的规范。