Loading... ## 1、列表是什么 在HTML中，列表有三种，分别是：无序列表、有序列表、自定义列表 有些同学可能会听过**“目录列表dir”“菜单列表menu”**事实上，这两种列表在HTML5的标准中已经废除了现在无序列表都是用ul来代替。 - 无序列表：ul - 有序列表：ol ## 2、有序列表 在HTML中，有序列表一般采用**数字**、**字母**、**阿拉伯数字**作为符号。默认情况下**列表符号是数字**，那么我们需要修改**列表符号**则需要定义**type属性值**,这里等我们学到CSS之后，就可以不用**type属性值**了，而是用 **list-style-type 属性**，后面会学到这里不做过多解释。 - 有序列表的基本结构，**ol**里面写**li** ![][1] - 那么**types属性值**，只需要在type里面添加对应的值即可修改**列表符号** ![][2] - 有序列表的**type属性值** | 属性值 | 列表符号 | | :----: | :--------------------------: | | 1 | 阿拉伯数字：1、2、3.... | | a | 小写英文字母：a、b、c...... | | A | 大写英文字母：A、B、C...... | | I | 大写罗马数字：I、II、III、IV | | i | 小写罗马数字：i、ii、iii、iv | - 列举 ```html <!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] ## 3、无序列表 在HTML中，有无序列表一般采用**实心圆**、**空心圆**、**正方形**作为符号。默认情况下**实心圆**，那么我们需要修改**列表符号**则需要定义**type属性值**,这里等我们学到CSS之后，就可以不用**type属性值**了，而是用 **list-style-type 属性**，后面会学到这里不做过多解释。 - 无序列表的基本结构，**ul**里面写**li** ![][4] - **types属性值**，只需要在type里面添加对应的值即可修改**列表符号** ![][5] - 无序列表的**type属性值** | 属性值 | 列表符号 | | :----: | :------: | | disc | 实心圆 | | circle | 空心圆 | | Square | 正方形 | - 举例 ```html <!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> ``` ![][6] - 无序列表的用处多者去了，它可以用来制作：导航、工具栏、动态拦等地方 - 例如B站首页导航栏 ![][7] - 例如京东首页 ![][8] - 例如自建的个人博客网站 ![][9] - 这些导航都是使用到了我们的无序列表，当然啦，这是需要配合CSS才能做出这样的效果，所以为后面的CSS学习，我们要打好**html**基础。 ## 4、自定义列表 在实际开发中，自定义列表使用的场景是比较少的，在某些高级的效果，或者**标签不够用的情况下会用到**，但不代表这个定义列表不重要，**重要它很重要**，等我们玩明白CSS就知道自定义列表的好处了。 - 自定义列表的结构 ![][10] - 例子 ```html <!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> ``` ![][11] ## 5、编码规范 在很多时候同学们写的代码乱糟糟的，没有结构性，还有写同学觉得我这个标签也能实现同样的工作，没必要学习新的标签，这是在学习HTML，Web前端的一个很严重的错误，下面讲解几种编码规范。 - 分块分区域，层次结构分明 右图的层次不分明，虽然显示效果一样，但左边的可以很容易的就知道左右的代码分别在哪一块。 ![][12] - 要实现左边的这种效果出了，我们编码上需要主要，我们还需要在VS Code上面做一些小操作 - 第一个格式化文本，鼠标右键对着代码窗口，点击格式化文本即可，快捷键在后面 ![][13] - 点击查看——自动换行弄个出来，这样你就有了一个比较美观的代码了 ![][14] - 巧用 TAB快捷键 - 使用相对应的标签，这两种标签虽然是可以这么去实现大致一样的效果，但我们不推荐这么去写。 ![][15] - 命名规范，可以采用驼峰方式命名（开头第一个单词小写 后面的所有单词开头第一个字母大写）（或者使用下划线命名法） 者见名知意（见到名字知道意思） 这里看不懂没关系，主要是理解命名的规范。 ![][16] ![][17] # [1]: https://a-hxin.cn/usr/uploads/2022/12/3530615729.png [2]: https://a-hxin.cn/usr/uploads/2022/12/3196768973.png [3]: https://a-hxin.cn/usr/uploads/2022/12/2297373633.png [4]: https://a-hxin.cn/usr/uploads/2022/12/3426970822.png [5]: https://a-hxin.cn/usr/uploads/2022/12/1672738241.png [6]: https://a-hxin.cn/usr/uploads/2022/12/4282927554.png [7]: https://a-hxin.cn/usr/uploads/2022/12/1205171672.png [8]: https://a-hxin.cn/usr/uploads/2022/12/2538830353.png [9]: https://a-hxin.cn/usr/uploads/2022/12/1953885889.png [10]: https://a-hxin.cn/usr/uploads/2022/12/1128190087.png [11]: https://a-hxin.cn/usr/uploads/2022/12/4019504109.png [12]: https://a-hxin.cn/usr/uploads/2022/12/3193907923.png [13]: https://a-hxin.cn/usr/uploads/2022/12/1652413767.png [14]: https://a-hxin.cn/usr/uploads/2022/12/3186251775.png [15]: https://a-hxin.cn/usr/uploads/2022/12/3778236275.png [16]: https://a-hxin.cn/usr/uploads/2022/12/826620812.png [17]: https://a-hxin.cn/usr/uploads/2022/12/209399916.png 最后修改：2024 年 01 月 24 日 © 允许规范转载 打赏 赞赏作者 赞 咱们谁跟谁，用不着～