HTML 列表

什么是 HTML 列表？

HTML 列表是用于在网页中显示项目列表的元素。HTML 提供了三种类型的列表：无序列表、有序列表和定义列表。

无序列表

无序列表是通过 <ul> 标签定义的，列表项通过 <li> 标签定义。

<ul> 
    <li>项目1</li> 
    <li>项目2</li> 
    <li>项目3</li> 
</ul>

有序列表

有序列表是通过 <ol> 标签定义的，列表项通过 <li> 标签定义。

<ol> 
    <li>第一步</li> 
    <li>第二步</li> 
    <li>第三步</li> 
</ol>

定义列表

定义列表是通过 <dl> 标签定义的，包含定义术语 (<dt>) 和定义描述 (<dd>)。

<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> 
</ul>

有序列表的属性

type - 指定列表项标记的类型（1, A, a, I, i）
start - 指定列表的起始值
reversed - 指定列表是否反向排序

<!-- 大写字母标记 -->
<ol type="A"> 
    <li>项目1</li> 
    <li>项目2</li> 
</ol> 


<!-- 从 5 开始计数 -->
<ol start="5"> 
    <li>项目1</li> 
    <li>项目2</li> 
</ol> 


<!-- 反向排序 -->
<ol reversed> 
    <li>项目1</li> 
    <li>项目2</li> 
    <li>项目3</li> 
</ol>

无序列表的样式

您可以使用 CSS 的 list-style-type 属性来自定义无序列表的标记类型。

<style> /* 内部样式表，定义不同类型的无序列表样式 */
ul.disc { /* 类选择器，定义 disc 类型的无序列表 */
    list-style-type: disc; /* 设置列表标记类型为实心圆点（默认） */
}

ul.circle { /* 类选择器，定义 circle 类型的无序列表 */
    list-style-type: circle; /* 设置列表标记类型为空心圆圈 */
}

ul.square { /* 类选择器，定义 square 类型的无序列表 */
    list-style-type: square; /* 设置列表标记类型为实心方块 */
}

ul.none { /* 类选择器，定义 none 类型的无序列表 */
    list-style-type: none; /* 设置列表标记类型为无标记 */
}
</style> /* 结束内部样式表 */

<h4>默认（disc）：</h4>
<ul class="disc"> 
    <li>项目1</li> 
    <li>项目2</li> 
</ul> 

<h4>circle：</h4>
<ul class="circle"> 
    <li>项目1</li> 
    <li>项目2</li> 
</ul> 

<h4>square：</h4>
<ul class="square"> 
    <li>项目1</li> 
    <li>项目2</li> 
</ul> 

<h4>none：</h4>
<ul class="none"> 
    <li>项目1</li> 
    <li>项目2</li> 
</ul>

列表的样式

您可以使用 CSS 来自定义列表的样式，如间距、颜色、字体等。

<style> /* 内部样式表，定义自定义列表样式 */
ul.custom { /* 类选择器，定义 custom 类的无序列表 */
    list-style-type: none; /* 移除默认的列表标记 */
    padding: 0; /* 移除默认的内边距 */
    margin: 0; /* 移除默认的外边距 */
}

ul.custom li { /* 类选择器，定义 custom 类列表中的 li 元素 */
    padding: 10px; /* 设置内边距为 10 像素 */
    margin-bottom: 5px; /* 设置底部外边距为 5 像素，与下一个列表项保持距离 */
    background-color: #f2f2f2; /* 设置背景颜色为浅灰色 */
    border-radius: 4px; /* 设置边框圆角为 4 像素，使列表项看起来更圆润 */
}

ul.custom li:hover { /* 类选择器，定义鼠标悬停时的列表项样式 */
    background-color: #e0e0e0; /* 设置鼠标悬停时的背景颜色为稍深的灰色 */
}
</style> /* 结束内部样式表 */

<ul class="custom"> 
    <li>项目1</li> 
    <li>项目2</li> 
    <li>项目3</li> 
</ul>