无序列表圆点变空心_零基础网页/前端/html教程-第五课-列表

哈喽大家好，小编改名为WarmLight了，因为小编很喜欢温暖。

距离小编去年更新的四篇HTML基础教程，已经过去了很长一段时间，但小编这段时间又决定继续编写HTML的教程了，那么废话不多说，我们现在就开始吧。

如果想看作者之前的课程，可以关注作者然后点击作者的头像查看哦。

---

在这篇文章中，小编将要给大家讲解的是HTML中列表的使用。

列表是非常简单的，但他在我们整个网页前端中却发挥着很大的作用。

列表分为有序列表和无序列表。

列表

如图，我们在HTML文件中的body内写入了这些内容，保存，可以看到在右侧浏览器中的运行结果是这样的。

在图片中可以清楚的看到他们的代码结构：

1."

1. ...

"标签对中包裹着四个"..."标签对，每个li中都有相应的文字

2."

• ...

"标签对中包裹着四个"..."标签对，每个li中都有相应的文字

于是我们便可以清楚的看到它们之间的区别，仅仅是ol和ul罢了，那么ol就叫有序列表，ul就叫无序列表，ol中的每一个li都是使用阿拉伯数字来排序的，ul中的每一个li没有排序的意思，但他的每一个li前都有一个小圆点。

那么，如果我们想把ul自带的小圆点去掉，也是可以做到的。

列表的type属性

circle,disc,square

如图，我们在ul的起始标签内添加了一个type属性，空1格，输入t，光标移到type上回车然后你会看到三个值，circle,disc,square，disc会让li前显示默认的小圆点，circle是空心圆，circle是实心正方形。

ol同样也有type属性，只是值不一样。第一个是1，表示数字类型，会按默认的1,2,3,4排序；第二和第三个是A和a；然后就是大小写的罗马数字。至于他们的区别，直接上图。

这篇HTML的列表教程到这里就结束了，如果觉得本文不错，一定要点赞转发、评论加关注哦。