参考资料

1. html列表标签详细说明以及案例
2. HTML id 属性在 JavaScript 中的使用
3. HTML 链接语法
4. HTML 用于双向重写
5. HTML 标题
6. HTML 颜色
7. html链接标签详细说明以及案例
8. HTML 内部样式表

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;
}