HTML - 无序列表

你好，未来的网页开发者们！今天，我们将一起探索HTML无序列表的奇妙世界。作为你友好的计算机老师邻居，我很兴奋能引导你们走这一段旅程。相信我，通过这个教程，你将能像专业人士一样创建列表！

HTML - Unordered Lists

什么是无序列表？

在我们跳入代码之前，让我们先了解一下无序列表是什么。在HTML中，无序列表是一组没有特定顺序的相关项目集合。想想购物清单 - 你不一定需要先买面包再买牛奶，或者先买苹果再买香蕉。顺序并不重要，但它们都是同一个列表的一部分。

在HTML中，我们使用<ul>标签创建无序列表，列表中的每个项目都包含在<li>标签中。让我们看一个简单的例子：

<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>

这段代码将渲染为：

苹果
香蕉
橙子

看到有多简单了吗？浏览器会自动为每个项目添加项目符号。但是，如果你想更改那些项目符号呢？这就是我们下一节内容派上用场的地方！

无序列表 - 选择列表项标记

现在，让我们来点调味。HTML允许我们更改项目符号的样式，或者在我们行业里称之为“列表项标记”。我们有三个主要选项：

disc（默认）
circle
square

要更改标记，我们在<ul>标签中使用type属性。让我们看看这是怎么工作的：

<ul type="disc">
<li>这个列表使用默认的disc标记</li>
</ul>

<ul type="circle">
<li>这个列表使用圆形标记</li>
</ul>

<ul type="square">
<li>这个列表使用方形标记</li>
</ul>

这段代码将渲染为：

• 这个列表使用默认的disc标记

○ 这个列表使用圆形标记

■ 这个列表使用方形标记

酷吧？就像给你的列表做了一个小型的改造！

无序列表的例子

现在我们已经掌握了基础知识，让我们来看一些更复杂的例子。记住，熟能生巧，所以请随意复制这些例子并亲自尝试！

嵌套无序列表

有时，你可能想在列表中创建一个列表。我们称之为嵌套列表。下面是如何操作的：

<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
<li>草本茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>

这将渲染为：

咖啡
茶
红茶
绿茶
草本茶
牛奶

注意到嵌套列表是如何缩进的吗？这是HTML展示这些项目是“茶”的子分类的方式。

带有链接的无序列表

列表不仅仅用于简单的文本。你可以将其他HTML元素包含在列表项中。例如，让我们创建一个喜欢的网站的列表：

<ul>
<li><a href="https://www.google.com">谷歌</a></li>
<li><a href="https://www.wikipedia.org">维基百科</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>

这将创建一个可点击的网站列表：

带有图片的无序列表

让我们更进一步，给我们的列表添加一些图片：

<ul>
<li><img src="apple.jpg" alt="苹果"> 苹果</li>
<li><img src="banana.jpg" alt="香蕉"> 香蕉</li>
<li><img src="orange.jpg" alt="橙子"> 橙子</li>
</ul>

这段代码将显示一个带有每个水果名称旁边小图片的列表。这是让列表更具视觉吸引力的好方法！

无序列表方法的总结

这里有一个方便的表格，总结了我们学过的创建和定制无序列表的方法：

方法	语法	描述
基本无序列表	`<ul><li>项目</li></ul>`	创建基本无序列表
更改列表标记	`<ul type="circle">`	更改列表项标记样式
嵌套列表	`<ul><li><ul><li>嵌套项目</li></ul></li></ul>`	创建列表中的列表
带有链接的列表	`<ul><li><a href="url">链接</a></li></ul>`	创建可点击链接的列表
带有图片的列表	`<ul><li><img src="image.jpg"> 项目</li></ul>`	在列表项中添加图片

就这样，大家！你现在装备齐全，可以在HTML中创建和定制无序列表了。记住，掌握这些技能的关键是练习。所以，继续尝试这些例子，不要害怕发挥创意！

在我们结束之前，我想起了一个小编程笑话：程序员为什么辞职？因为他没有得到数组！? 别担心，我们会在另一天讨论数组。现在，继续列表和编程吧！

Credits: Image by storyset