我们在日常生活中经常会使用列表。
我们创建它们来构建和组织我们的生活事项，用它们来制作待办事项清单。我们在食谱中使用它们，以便不错过任何步骤。当我们想组装一件家具时，也会使用它们。
这些只是我们如何使用列表来保持组织有序的几个例子。
因此，它们在前端 Web 开发中是常用的、有用的功能。
HTML 中有三种类型的列表：无序列表、有序列表和描述列表。
在本文中，你将学习如何创建无序列表。你还将看到一些方法，只需使用几行 CSS 即可更改默认样式。
让我们开始吧！
如何在 HTML 中创建无序列表
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 标签的唯一直接子级是 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;
}
你可以水平设置列表项的样式：
如何使用 emoji 设置列表项的样式
对于无序列表中的样式项，你没有那么多样式选择。
为了使列表更有趣，你可以使用 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 中创建无序列表，并且已经了解了一些设置样式的方法。
要继续你的 HTML 学习之旅，请在 freeCodeCamp 的 YouTube 频道上观看以下视频
freeCodeCamp 还提供免费的、基于项目的响应式网页设计认证。
它是初学者的理想选择，并且假设学员没有任何先前知识。你将从绝对必要的基础开始，并随着你的进步提升你的技能。最后，你将完成五个项目。
感谢阅读本文，祝你学习愉快:)
原文：HTML Bullet Points – How to Create an Unordered List with the <ul> Tag Example，作者：Dionysia Lemonaki