参考资料

1. HTML 文本格式化
2. HTML 图像
3. HTML 来显示目录链接页面使用 iframe
4. html内嵌框架标签详细说明以及案例
5. HTML 中的空格详解
6. HTML 多媒体
7. HTML 用于双向重写
8. cache-control 浏览器缓存行为

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。