HTML ul 和 li 标签教程

无序列表(ul)和列表项(li)是HTML中最常用的标签组合之一,用于创建项目符号列表。本教程将展示它们的各种用法。

1. 基本用法

简单无序列表

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

2. 嵌套列表

多级嵌套列表

<ul>
    <li>水果
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>橙子</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>胡萝卜</li>
            <li>西兰花</li>
            <li>土豆</li>
        </ul>
    </li>
</ul>

3. 带样式的列表

使用CSS自定义样式

<ul style="list-style-type: square;">
    <li style="color: red;">红色项目</li>
    <li style="color: blue;">蓝色项目</li>
    <li style="color: green;">绿色项目</li>
</ul>

4. 列表中的其他元素

列表项包含多种元素

<ul>
    <li><strong>粗体文本</strong></li>
    <li><a href="#">链接项目</a></li>
    <li><img src="placeholder.png" alt="示例图片"> 带图片的项目</li>
    <li><input type="checkbox"> 带复选框的项目</li>
</ul>

5. 水平列表

使用CSS创建水平导航

<ul style="list-style-type: none; padding: 0; display: flex; gap: 15px;">
    <li><a href="#" style="text-decoration: none;">首页</a></li>
    <li><a href="#" style="text-decoration: none;">产品</a></li>
    <li><a href="#" style="text-decoration: none;">服务</a></li>
    <li><a href="#" style="text-decoration: none;">关于我们</a></li>
</ul>

6. 自定义项目符号

使用图片作为项目符号

<ul style="list-style-image: url('bullet.png');">
    <li>自定义项目符号1</li>
    <li>自定义项目符号2</li>
    <li>自定义项目符号3</li>
</ul>

学习提示

7. 综合示例

完整的导航菜单示例

通过以上示例,你可以看到ulli标签的强大功能和灵活性。它们是构建网站导航、内容列表和各种菜单的基础。