HTML无序列表[编辑 | 编辑源代码]

HTML无序列表（Unordered List）是HTML中用于展示项目列表的一种结构，列表项默认以符号（如圆点、方块等）标记，而不是数字或字母。无序列表适用于不需要特定顺序的项目集合，常用于导航菜单、功能列表、项目符号说明等场景。

基本语法[编辑 | 编辑源代码]

无序列表使用<ul>标签定义，列表项使用<li>标签包裹。基本结构如下：

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

输出效果：

第一项
第二项
第三项

列表符号样式[编辑 | 编辑源代码]

默认情况下，无序列表的符号是圆点（•），但可以通过CSS属性list-style-type修改样式。常见的样式包括：

disc（默认，实心圆点）
circle（空心圆）
square（实心方块）
none（无符号）

示例：修改列表符号[编辑 | 编辑源代码]

<ul style="list-style-type: circle;">
    <li>空心圆列表项</li>
    <li>另一个列表项</li>
</ul>

输出效果：

空心圆列表项
另一个列表项

嵌套无序列表[编辑 | 编辑源代码]

无序列表可以嵌套使用，形成层级结构。每个嵌套层级可以有不同的符号样式。

<ul>
    <li>主列表项1
        <ul>
            <li>子列表项1</li>
            <li>子列表项2</li>
        </ul>
    </li>
    <li>主列表项2</li>
</ul>

输出效果：

主列表项1
- 子列表项1
- 子列表项2
主列表项2

实际应用案例[编辑 | 编辑源代码]

案例1：导航菜单[编辑 | 编辑源代码]

无序列表常用于构建网站的导航菜单结构。

<nav>
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/contact">联系我们</a></li>
    </ul>
</nav>

案例2：功能列表[编辑 | 编辑源代码]

在网页中展示产品功能或服务项目。

<ul>
    <li>响应式设计</li>
    <li>跨浏览器兼容</li>
    <li>SEO优化</li>
</ul>

高级用法[编辑 | 编辑源代码]

结合CSS自定义样式[编辑 | 编辑源代码]

通过CSS可以完全自定义无序列表的外观，例如替换符号为图标或调整间距。

<style>
    .custom-list {
        list-style-type: none;
        padding-left: 0;
    }
    .custom-list li::before {
        content: "→ ";
        color: #2c3e50;
    }
</style>

<ul class="custom-list">
    <li>自定义箭头符号</li>
    <li>另一个项目</li>
</ul>

输出效果： <style>

   .custom-list {
       list-style-type: none;
       padding-left: 0;
   }
   .custom-list li::before {
       content: "→ ";
       color: #2c3e50;
   }

</style>

自定义箭头符号
另一个项目

使用JavaScript动态生成列表[编辑 | 编辑源代码]

可以通过JavaScript动态创建和修改无序列表。

// 创建一个无序列表并添加到文档中
const ul = document.createElement('ul');
['苹果', '香蕉', '橙子'].forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    ul.appendChild(li);
});
document.body.appendChild(ul);

无障碍性考虑[编辑 | 编辑源代码]

为提升无障碍访问体验，建议：

在导航菜单中使用<nav>标签包裹列表
为列表添加适当的ARIA角色（如role="navigation"）
避免仅依赖视觉符号传达信息

常见问题[编辑 | 编辑源代码]

Q: 如何移除列表的默认左边距？ A: 使用CSS重置padding和margin：

ul {
    padding-left: 0;
    margin-left: 0;
}

Q: 能否在列表项中放置其他HTML元素？ A: 可以，<li>中可以包含段落、图片、甚至其他列表等任意HTML内容。

总结[编辑 | 编辑源代码]

HTML无序列表是构建网页内容结构的重要工具，具有以下特点：

使用<ul>和<li>标签
默认显示为项目符号列表
支持嵌套和多级结构
可通过CSS完全自定义样式
广泛应用于导航、内容组织和功能展示

通过掌握无序列表的使用方法，可以有效地组织和展示网页内容。