参考资料

1. Html转PHP代码有哪些
2. CSS 实现购物按钮
3. HTML 图像
4. Html过滤工具有哪些
5. HTML 有用的提示
6. HTML 段落
7. html列表标签详细说明以及案例
8. HTML 文字方向格式化

HTML 列表

详细介绍

HTML 列表用于在网页上展示有序或无序的项目集合。主要有三种类型：无序列表、有序列表和定义列表。

标签

无序列表

• <ul> - 定义无序列表

• <li> - 定义列表项

有序列表

• <ol> - 定义有序列表

• <li> - 定义列表项

定义列表

• <dl> - 定义定义列表

• <dt> - 定义术语/名称

• <dd> - 定义描述

用法

无序列表

用于没有特定顺序的项目集合

有序列表

用于有顺序或编号的项目集合

定义列表

用于术语及其定义的展示

实例

无序列表示例

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

有序列表示例

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

定义列表示例

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

功能

• 组织内容

• 提高可读性

• 创建导航菜单

• 展示步骤或流程

• 定义术语和解释

CSS 扩展

修改列表样式

/* 无序列表样式 */
ul {
  list-style-type: square; /* 可选: disc, circle, square, none */
}

/* 有序列表样式 */
ol {
  list-style-type: upper-roman; /* 可选: decimal, lower-alpha, upper-alpha等 */
}

自定义列表标记

ul.custom {
  list-style-image: url('marker.png');
}

水平列表

ul.horizontal {
  display: flex;
  list-style-type: none;
  padding: 0;
}

ul.horizontal li {
  margin-right: 20px;
}

嵌套列表样式

ul ul {
  list-style-type: circle;
  margin-left: 20px;
}