HTML中的无序列表怎么创建？ ul标签使用教学
在网页开发中，列表是组织内容的重要元素之一。当我们需要展示一系列没有特定先后顺序的项目时，就需要使用无序列表。HTML提供了<ul>标签来创建无序列表，配合<li>标签定义列表项，使得网页内容的结构更加清晰易读。本文将详细讲解无序列表的创建方法及常见应用。
一、无序列表的基本结构
无序列表由两个核心标签组成：
<ul> 标签：Unordered List 的缩写，作为无序列表的容器，表示这是一个没有顺序要求的列表。
<li> 标签：List Item 的缩写，代表列表中的每一个具体项目，必须放置在
<ul>标签内部。
二、创建第一个无序列表
下面是一个最简单的无序列表代码示例，我们用它来列出几种常见的水果：
<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> <li>葡萄</li> </ul>
在浏览器中运行这段代码，你会看到列表的每一项前面都会默认带有一个实心圆点（Disc），这就是无序列表的默认项目符号。
三、无序列表的嵌套使用
在实际开发中，我们经常需要实现多级分类的效果，这就需要用到列表的嵌套。无序列表支持多层嵌套，只需要在某个 <li> 标签内部再包含一个新的 <ul> 标签即可。
<ul> <li>前端开发 <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>后端开发 <ul> <li>Java</li> <li>Python</li> </ul> </li> </ul>
需要注意的是，内层的 <ul> 必须放在外层的 <li> 标签内部，而不能直接放在 <ul> 标签下，这样才能保证HTML文档的语义和结构正确。
四、列表样式的定制
早期HTML支持使用 type 属性（如：type="circle" 空心圆，type="square" 实心方块）来改变项目符号，但在HTML5标准中，这种做法已被废弃。现在，我们统一推荐使用CSS的 list-style-type 属性来修改符号样式。
例如，将项目符号修改为空心圆：
<ul style="list-style-type: circle;"> <li>第一项</li> <li>第二项</li> </ul>
在网页布局中，很多时候我们不需要默认的项目符号，通常使用CSS将其去除，并清除默认的左侧缩进：
ul {
list-style-type: none; /* 移除默认项目符号 */
padding-left: 0; /* 移除左侧默认内边距 */
margin: 0; /* 移除默认外边距 */
}五、无序列表的实际应用场景
无序列表不仅仅用来排列文本，它更是构建网页结构的利器。最经典的用途之一就是制作网页的导航菜单。配合CSS，我们可以将垂直排列的列表项转换为水平排列的导航栏。
以下是一个使用无序列表构建导航栏的HTML结构示例：
<ul> <li><a href="https://www.ipipp.com">首页</a></li> <li><a href="https://www.ipipp.com/about">关于我们</a></li> <li><a href="https://www.ipipp.com/products">产品中心</a></li> <li><a href="https://www.ipipp.com/contact">联系方式</a></li> </ul>
通过CSS设置 display: inline-block; 或 flex 布局，再去除下划线等默认样式，就可以快速得到一个美观的水平导航条。
六、总结
HTML中的无序列表是网页排版的基础且核心元素。掌握 <ul> 和 <li> 标签的正确嵌套关系，以及如何通过CSS替换旧的HTML属性来自定义列表样式，是每个前端开发者的必修课。灵活运用无序列表，不仅能让代码更具语义化，也能让网页结构更加清晰、可维护。