在我们的日常生活中，我们一直在使用清单。
我们创建它们来结构和组织我们的日子，我们用它们来制定待办事项清单。我们在菜谱中使用它们，这样我们就不会错过任何步骤。当我们想组装一件家具的时候，我们也会使用它们。
这些只是我们如何使用清单来帮助我们保持事情有序的几个例子。
因此，在前端Web开发中，它们也是一个经常使用的、有帮助的功能，这也是有道理的。
在HTML中有三种类型的列表：无序、有序和描述列表。
在这篇文章中，你将学习如何创建无序列表。你还会看到一些只用几行CSS就能改变默认样式的方法。
让我们开始吧!
HTML中的无序列表是一些不需要按照任何特定顺序排列的项目集合。我们经常使用简单的子弹头来列出这些项目。
你可以使用ul 标签创建一个无序列表。然后，你使用li 标签来列出你希望列表中包括的每一个项目。
ul 标签，代表无序列表，是li 标签的父标签。这意味着，li 标签是ul 标签的子代：
<ul>
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ul>
输出：
这被称为弹出式列表，因为默认的样式是每个列表项旁边都有一个弹出点。
需要记住和注意的一点是，li 是ul 的唯一直接子代。
这意味着在为无序列表创建开头 (<ul>) 和结尾 (</ul>) 标签后，你包含的第一个标签将是li 标签。
例如，不要这样做：
<ul>
<a href="#">I am a link to something on the web!</a>
</ul>
如果你想让你的无序列表的项目成为链接，请这样做：
<ul>
<li>
<a href="#">I link to somewhere on the web!</a>
</li>
</ul>
链接标签 (a) 是li 标签的子代，也是ul 标签的孙代（！）。
如何创建一个嵌套的无序列表
嵌套列表是指一个列表在另一个列表里面。
你可以创建一个嵌套的无序列表，或者一个嵌套的有序列表，甚至是一个嵌套在无序列表中的有序列表。
记住，ul 标签的唯一直接子代是li 。
下面是你如何创建一个嵌套的无序列表：
<ul><!-- start of main list-->
<li>HTML</li>
<li>CSS</li>
<li>JavaScript
<ul><!-- start of nested list-->
<li>Angular</li>
<li>React</li>
<li>Vue</li>
</ul><!--end of nested list-->
</li>
</ul><!--end of main list -->
输出：
你在你选择的主列表项下创建嵌套的无序列表。
在上面的例子中，我在开头和结尾li 之间创建了一个嵌套列表，其名称为 "JavaScript"。
请确保同时包括关闭标签和打开标签，因为这可能很快就会引起混淆。
避免任何混淆的一个好做法是对你的代码进行注释。而且要记住，只有在语义上有意义的情况下，你才应该使用嵌套列表。
如何改变无序列表的默认样式
正如你到目前为止所看到的，无序列表的默认样式是每个列表项旁边的子弹头。
但是你可以使用单独的.css 文件中的list-style-type 属性来改变其样式。
该属性的默认值是disc 。
如何用圆圈设计列表项的样式
你可以创建具有圆形而不是实心弹点的列表项作为其样式：
<ul>
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ul>
ul {
list-style-type: circle;
}
输出：
如何为列表项设置方块样式
你也可以创建以正方形为样式的列表项：
<ul>
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ul>
ul {
list-style-type: square;
}
输出：
如何从列表项中移除样式
你甚至可以完全删除样式：
<ul>
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ul>
ul {
list-style-type: none;
}
输出：
当你想水平地设置列表项的样式并创建一个导航栏时，这一点特别有用。这将需要一些额外的样式设计。
列表是块状元素。通过将列表项改为inline ，并使用Flexbox规则，你可以让项目相互堆叠在一起。
同样的HTML：
<ul>
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ul>
而通过添加一些新的CSS规则：
ul {
list-style-type: square;
display:flex;
}
li{
display:block;
margin:10px;
}
你可以对列表项进行水平样式化：
如何用表情符号设计列表项的样式
对于无序列表中的项目，你并没有那么多的样式选择。
为了使列表更加有趣和好玩，你可以使用CSS的::before 伪元素，添加表情符号。
下面是HTML的内容：
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
第一步是将list-style-type:none; 规则添加到父标签ul ，并从该标签中删除默认的padding 和margin 。
你使用::before 伪元素将表情符号添加到li 标签中。你可以从本文中的表情符号的完整列表中挑选：
ul {
list-style-type: none;
padding:0;
margin:0;
}
li::before{
content: "💻";
}
输出：
要给每个列表项一个不同的表情符号，在列表项上使用::before 伪元素前的 :nth-child() 选择器。
ul {
list-style-type: none;
padding:0;
margin:0;
}
/*first list item*/
li:nth-child(1)::before{
content: "✍️";
}
/*second list item*/
li:nth-child(2)::before{
content: "🎨";
}
/*third list item*/
li:nth-child(3)::before{
content: "🔥";
}
输出：
结论
这就是你的成果!你现在知道了如何在HTML中创建无序列表，并看到了一些风格化它们的方法。
