编辑“︁HTML无序列表”︁（章节）

= HTML无序列表 =

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

== 基本语法 ==

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

<syntaxhighlight lang="html">
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
</syntaxhighlight>

'''输出效果：'''
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

== 列表符号样式 ==

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

* <code>disc</code>（默认，实心圆点）
* <code>circle</code>（空心圆）
* <code>square</code>（实心方块）
* <code>none</code>（无符号）

=== 示例：修改列表符号 ===

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

'''输出效果：'''
<ul style="list-style-type: circle;">
    <li>空心圆列表项</li>
    <li>另一个列表项</li>
</ul>

== 嵌套无序列表 ==

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

<syntaxhighlight lang="html">
<ul>
    <li>主列表项1
        <ul>
            <li>子列表项1</li>
            <li>子列表项2</li>
        </ul>
    </li>
    <li>主列表项2</li>
</ul>
</syntaxhighlight>

'''输出效果：'''
<ul>
    <li>主列表项1
        <ul>
            <li>子列表项1</li>
            <li>子列表项2</li>
        </ul>
    </li>
    <li>主列表项2</li>
</ul>

== 实际应用案例 ==

=== 案例1：导航菜单 ===
无序列表常用于构建网站的导航菜单结构。

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

=== 案例2：功能列表 ===
在网页中展示产品功能或服务项目。

<syntaxhighlight lang="html">
<ul>
    <li>响应式设计</li>
    <li>跨浏览器兼容</li>
    <li>SEO优化</li>
</ul>
</syntaxhighlight>

== 高级用法 ==

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

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

'''输出效果：'''
<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>

=== 使用JavaScript动态生成列表 ===
可以通过JavaScript动态创建和修改无序列表。

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

== 无障碍性考虑 ==

为提升无障碍访问体验，建议：
* 在导航菜单中使用<code><nowiki><nav></nowiki></code>标签包裹列表
* 为列表添加适当的ARIA角色（如<code>role="navigation"</code>）
* 避免仅依赖视觉符号传达信息

== 常见问题 ==

'''Q: 如何移除列表的默认左边距？'''
A: 使用CSS重置<code>padding</code>和<code>margin</code>：
<syntaxhighlight lang="css">
ul {
    padding-left: 0;
    margin-left: 0;
}
</syntaxhighlight>

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

== 总结 ==

HTML无序列表是构建网页内容结构的重要工具，具有以下特点：
* 使用<code><nowiki><ul></nowiki></code>和<code><nowiki><li></nowiki></code>标签
* 默认显示为项目符号列表
* 支持嵌套和多级结构
* 可通过CSS完全自定义样式
* 广泛应用于导航、内容组织和功能展示

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

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML列表与表格]]