列表

HTML 列表是组织内容的重要工具，主要有三种类型：有序列表、无序列表和定义列表。

无序列表 <ul> - Unordered List

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

效果请自行运行在浏览器中查看

有序列表 <ol> - Ordered List

<ol>
    <li>准备食材</li>
    <li>清洗处理</li>
    <li>烹饪制作</li>
    <li>装盘上桌</li>
</ol>

效果请自行运行在浏览器中查看

有序列表的属性

<!-- 从数字5开始 -->
<ol start="5">
    <li>第五步</li>
    <li>第六步</li>
</ol>

<!-- 倒序排列 -->
<ol reversed>
    <li>第三步</li>
    <li>第二步</li>
    <li>第一步</li>
</ol>

<!-- 指定列表类型 -->
<ol type="A">
    <li>项目 A</li>
    <li>项目 B</li>
</ol>

<ol type="I">
    <li>项目 I</li>
    <li>项目 II</li>
</ol>

列表类型选项

• type="1" - 数字（默认）
• type="A" - 大写字母
• type="a" - 小写字母
• type="I" - 大写罗马数字
• type="i" - 小写罗马数字

定义列表 <dl> - Definition List

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页结构</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于控制网页外观</dd>
    
    <dt>JavaScript</dt>
    <dd>编程语言，用于实现网页交互功能</dd>
</dl>

效果请自行运行在浏览器中查看

列表嵌套

<ul>
    <li>水果
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>橙子</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>胡萝卜</li>
            <li>西红柿</li>
            <li>黄瓜</li>
        </ul>
    </li>
    <li>步骤指南
        <ol>
            <li>准备材料</li>
            <li>按顺序操作</li>
            <li>完成检查</li>
        </ol>
    </li>
</ul>