列表
HTML 提供三种主要的列表类型，用于组织和展示相关内容：
- 无序列表（
<ul>）：使用项目符号（如 ●、○、■ 等）来标记无序的项目 - 有序列表（
<ol>）：使用编号来标记项目的顺序 - 定义列表（
<dl>）：用于展示术语及其定义的关系
列表不仅能够清晰地组织信息，还能通过语义化标记帮助搜索引擎和辅助技术理解内容结构
| 标签 | 语义 / 用途 | 关键属性与说明 |
|---|---|---|
<ul> | 无序项目列表 | type（属性已废弃）、全局属性；项目符号样式建议用 CSS list-style-* / ::marker 控制 |
<ol> | 有序项目、步骤、排名等 | start、reversed、type（仍可用，用于编号样式）、全局属性；更复杂编号建议用 CSS counter |
<li> | 列表项 | value（仅在 <ol> 中用于指定某一项编号）、全局属性 |
<dl> | 术语及其定义的组合 | 由 <dt>/<dd> 组成的“名称-说明”组；可用 <div> 在 <dl> 内分组便于布局；全局属性 |
<dt> | 术语/名称 | 可连续出现多个 <dt>，共同对应后续的一个或多个 <dd>；全局属性 |
<dd> | 术语的说明或补充信息 | 可为同一组 <dt> 提供多个 <dd>；全局属性 |
无序列表
无序列表主要使用 <ul> 和 <li> 标签来定义，其中 <ul> 标签用来标识列表是一个无序列表，<li> 标签用来设置无序列表中的项目。无序列表默认的项目符号是实心圆（●）
在 HTML5 中，<ul> 和 <li> 的 type 属性已被废弃，应使用 CSS 的 list-style-type 属性来控制项目符号样式
css
/* 实心圆（默认） */
ul.disc {
list-style-type: disc;
}
/* 空心圆圈 */
ul.circle {
list-style-type: circle;
}
/* 实心方块 */
ul.square {
list-style-type: square;
}
/* 无符号 */
ul.none {
list-style-type: none;
}
/* 自定义符号：现代浏览器可直接使用字符串 */
ul.custom {
list-style-type: "✓ ";
}
/* 自定义符号：更推荐的写法（可进一步控制颜色/大小等） */
ul.custom-marker li::marker {
content: "✓ ";
color: #16a34a;
font-weight: 700;
}
/* 如果需要完全自定义“对齐/缩进”，可以移除默认标记后用伪元素模拟 */
ul.custom-before {
list-style: none;
padding-left: 0;
}
ul.custom-before li {
display: flex;
gap: 8px;
}
ul.custom-before li::before {
content: "✓";
color: #16a34a;
font-weight: 700;
}为无序列表的每项设置不同项目符号，在对应 <li> 标签中通过 CSS 单独指定：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>无序列表示例</title>
<style>
/* 默认样式：disc */
ul.default {
list-style-type: disc;
}
/* Circle type */
ul.circle {
list-style-type: circle;
}
/* Square type */
ul.square {
list-style-type: square;
}
/* 为单个列表项设置不同样式 */
ul.mixed li:nth-child(1) {
list-style-type: circle;
}
ul.mixed li:nth-child(2) {
list-style-type: disc;
}
ul.mixed li:nth-child(3) {
list-style-type: square;
}
</style>
</head>
<body>
<!-- 默认样式：disc -->
<ul class="default">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Circle type -->
<ul class="circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Square type -->
<ul class="square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- 混合样式 -->
<ul class="mixed">
<li>图书开发部</li>
<li>软件开发部</li>
<li>质量部</li>
</ul>
</body>
</html>有序列表
有序列表默认使用阿拉伯数字编号。编号样式通常推荐用 CSS 的 list-style-type 控制
css
/* 阿拉伯数字（默认） */
ol.decimal {
list-style-type: decimal;
}
/* 小写拉丁字母 */
ol.lower-alpha {
list-style-type: lower-alpha;
}
/* 大写拉丁字母 */
ol.upper-alpha {
list-style-type: upper-alpha;
}
/* 小写罗马数字 */
ol.lower-roman {
list-style-type: lower-roman;
}
/* 大写罗马数字 */
ol.upper-roman {
list-style-type: upper-roman;
}start 属性
使用有序列表时，默认情况下，有序列表中的列表项是从数字 1 开始的。通过设置 start 属性，可以调整起始数值：
html
<ol start="5">
<li>第一项（显示为 5）</li>
<li>第二项（显示为 6）</li>
<li>第三项（显示为 7）</li>
</ol>reversed 属性
reversed 是 HTML5 新增的属性，用于倒序显示有序列表的编号：
html
<ol reversed>
<li>第一项（显示为 3）</li>
<li>第二项（显示为 2）</li>
<li>第三项（显示为 1）</li>
</ol>可以结合 start 属性使用：
html
<ol reversed start="10">
<li>第一项（显示为 10）</li>
<li>第二项（显示为 9）</li>
<li>第三项（显示为 8）</li>
</ol>value 属性
<li> 元素的 value 属性可以设置该列表项的编号值，后续列表项会从这个值继续递增：
html
<ol>
<li>第一项（显示为 1）</li>
<li value="5">第二项（显示为 5）</li>
<li>第三项（显示为 6）</li>
<li>第四项（显示为 7）</li>
</ol>动态修改示例
可以使用 JavaScript 动态修改 start 属性值，以改变列表的起始数值：
html
<!DOCTYPE html>
<html>
<head>
<title>动态修改有序列表 start 属性</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
button,
select {
padding: 8px 15px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background-color: #45a049;
}
.controls {
margin: 20px 0;
padding: 15px;
background-color: #f5f5f5;
border-radius: 5px;
}
select {
background-color: #111827;
}
</style>
</head>
<body>
<h1>动态修改有序列表 start 属性示例</h1>
<div class="controls">
<button data-start="1">从 1 开始</button>
<button data-start="5">从 5 开始</button>
<button data-start="10">从 10 开始</button>
<button id="toggleReversed">切换 reversed</button>
<select id="typeSelect" aria-label="选择编号样式">
<option value="">默认（1）</option>
<option value="a">a</option>
<option value="A">A</option>
<option value="i">i</option>
<option value="I">I</option>
</select>
</div>
<ol id="list">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ol>
<script>
const list = document.getElementById("list")
const typeSelect = document.getElementById("typeSelect")
const toggleReversed = document.getElementById("toggleReversed")
document.querySelectorAll("button[data-start]").forEach((btn) => {
btn.addEventListener("click", () => {
list.setAttribute("start", btn.dataset.start)
})
})
toggleReversed.addEventListener("click", () => {
if (list.hasAttribute("reversed")) list.removeAttribute("reversed")
else list.setAttribute("reversed", "")
})
typeSelect.addEventListener("change", () => {
const value = typeSelect.value
if (value) list.setAttribute("type", value)
else list.removeAttribute("type")
})
</script>
</body>
</html>定义列表 dl
HTML 定义列表（Definition List）是一种特殊的内容结构，用于表示术语及其定义的关系。它由 <dl> 元素作为容器，内部包含 <dt>（定义术语）和 <dd>（定义描述）元素
- 语义化标记：明确表示术语与定义的关系
- 结构清晰：每个术语可以有多个定义描述
- 可扩展性：适合展示词典、术语表等专业内容
- 无序性：与有序列表(
<ol>)和无序列表(<ul>)不同，定义列表不强调顺序
html
<dl>
<dt>术语</dt>
<dd>定义描述</dd>
<!-- 可以有多个术语-定义对 -->
</dl>html
<!-- 来源：3-列表.md - 定义列表 dl/dt/dd -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【018】定义列表 Definition List</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 20px; background: #f5f5f5; }
.container { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
h1 { color: #333; margin-bottom: 6px; font-size: 24px; }
.subtitle { color: #888; margin-bottom: 30px; font-size: 14px; }
h2 { color: #495057; margin: 28px 0 15px; font-size: 18px; padding-bottom: 8px; border-bottom: 2px solid #e9ecef; }
/* 基本定义列表 */
dl.basic { margin: 15px 0; }
dl.basic dt {
font-weight: 700;
color: #4338ca;
margin-top: 14px;
font-size: 15px;
}
dl.basic dd {
margin-left: 20px;
color: #4b5563;
line-height: 1.7;
font-size: 14px;
margin-top: 4px;
}
/* 分组布局（左右两列） */
dl.meta {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 20px;
align-items: baseline;
background: #f8fafc;
padding: 20px 24px;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
dl.meta dt {
font-weight: 600;
color: #64748b;
font-size: 13px;
white-space: nowrap;
}
dl.meta dd {
color: #334155;
font-size: 14px;
margin: 0;
}
dl.meta .row {
grid-column: 1 / -1;
height: 0;
border-top: 1px solid #e2e8f0;
margin: 4px 0;
}
/* 卡片式定义列表 */
dl.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
dl.cards > div {
background: linear-gradient(135deg, #f0f9ff, #eef2ff);
border: 1px solid #bfdbfe;
border-radius: 10px;
padding: 20px;
transition: transform 0.2s, box-shadow 0.2s;
}
dl.cards > div:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(99,102,241,0.15);
}
dl.cards dt {
font-size: 18px;
font-weight: 700;
color: #1e40af;
margin-bottom: 8px;
}
dl.cards dd {
color: #475569;
font-size: 13px;
line-height: 1.7;
margin: 0;
}
/* 术语表样式 */
dl.glossary {
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
}
dl.glossary dt {
background: #f8f9fa;
padding: 12px 20px;
font-weight: 600;
color: #374151;
font-size: 14px;
border-bottom: 1px solid #e5e7eb;
}
dl.glossary dd {
margin: 0;
padding: 12px 20px 16px;
color: #6b7280;
font-size: 14px;
line-height: 1.7;
border-bottom: 1px solid #f3f4f6;
}
dl.glossary > :last-child { border-bottom: none; }
.info-note {
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 8px;
padding: 16px 20px;
margin-top: 25px;
font-size: 14px;
line-height: 1.8;
color: #047857;
}
.info-note code { background: rgba(4,120,87,0.1); padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 13px; }
</style>
</head>
<body>
<div class="container">
<h1>📖 定义列表</h1>
<p class="subtitle">dl · dt · dd — 术语及其定义的关系型结构</p>
<!-- ===== 基本用法 ===== -->
<h2>基本用法：多对多关系</h2>
<dl class="basic">
<dt>HTTP</dt>
<dt>Hypertext Transfer Protocol</dt>
<dd>一种应用层协议，用于在网络上传输超文本数据。是万维网数据通信的基础。</dd>
<dt>响应式设计 (Responsive Design)</dt>
<dd>让页面自动适配不同尺寸屏幕的设计方法。</dd>
<dd>常与媒体查询（Media Query）、弹性布局（Flexbox/Grid）、流式字体等技术配合使用。</dd>
<dt>CSS Grid</dt>
<dd>二维布局系统，可以同时处理行和列。</dd>
</div>
<!-- ===== 分组布局 ===== -->
<h2>分组布局：元信息卡片</h2>
<p style="color: #666; font-size: 13px; margin-bottom: 10px;">使用 <div> 在 <dl> 内部分组，实现左右两列布局：</p>
<dl class="meta">
<dt>📝 文档标题</dt>
<dd>静夜思</dd>
<div class="row"></div>
<dt>✍️ 作者</dt>
<dd>李白</dd>
<div class="row"></div>
<dt>📅 朝代</dt>
<dd>唐代</dd>
<div class="row"></div>
<dt>🏷️ 体裁</dt>
<dd>五言绝句</dd>
<div class="row"></div>
<dt>📂 分类</dt>
<dd>唐诗三百首 · 思乡诗</dd>
</dl>
<!-- ===== 卡片式定义列表 ===== -->
<h2>卡片式布局：技术栈介绍</h2>
<dl class="cards">
<div>
<dt>🌐 HTML</dt>
<dd>超文本标记语言，用于构建网页的结构和内容。是 Web 开发的三大基石之一。</dd>
</div>
<div>
<dt>🎨 CSS</dt>
<dd>层叠样式表，负责网页的视觉呈现。包括布局、颜色、动画等样式控制。</dd>
</div>
<div>
<dt>⚙️ JavaScript</dt>
<dd>脚本语言，为网页添加交互行为。可实现动态内容、表单验证、API 调用等功能。</dd>
</div>
<div>
<dt>🗄️ SQL</dt>
<dd>结构化查询语言，用于管理关系型数据库。支持数据的增删改查操作。</dd>
</div>
<div>
<dt>🐍 Python</dt>
<dd>通用编程语言，广泛应用于数据分析、人工智能、Web 后端开发等领域。</dd>
</div>
<div>
<dt>🦀 Rust</dt>
<dd>系统编程语言，注重内存安全和性能。适合编写操作系统、浏览器引擎等底层软件。</dd>
</div>
</dl>
<!-- ===== 术语表 ===== -->
<h2>术语表样式</h2>
<dl class="glossary">
<dt>DOM (Document Object Model)</dt>
<dd>文档对象模型，将 HTML 文档表示为树状结构，允许程序动态访问和操作文档内容、结构和样式。</dd>
<dt>BOM (Browser Object Model)</dt>
<dd>浏览器对象模型，提供与浏览器交互的接口，如 window、navigator、location、history 等对象。</dd>
<dt>API (Application Programming Interface)</dt>
<dd>应用程序编程接口，定义了不同软件组件之间交互的规范和协议。</dd>
<dt>CDN (Content Delivery Network)</dt>
<dd>内容分发网络，通过在多个地理位置分布服务器来加速内容的交付，减少延迟。</dd>
</dl>
<div class="info-note">
<strong>💡 使用要点：</strong><br>
• <code><dt></code> 可以连续出现多个，对应同一个或多个 <code><dd></code><br>
• 一个 <code><dt></code> 也可以对应多个 <code><dd></code>（如多条解释）<br>
• 在 <code><dl></code> 内使用 <code><div></code> 分组是合法的，便于实现复杂布局<br>
• 适用于词汇表、产品规格、文章元数据、FAQ 等场景
</div>
</div>
</body>
</html>dt / dd 的组织规则
定义列表的结构不是“每个 dt 必须对应一个 dd”，更准确的理解是一组 <dt> 对应一组 <dd>，常见形态如下：
- 多个同义名称对应同一个说明（多个
<dt>+ 一个<dd>） - 一个名称对应多个说明（一个
<dt>+ 多个<dd>）
html
<dl>
<dt>HTTP</dt>
<dt>Hypertext Transfer Protocol</dt>
<dd>一种应用层协议，用于在网络上传输超文本数据。</dd>
<dt>响应式设计</dt>
<dd>让页面适配不同尺寸屏幕。</dd>
<dd>常与媒体查询、弹性布局等一起使用。</dd>
</dl>在 dl 内分组（便于布局）
当需要把每一组 <dt>/<dd> 做成“左右两列”或卡片布局时，可以在 <dl> 内用 <div> 包裹一组条目（这在现代标准中是允许的）：
html
<dl class="meta">
<div class="row">
<dt>作者</dt>
<dd>李白</dd>
</div>
<div class="row">
<dt>朝代</dt>
<dd>唐</dd>
</div>
</dl>嵌套列表
在实际的 HTML5 开发中，各种列表之间都可以互相或者自身进行嵌套，如在无序列表中嵌套无序列表、无序列表中嵌套有序列表、有序列表中嵌套无序列表、定义列表中嵌套定义列表等
注意：
<ul>、<ol>的直接子元素只能是<li>。嵌套另一个列表时，应把子列表放进某个<li>里，否则结构不合法且容易造成样式与可访问性问题
除了默认的有序列表和无序列表之间的嵌套，HTML 还支持定义列表的嵌套，即在定义列表的解释层 <dd>…</dd> 标签中，再嵌套一个定义列表，这样就会形成一个父子关系的定义列表
html
<dl>
<dt>五言律诗</dt>
<dd>
<dl>
<dt>诗名：赠孟浩然，作者：李白</dt>
<dd>吾爱孟夫子， 风流天下闻。</dd>
<dd>红颜弃轩冕， 白首卧松云。</dd>
<dd>醉月频中圣， 迷花不事君。</dd>
<dd>高山安可仰？ 徒此揖清芬。</dd>
</dl>
</dd>
<dt>七言律诗</dt>
<dd>
<dl>
<dt>诗名：蜀相，作者：杜甫</dt>
<dd>丞相祠堂何处寻？ 锦官城外柏森森，</dd>
<dd>映阶碧草自春色， 隔叶黄鹂空好音。</dd>
<dd>三顾频烦天下计， 两朝开济老臣心。</dd>
<dd>出师未捷身先死， 长使英雄泪满襟。</dd>
</dl>
</dd>
</dl>html
<!-- 来源：3-列表.md - 嵌套列表与CSS Counter -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【019】嵌套列表与 CSS Counter</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 20px; background: #f5f5f5; }
.container { max-width: 850px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
h1 { color: #333; margin-bottom: 6px; font-size: 24px; }
.subtitle { color: #888; margin-bottom: 30px; font-size: 14px; }
h2 { color: #495057; margin: 28px 0 15px; font-size: 18px; padding-bottom: 8px; border-bottom: 2px solid #e9ecef; }
/* ===== 嵌套定义列表（诗词） ===== */
dl.poem-dl { margin: 15px 0; }
dl.poem-dl > dt {
font-size: 16px;
font-weight: 700;
color: #7c3aed;
margin-bottom: 6px;
}
dl.poem-dl > dd {
margin-left: 0;
margin-bottom: 16px;
}
dl.poem-dl > dd > dl {
background: linear-gradient(135deg, #faf5ff, #f0f9ff);
border: 1px solid #e9d5ff;
border-radius: 8px;
padding: 16px 20px;
margin: 0;
}
dl.poem-dl > dd > dl > dt {
font-weight: 600;
color: #6d28d9;
font-size: 14px;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px dashed #d8b4fe;
}
dl.poem-dl > dd > dl > dd {
margin-left: 0;
color: #4b5563;
line-height: 2;
font-size: 15px;
margin: 2px 0;
}
/* ===== CSS Counter 目录 ===== */
ol.toc {
counter-reset: chapter;
list-style: none;
padding-left: 0;
}
ol.toc > li {
counter-increment: chapter;
margin-bottom: 12px;
}
ol.toc > li::before {
content: "第 " counter(chinese, cjk-ideographic) " 章";
display: block;
font-weight: 700;
font-size: 16px;
color: #1e40af;
margin-bottom: 6px;
}
ol.toc > li > ol {
counter-reset: section;
list-style: none;
padding-left: 24px;
margin-top: 6px;
}
ol.toc > li > ol > li {
counter-increment: section;
position: relative;
padding: 5px 0 5px 24px;
font-size: 14px;
color: #475569;
}
ol.toc > li > ol > li::before {
content: counter(chapter) "." counter(section) " ";
position: absolute;
left: 0;
color: #6366f1;
font-weight: 600;
font-family: ui-monospace, monospace;
}
/* ===== 响应式导航列表 ===== */
nav.responsive-nav {
background: linear-gradient(135deg, #1e293b, #334155);
padding: 14px 24px;
border-radius: 10px;
margin: 15px 0;
}
nav.responsive-nav ul {
display: flex;
gap: 6px;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
nav.responsive-nav ul li a {
display: block;
padding: 8px 18px;
color: #cbd5e1;
text-decoration: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
}
nav.responsive-nav ul li a:hover,
nav.responsive-nav ul li a[aria-current="page"] {
background: #6366f1;
color: white;
}
@media (max-width: 600px) {
nav.responsive-nav ul {
flex-direction: column;
gap: 4px;
}
nav.responsive-nav ul li a {
text-align: center;
}
}
.section-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 20px 24px;
margin: 15px 0;
}
.section-box h3 { color: #475569; font-size: 14px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.info-tip {
background: #fefce8;
border: 1px solid #fde68a;
border-radius: 6px;
padding: 12px 16px;
margin-top: 20px;
font-size: 13px;
line-height: 1.7;
color: #854d0e;
}
.info-tip code { background: rgba(245,158,11,0.15); padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 12px; }
</style>
</head>
<body>
<div class="container">
<h1>🌲 嵌套列表与高级用法</h1>
<p class="subtitle">嵌套定义列表 · CSS Counter 目录 · 响应式导航</p>
<!-- ===== 嵌套定义列表 ===== -->
<h2>1️⃣ 嵌套定义列表（诗词展示）</h2>
<div class="section-box">
<dl class="poem-dl">
<dt>📜 五言律诗</dt>
<dd>
<dl>
<dt>《赠孟浩然》— 李白</dt>
<dd>吾爱孟夫子，风流天下闻。</dd>
<dd>红颜弃轩冕，白首卧松云。</dd>
<dd>醉月频中圣，迷花不事君。</dd>
<dd>高山安可仰？徒此揖清芬。</dd>
</dl>
</dd>
<dt>📜 七言律诗</dt>
<dd>
<dl>
<dt>《蜀相》— 杜甫</dt>
<dd>丞相祠堂何处寻？锦官城外柏森森。</dd>
<dd>映阶碧草自春色，隔叶黄鹂空好音。</dd>
<dd>三顾频烦天下计，两朝开济老臣心。</dd>
<dd>出师未捷身先死，长使英雄泪满襟。</dd>
</dl>
</dd>
</dl>
</div>
<!-- ===== CSS Counter 目录 ===== -->
<h2>2️⃣ CSS Counter 章节目录</h2>
<p style="color: #666; font-size: 13px; margin-bottom: 10px;">
使用 CSS Counter 实现「第X章 X.X」格式的层级编号：
</p>
<div class="section-box">
<ol class="toc">
<li>HTML 基础入门
<ol>
<li>HTML 发展历史</li>
<li>文档基本结构</li>
<li>常用标签介绍</li>
</ol>
</li>
<li>CSS 样式设计
<ol>
<li>选择器详解</li>
<li>盒模型与布局</li>
<li>响应式设计</li>
</ol>
</li>
<li>JavaScript 编程
<ol>
<li>基础语法</li>
<li>DOM 操作</li>
<li>事件处理</li>
<li>异步编程</li>
</ol>
</li>
<li>实战项目
<ol>
<li>需求分析</li>
<li>项目架构</li>
<li>编码实现</li>
<li>测试部署</li>
</ol>
</li>
</ol>
</div>
<!-- ===== 响应式导航 ===== -->
<h2>3️⃣ 响应式导航列表</h2>
<nav aria-label="主导航" class="responsive-nav">
<ul>
<li><a href="/">🏠 首页</a></li>
<li><a href="/products">📦 产品</a></li>
<li><a href="/blog" aria-current="page">📝 博客</a></li>
<li><a href="/about">ℹ️ 关于</a></li>
<li><a href="/contact">📞 联系</a></li>
</ul>
</nav>
<div class="info-tip">
<strong>💡 提示：</strong>缩小浏览器窗口宽度至 600px 以下，观察导航列表自动切换为纵向堆叠布局。
导航使用 <code><nav aria-label="..."></code> 包裹，
当前页面链接添加 <code>aria-current="page"</code> 以增强可访问性。
</div>
</div>
</body>
</html>响应式布局与可访问性实践
响应式布局中的列表
- 在导航菜单中结合弹性布局，实现从横向导航到纵向菜单的切换
- 使用媒体查询在小屏幕上增大项目间距和点击区域，提升触控体验
- 对用于布局的横向列表（如标签栏、工具栏），在小屏幕上切换为纵向堆叠
html
<nav class="responsive-nav">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li><a href="/blog">博客</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>css
.responsive-nav ul {
display: flex;
gap: 16px;
list-style: none;
padding: 0;
}
@media (max-width: 768px) {
.responsive-nav ul {
flex-direction: column;
}
}列表的可访问性要点
- 使用语义化标签
<ul>、<ol>、<dl>，不要用<div>模拟列表结构 - 避免过深的嵌套层级（一般建议不超过 3 层）
- 确保每个
<li>、<dt>、<dd>都包含有意义的文本内容，避免空节点 - 导航列表建议包裹在
<nav>中，并结合aria-label、aria-current等属性
html
<nav aria-label="主导航">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about" aria-current="page">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>- 将列表项用于交互时，优先在项内使用
<button>、<a>等可聚焦元素，而不是直接给<li>绑定点击事件
列表最佳实践
语义化使用
选择合适的列表类型：
- 使用
<ul>表示无序的项目集合（如导航菜单、功能列表） - 使用
<ol>表示有顺序的内容（如步骤、排名、目录） - 使用
<dl>表示术语定义关系（如词汇表、元数据）
避免滥用列表：不要仅仅为了缩进或样式而使用列表，应确保内容确实符合列表的语义
CSS 样式控制
-
使用 CSS 而非 HTML 属性：优先使用
list-style-type、list-style-position、list-style-image等 CSS 属性，而不是已废弃的 HTMLtype属性 -
自定义列表样式：
css
/* 使用图片作为列表标记 */
ul.custom {
list-style-image: url("bullet.png");
}
/* 控制标记位置 */
ul.inside {
list-style-position: inside; /* 标记在内容内部 */
}
ul.outside {
list-style-position: outside; /* 标记在内容外部（默认） */
}
/* 完全自定义样式（移除默认标记，使用伪元素） */
ul.modern {
list-style: none;
padding-left: 0;
}
ul.modern li::before {
content: "→ ";
color: #0066cc;
font-weight: bold;
margin-right: 8px;
}高级编号（CSS Counter）
当需要实现“1.2.3”这类章节号、或在嵌套列表里自定义编号格式时，可以使用 CSS Counter：
html
<ol class="toc">
<li>
第一章
<ol>
<li>第一节</li>
<li>第二节</li>
</ol>
</li>
</ol>css
ol.toc {
counter-reset: chapter;
}
ol.toc > li {
counter-increment: chapter;
}
ol.toc > li::marker {
content: counter(chapter) ". ";
}
ol.toc > li > ol {
counter-reset: section;
}
ol.toc > li > ol > li {
counter-increment: section;
}
ol.toc > li > ol > li::marker {
content: counter(chapter) "." counter(section) " ";
}实际应用场景
- 导航菜单：使用无序列表构建导航结构
- 步骤说明：使用有序列表展示操作步骤
- 术语表：使用定义列表展示术语和解释
- 面包屑导航：使用有序列表表示层级路径
- 目录结构：使用嵌套有序列表展示文档目录
性能考虑
- 避免过度嵌套：深层嵌套会增加 DOM 复杂度，可能影响渲染性能
- 合理使用伪元素：使用
::before和::after自定义标记时，注意性能影响 - CSS 优化：对于大量列表项，考虑使用
content-visibility等现代 CSS 特性优化渲染
补充示例
<h4>016-lists-basic.html</h4>html
<!-- 来源：3-列表.md - 无序列表与有序列表完整示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【016】无序列表与有序列表</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 20px; background: #f5f5f5; }
.container { max-width: 850px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
h1 { color: #333; margin-bottom: 6px; font-size: 24px; }
.subtitle { color: #888; margin-bottom: 30px; font-size: 14px; }
h2 { color: #495057; margin: 28px 0 15px; font-size: 18px; padding-bottom: 8px; border-bottom: 2px solid #e9ecef; }
.list-demo {
background: #f8f9fa;
padding: 20px 24px;
border-radius: 8px;
margin-bottom: 16px;
border-left: 4px solid #6366f1;
}
.list-demo ul, .list-demo ol {
margin-left: 8px;
line-height: 2;
font-size: 15px;
color: #374151;
}
.list-demo li { padding: 2px 0; }
/* 无序列表样式 */
ul.disc { list-style-type: disc; }
ul.circle { list-style-type: circle; }
ul.square { list-style-type: square; }
ul.none { list-style-type: none; }
/* 自定义标记 */
ul.custom-marker li::marker {
content: "✓ ";
color: #16a34a;
font-weight: bold;
font-size: 16px;
}
ul.custom-before {
list-style: none;
padding-left: 0;
}
ul.custom-before li {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 0;
}
ul.custom-before li::before {
content: "🔹";
font-size: 14px;
}
/* 有序列表样式 */
ol.decimal { list-style-type: decimal; }
ol.lower-alpha { list-style-type: lower-alpha; }
ol.upper-alpha { list-style-type: upper-alpha; }
ol.lower-roman { list-style-type: lower-roman; }
ol.upper-roman { list-style-type: upper-roman; }
/* 混合样式 */
ul.mixed li:nth-child(1) { list-style-type: circle; }
ul.mixed li:nth-child(2) { list-style-type: disc; }
ul.mixed li:nth-child(3) { list-style-type: square; }
ul.mixed li:nth-child(4) { list-style-type: none; padding-left: 20px; }
/* 标签 */
.tag-label {
display: inline-block;
background: #e0e7ff;
color: #4338ca;
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
font-family: ui-monospace, monospace;
margin-left: 6px;
}
.style-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 12px;
margin-top: 15px;
}
.style-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
}
.style-card-header {
background: #f8f9fa;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
color: #6b7280;
border-bottom: 1px solid #e5e7eb;
font-family: ui-monospace, monospace;
}
.style-card-body { padding: 16px; }
.style-card-body ul, .style-card-body ol { margin-left: 20px; line-height: 2; font-size: 14px; color: #374151; }
</style>
</head>
<body>
<div class="container">
<h1>📋 列表示例</h1>
<p class="subtitle">ul · ol — 无序列表与有序列表的多种样式展示</p>
<!-- ===== 无序列表 ===== -->
<h2>无序列表 <ul></h2>
<div class="style-grid">
<div class="style-card">
<div class="style-card-header">list-style-type: disc (默认)</div>
<div class="style-card-body">
<ul class="disc">
<li>HTML 超文本标记语言</li>
<li>CSS 层叠样式表</li>
<li>JavaScript 脚本语言</li>
</ul>
</div>
</div>
<div class="style-card">
<div class="style-card-header">list-style-type: circle</div>
<div class="style-card-body">
<ul class="circle">
<li>React 前端框架</li>
<li>Vue 渐进式框架</li>
<li>Angular 完整框架</li>
</ul>
</div>
</div>
<div class="style-card">
<div class="style-card-header">list-style-type: square</div>
<div class="style-card-body">
<ul class="square">
<li>macOS 操作系统</li>
<li>Windows 系统</li>
<li>Linux 发行版</li>
</ul>
</div>
</div>
<div class="style-card">
<div class="style-card-header">自定义 ::marker (✓)</div>
<div class="style-card-body">
<ul class="custom-marker">
<li>语义化 HTML 结构</li>
<li>响应式 CSS 布局</li>
<li>模块化 JavaScript</li>
</ul>
</div>
</div>
<div class="style-card">
<div class="style-card-header">::before 伪元素自定义</div>
<div class="style-card-body">
<ul class="custom-before">
<li>项目 Alpha</li>
<li>项目 Beta</li>
<li>项目 Gamma</li>
</ul>
</div>
</div>
<div class="style-card">
<div class="style-card-header">混合样式（每项不同）</div>
<div class="style-card-body">
<ul class="mixed">
<li>空心圆圈项</li>
<li>实心圆点项</li>
<li>实心方块项</li>
<li>无符号项（纯文本缩进）</li>
</ul>
</div>
</div>
</div>
<!-- ===== 有序列表 ===== -->
<h2>有序列表 <ol></h2>
<div class="style-grid">
<div class="style-card">
<div class="style-card-header">decimal（默认数字）</div>
<div class="style-card-body">
<ol class="decimal">
<li>需求分析</li>
<li>UI 设计</li>
<li>前端开发</li>
<li>测试上线</li>
</ol>
</div>
</div>
<div class="style-card">
<div class="style-card-header">lower-alpha / upper-alpha</div>
<div class="style-card-body">
<ol class="lower-alpha" style="margin-bottom: 12px;">
<li>第一章节</li>
<li>第二章节</li>
<li>第三章节</li>
</ol>
<ol class="upper-alpha">
<li>选项 A</li>
<li>选项 B</li>
<li>选项 C</li>
</ol>
</div>
</div>
<div class="style-card">
<div class="style-card-header">lower-roman / upper-roman</div>
<div class="style-card-body">
<ol class="lower-roman" style="margin-bottom: 12px;">
<li>序章</li>
<li>第一章</li>
<li>第二章</li>
</ol>
<ol class="upper-roman">
<li>I. 概述</li>
<li>II. 方法</li>
<li>III. 结论</li>
</ol>
</div>
</div>
<div class="style-card">
<div class="style-card-header">start="5" 起始值</div>
<div class="style-card-body">
<ol start="5">
<li>第五步：代码审查</li>
<li>第六步：合并分支</li>
<li>第七步：部署发布</li>
</ol>
</div>
</div>
<div class="style-card">
<div class="style-card-header">reversed 倒序</div>
<div class="style-card-body">
<ol reversed start="3">
<li> Bronze 铜牌 🥉</li>
<li> Silver 银牌 🥈</li>
<li> Gold 金牌 🥇</li>
</ol>
</div>
</div>
<div class="style-card">
<div class="style-card-header">value 属性跳号</div>
<div class="style-card-body">
<ol>
<li>基础概念</li>
<li value="5">进阶技巧</li>
<li>实战案例</li>
<li>最佳实践</li>
</ol>
</div>
</div>
</div>
</div>
</body>
</html>html
<!-- 来源：3-列表.md - 动态修改有序列表属性 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【017】动态修改有序列表属性</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
h1 { color: #333; margin-bottom: 6px; font-size: 24px; }
.subtitle { color: #888; margin-bottom: 25px; font-size: 14px; }
.controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
padding: 18px 22px;
background: white;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
margin-bottom: 25px;
}
button {
padding: 9px 18px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: transform 0.15s, box-shadow 0.15s;
}
button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.35); }
button:active { transform: translateY(0); }
button.active {
background: linear-gradient(135deg, #059669, #10b981);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
select {
padding: 9px 14px;
background: #1e293b;
color: #e2e8f0;
border: 1px solid #334155;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
}
.list-container {
background: white;
padding: 28px 32px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
ol {
font-size: 17px;
line-height: 2.2;
color: #334155;
padding-left: 24px;
}
ol li {
padding: 4px 8px;
border-radius: 4px;
transition: background 0.2s;
}
ol li:hover { background: #f1f5f9; }
.status-bar {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
padding: 14px 20px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 8px;
font-size: 13px;
color: #166534;
}
.status-item {
display: flex;
align-items: center;
gap: 6px;
}
.status-item code {
background: rgba(22,101,52,0.12);
padding: 2px 8px;
border-radius: 4px;
font-family: ui-monospace, monospace;
font-size: 12px;
}
</style>
</head>
<body>
<h1>⚡ 动态修改有序列表</h1>
<p class="subtitle">通过 JavaScript 动态控制 start / reversed / type 属性</p>
<div class="controls">
<button data-start="1">从 1 开始</button>
<button data-start="5">从 5 开始</button>
<button data-start="10">从 10 开始</button>
<button id="toggleReversed">🔄 切换 reversed</button>
<select id="typeSelect" aria-label="选择编号样式">
<option value="">默认编号 (1.)</option>
<option value="a">小写字母 (a.)</option>
<option value="A">大写字母 (A.)</option>
<option value="i">小写罗马 (i.)</option>
<option value="I">大写罗马 (I.)</option>
</select>
</div>
<div class="list-container">
<ol id="dynamicList">
<li>学习 HTML 基础语法和语义化标签</li>
<li>掌握 CSS 布局和样式技巧</li>
<li>理解 JavaScript 核心概念</li>
<li>实践响应式设计和移动端适配</li>
<li>学习性能优化和可访问性最佳实践</li>
</ol>
<div class="status-bar">
<div class="status-item">当前 start：<code id="valStart">1</code></div>
<div class="status-item">reversed：<code id="valReversed">false</code></div>
<div class="status-item">type：<code id="valType">default</code></div>
</div>
</div>
<script>
const list = document.getElementById('dynamicList');
const typeSelect = document.getElementById('typeSelect');
const toggleBtn = document.getElementById('toggleReversed');
const valStart = document.getElementById('valStart');
const valReversed = document.getElementById('valReversed');
const valType = document.getElementById('valType');
// 更新状态栏
function updateStatus() {
valStart.textContent = list.getAttribute('start') || '1';
valReversed.textContent = list.hasAttribute('reversed') ? 'true' : 'false';
valType.textContent = list.getAttribute('type') || 'default';
// 更新按钮状态
if (list.hasAttribute('reversed')) {
toggleBtn.classList.add('active');
toggleBtn.textContent = '✅ reversed 开启';
} else {
toggleBtn.classList.remove('active');
toggleBtn.textContent = '🔄 切换 reversed';
}
}
// start 按钮
document.querySelectorAll('button[data-start]').forEach(btn => {
btn.addEventListener('click', () => {
list.setAttribute('start', btn.dataset.start);
updateStatus();
});
});
// reversed 切换
toggleBtn.addEventListener('click', () => {
if (list.hasAttribute('reversed')) {
list.removeAttribute('reversed');
} else {
list.setAttribute('reversed', '');
}
updateStatus();
});
// type 选择
typeSelect.addEventListener('change', () => {
const value = typeSelect.value;
if (value) {
list.setAttribute('type', value);
} else {
list.removeAttribute('type');
}
updateStatus();
});
// 初始化状态
updateStatus();
</script>
</body>
</html>html
<!DOCTYPE html>
<!--
来源：基础知识/3-列表.md
演示：有序列表 ol / 无序列表 ul / 定义列表 dl / 嵌套列表 / 列表样式 / CSS counter
-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML 列表完整展示</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; padding: 30px; background: #f0f2f5; max-width: 900px; margin: 0 auto; }
h1 { color: #1a1a1a; margin-bottom: 25px; }
.section { background: white; padding: 25px; margin-bottom: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
h2 { color: #333; font-size: 17px; margin-bottom: 15px; border-bottom: 2px solid #eee; padding-bottom: 8px; }
h3 { color: #555; font-size: 15px; margin: 18px 0 12px; }
ul, ol { padding-left: 24px; line-height: 1.8; }
li { margin: 4px 0; }
dl { line-height: 1.8; }
dt { font-weight: bold; color: #2c3e50; margin-top: 10px; }
dd { margin-left: 20px; color: #666; margin-bottom: 6px; }
/* 列表样式变体 */
.list-disc { list-style-type: disc; }
.list-circle { list-style-type: circle; }
.list-square { list-style-type: square; }
.list-none { list-style-type: none; padding-left: 0; }
.list-decimal { list-style-type: decimal; }
.list-alpha-lower { list-style-type: lower-alpha; }
.list-alpha-upper { list-style-type: upper-alpha; }
.list-roman { list-style-type: upper-roman; }
/* 自定义列表项 */
.styled-list li {
padding: 8px 12px; margin: 5px 0; background: #f8f9fa;
border-radius: 6px; border-left: 3px solid #3498db;
transition: transform 0.2s;
}
.styled-list li:hover { transform: translateX(5px); background: #ebf5fb; }
/* 任务列表 */
.task-list { list-style: none; padding-left: 0; }
.task-list li {
display: flex; align-items: center; gap: 10px; padding: 10px 14px;
background: #f8f9fa; margin: 6px 0; border-radius: 8px;
transition: all 0.2s;
}
.task-list li.done { opacity: 0.5; }
.task-list li.done span { text-decoration: line-through; color: #999; }
.task-checkbox {
width: 20px; height: 20px; border: 2px solid #bbb; border-radius: 4px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: all 0.2s;
}
.task-checkbox.checked { background: #27ae60; border-color: #27ae60; color: white; }
/* CSS Counter 演示 */
.counter-demo { counter-reset: section; list-style: none; padding-left: 0; }
.counter-demo > li {
counter-increment: section; padding: 12px 16px; margin: 8px 0;
background: linear-gradient(135deg, #667eea, #764ba2); color: white;
border-radius: 8px; position: relative; padding-left: 56px;
}
.counter-demo > li::before {
content: counter(section, decimal-leading-zero);
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px; background: rgba(255,255,255,0.2);
border-radius: 50%; display: flex; align-items: center;
justify-content: center; font-weight: bold; font-size: 13px;
}
.nested-list { list-style-type: none; padding-left: 0; }
.nested-list > li {
padding: 10px 16px; margin: 5px 0; border-radius: 8px;
}
.nested-list > li > ul, .nested-list > li > ol { margin-top: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 15px 0; }
th, td { padding: 8px 12px; text-align: left; border: 1px solid #dee2e6; }
th { background: #f8f9fa; font-weight: 600; }
.tag { display: inline-block; background: #e3f2fd; color: #1976d2; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-family: monospace; }
</style>
</head>
<body>
<h1>📋 HTML 列表完整展示</h1>
<!-- ========== 无序列表 ul ========== -->
<div class="section">
<h2>1. 无序列表 ul（Unordered List）</h2>
<h3>三种标准符号</h3>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;">
<div>
<p style="font-size:13px;color:#666;margin-bottom:8px;"><code>list-style-type: disc</code> (实心圆)</p>
<ul class="list-disc">
<li>苹果 Apple</li>
<li>香蕉 Banana</li>
<li>樱桃 Cherry</li>
</ul>
</div>
<div>
<p style="font-size:13px;color:#666;margin-bottom:8px;"><code>list-style-type: circle</code> (空心圆)</p>
<ul class="list-circle">
<li>红色 Red</li>
<li>绿色 Green</li>
<li>蓝色 Blue</li>
</ul>
</div>
<div>
<p style="font-size:13px;color:#666;margin-bottom:8px;"><code>list-style-type: square</code> (方块)</p>
<ul class="list-square">
<li>前端 Frontend</li>
<li>后端 Backend</li>
<li>运维 DevOps</li>
</ul>
</div>
</div>
<h3 style="margin-top:20px;">自定义样式的无序列表</h3>
<ul class="styled-list">
<li>✅ 学习 HTML 基础语法</li>
<li>🎨 掌握 CSS 样式布局</li>
<li>⚙️ 熟悉 JavaScript 编程</li>
<li>🛠️ 了解开发工具链</li>
<li>📚 阅读官方文档规范</li>
</ul>
</div>
<!-- ========== 有序列表 ol ========== -->
<div class="section">
<h2>2. 有序列表 ol（Ordered List）</h2>
<h3>数字编号</h3>
<ol class="list-decimal">
<li>需求分析与规划</li>
<li>UI/UX 设计稿制作</li>
<li>前端页面开发</li>
<li>后端接口对接</li>
<li>测试与 bug 修复</li>
<li>部署上线</li>
</ol>
<h3>字母编号</h3>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
<div>
<p style="font-size:13px;color:#666;"><code>lower-alpha</code> 小写字母</p>
<ol class="list-alpha-lower">
<li>第一步：准备材料</li>
<li>第二步：混合搅拌</li>
<li>第三步：加热烘焙</li>
</ol>
</div>
<div>
<p style="font-size:13px;color:#666;"><code>upper-alpha</code> 大写字母</p>
<ol class="list-alpha-upper">
<li>注册账号</li>
<li>填写个人信息</li>
<li>验证邮箱</li>
</ol>
</div>
</div>
<h3>罗马数字</h3>
<ol class="list-roman">
<li>第一章：HTML 简介</li>
<li>第二章：文本内容</li>
<li>第三章：链接与多媒体</li>
<li>第四章：表格与表单</li>
</ol>
<h3>ol 高级属性</h3>
<table>
<thead><tr><th>属性</th><th>作用</th><th>示例</th></tr></thead>
<tbody>
<tr><td><code>start</code></td><td>起始编号值</td><td><code>start="5"</code> → 从 5 开始</td></tr>
<tr><td><code>reversed</code></td><td>倒序排列</td><td><code>reversed</code> → 3, 2, 1</td></tr>
<tr><td><code>type</code></td><td>编号类型</td><td>"1"/"A"/"a"/"I"/"i"</td></tr>
</tbody>
</table>
<p style="margin-top:12px;">
<strong>reversed 示例：</strong>
</p>
<ol reversed start="5">
<li>第五步：验收交付</li>
<li>第四步：部署上线</li>
<li>第三步：测试修复</li>
<li>第二步：开发实现</li>
<li>第一步：需求分析</li>
</ol>
</div>
<!-- ========== 定义列表 dl ========== -->
<div class="section">
<h2>3. 定义列表 dl（Definition List）</h2>
<dl>
<dt>HTML (HyperText Markup Language)</dt>
<dd>超文本标记语言，用于定义网页的结构和内容。它是 Web 技术的基础。</dd>
<dt>CSS (Cascading Style Sheets)</dt>
<dd>层叠样式表，用于控制网页的外观和布局，实现视觉呈现效果。</dd>
<dt>JavaScript</dt>
<dd>一种动态编程语言，为网页添加交互行为和动态功能。</dd>
<dt>DOM (Document Object Model)</dt>
<dd>文档对象模型，将 HTML 文档表示为一棵节点树，方便程序操作。</dd>
</dl>
<h3 style="margin-top:20px;">dl 其他常见用途</h3>
<dl>
<dt>🎯 适用场景</dt>
<dd>术语表、FAQ 问答、元数据键值对、产品规格参数</dd>
<dt>⚠️ 注意事项</dt>
<dd>一个 dt 可以对应多个 dd；也可以只有 dd 没有 dt（用于延续说明）</dd>
</dl>
</div>
<!-- ========== 嵌套列表 ========== -->
<div class="section">
<h2>4. 嵌套列表（多层嵌套）</h2>
<h3>无序嵌套无序</h3>
<ul class="nested-list" style="background:#f8f9fa;padding:15px;border-radius:8px;">
<li style="background:#ebf5fb;">前端技术栈
<ul>
<li style="background:#e3f2fd;">基础技术
<ul>
<li style="background:#dbeafe;">HTML</li>
<li style="background:#dbeafe;">CSS</li>
<li style="background:#dbeafe;">JavaScript</li>
</ul>
</li>
<li style="background:#e3f2fd;">框架
<ul>
<li style="background:#dbeafe;">React</li>
<li style="background:#dbeafe;">Vue.js</li>
<li style="background:#dbeafe;">Angular</li>
</ul>
</li>
<li style="background:#e3f2fd;">工具链
<ul>
<li style="background:#dbeafe;">Webpack</li>
<li style="background:#dbeafe;">Vite</li>
<li style="background:#dbeafe;">TypeScript</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3>有序嵌套无序（步骤 + 子选项）</h3>
<ol>
<li>搭建项目环境
<ul>
<li>安装 Node.js</li>
<li>初始化 npm 项目</li>
<li>配置开发工具</li>
</ul>
</li>
<li>编写页面结构
<ul>
<li>设计 HTML 语义化结构</li>
<li>添加必要的 meta 信息</li>
</ul>
</li>
<li>实现交互功能
<ul>
<li>绑定事件监听</li>
<li>处理用户输入</li>
<li>发送网络请求</li>
</ul>
</li>
</ol>
</div>
<!-- ========== CSS Counter ========== -->
<div class="section">
<h2>5. CSS Counter 自定义列表编号</h2>
<p>使用 CSS 计数器实现高度自定义的编号样式：</p>
<ol class="counter-demo">
<li>了解 HTML5 新增的语义化标签</li>
<li>掌握 CSS Flexbox 和 Grid 布局</li>
<li>熟练运用 ES6+ 新特性</li>
<li>学会使用现代构建工具</li>
<li>理解模块化和组件化开发</li>
</ol>
<pre style="margin-top:15px;font-size:11px;">/* CSS Counter 核心代码 */
.counter-demo {
counter-reset: section; /* ① 重置计数器 */
list-style: none; /* 隐藏默认编号 */
padding-left: 0;
}
.counter-demo > li {
counter-increment: section; /* ② 每个元素递增 */
position: relative;
padding-left: 56px;
}
.counter-demo > li::before {
content: counter(section, decimal-leading-zero); /* ③ 显示计数器值 */
/* decimal-leading-zero → "01", "02"... */
/* 也可用: decimal, lower-roman, upper-alpha 等 */
position: absolute;
left: 14px;
/* ... 样式 ... */
}</pre>
</div>
<!-- ========== 任务列表（交互式）========== -->
<div class="section">
<h2>6. 交互式任务列表</h2>
<p>点击复选框切换完成状态：</p>
<ul class="task-list" id="task-list">
<li class="done" onclick="toggleTask(this)">
<span class="task-checkbox checked">✓</span>
<span>学习 HTML 基础知识</span>
</li>
<li class="done" onclick="toggleTask(this)">
<span class="task-checkbox checked">✓</span>
<span>掌握 CSS 选择器和布局</span>
</li>
<li onclick="toggleTask(this)">
<span class="task-checkbox"></span>
<span>学习 JavaScript 基础语法</span>
</li>
<li onclick="toggleTask(this)">
<span class="task-checkbox"></span>
<span>完成第一个实战项目</span>
</li>
<li onclick="toggleTask(this)">
<span class="task-checkbox"></span>
<span>部署上线个人作品集网站</span>
</li>
</ul>
<p style="margin-top:12px;font-size:13px;color:#666;">
进度：<strong id="task-progress" style="color:#3498db;">2/5</strong> 完成
</p>
</div>
<script>
function toggleTask(li) {
const checkbox = li.querySelector('.task-checkbox');
const isDone = li.classList.contains('done');
if (isDone) {
li.classList.remove('done');
checkbox.classList.remove('checked');
checkbox.innerHTML = '';
} else {
li.classList.add('done');
checkbox.classList.add('checked');
checkbox.innerHTML = '✓';
}
// 更新进度
const total = document.querySelectorAll('#task-list li').length;
const done = document.querySelectorAll('#task-list li.done').length;
document.getElementById('task-progress').textContent = `${done}/${total}`;
}
</script>
</body>
</html>html
<!DOCTYPE html>
<!--
来源：基础知识/3-列表.md
演示：高级列表技巧 — 描述列表应用、菜单导航列表、嵌套文档大纲
-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>高级列表技巧演示</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; padding: 30px; background: #f0f2f5; max-width: 920px; margin: 0 auto; }
h1 { color: #1a1a1a; margin-bottom: 25px; }
.card { background: white; padding: 24px; margin-bottom: 20px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
h2 { color: #2c3e50; font-size: 17px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid #ecf0f1; }
h3 { color: #555; font-size: 15px; margin: 18px 0 12px; }
dl { line-height: 1.8; }
dt { font-weight: 700; color: #2c3e50; margin-top: 14px; font-size: 14px; }
dd { margin-left: 20px; color: #666; margin-bottom: 6px; font-size: 13px; }
/* FAQ 样式 */
.faq-list dl { counter-reset: faq; }
.faq-list dt {
counter-increment: faq; padding: 12px 16px 12px 48px;
background: #f8f9fa; border-radius: 8px; margin-top: 10px;
position: relative; cursor: pointer; transition: background 0.2s;
border-left: 4px solid #3498db;
}
.faq-list dt:hover { background: #ebf5fb; }
.faq-list dt::before {
content: 'Q' counter(faq); position: absolute; left: 14px; top: 12px;
width: 26px; height: 26px; background: #3498db; color: white;
border-radius: 50%; display: flex; align-items: center;
justify-content: center; font-size: 12px; font-weight: bold;
}
.faq-list dd {
margin-left: 48px; padding: 10px 16px; background: #f0fdf4;
border-radius: 0 8px 8px 8px; border-left: 4px solid #27ae60;
margin-top: -4px; margin-bottom: 12px;
}
/* 导航菜单 */
.nav-menu { list-style: none; padding: 0; max-width: 320px; }
.nav-menu > li {
border-bottom: 1px solid #eee;
}
.nav-menu > li > a {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; color: #333; text-decoration: none;
font-size: 14px; font-weight: 500; transition: all 0.2s;
}
.nav-menu > li > a:hover { background: #f8f9fa; color: #3498db; padding-left: 22px; }
.nav-menu > li > a::after { content: '▸'; color: #bbb; transition: transform 0.2s; }
.nav-menu > li.open > a::after { transform: rotate(90deg); }
.nav-menu > li.open > a { background: #ebf5fb; color: #2980b9; }
.nav-submenu {
list-style: none; padding: 0; max-height: 0; overflow: hidden;
transition: max-height 0.3s ease-out; background: #fafafa;
}
.nav-menu > li.open .nav-submenu { max-height: 300px; }
.nav-submenu li a {
display: block; padding: 10px 16px 10px 36px; color: #666;
text-decoration: none; font-size: 13px; transition: all 0.15s;
border-left: 3px solid transparent;
}
.nav-submenu li a:hover { color: #3498db; border-left-color: #3498db; background: #f0f7ff; }
/* 文档大纲 */
.outline-nav ol { list-style: none; padding-left: 0; counter-reset: outline; }
.outline-nav > li {
counter-increment: outline; padding: 10px 14px 10px 42px;
margin: 4px 0; border-radius: 8px; position: relative;
background: #f8f9fa; transition: all 0.2s; cursor: pointer;
border-left: 4px solid #ddd;
}
.outline-nav > li:hover { background: #ebf5fb; border-left-color: #3498db; transform: translateX(4px); }
.outline-nav > li::before {
content: counter(outline); position: absolute; left: 12px; top: 10px;
width: 22px; height: 22px; background: #e0e0e0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: bold; color: #666;
}
.outline-nav > li:hover::before { background: #3498db; color: white; }
.outline-nav .level { font-size: 11px; color: #aaa; float: right; }
/* 产品规格 */
.spec-grid { display: grid; grid-template-columns: 180px 1fr; gap: 2px 16px; }
.spec-grid dt { margin: 0; padding: 8px 0; border-bottom: 1px dashed #ddd; font-size: 13px; color: #888; }
.spec-grid dd { margin: 0; padding: 8px 0; border-bottom: 1px dashed #ddd; font-size: 13px; color: #333; }
pre { background: #263238; color: #eceff1; padding: 14px; border-radius: 8px; overflow-x: auto; font-size: 12px; line-height: 1.6; }
.tag { display: inline-block; background: #e3f2fd; color: #1976d2; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-family: monospace; }
</style>
</head>
<body>
<h1>📋 高级列表技巧演示</h1>
<!-- ========== DL 应用：FAQ ========== -->
<div class="card">
<h2>1. 定义列表 <dl> — FAQ 问答页</h2>
<p style="font-size:13px;color:#666;margin-bottom:15px;">
定义列表非常适合问答类内容（FAQ），dt 作为问题，dd 作为答案：
</p>
<div class="faq-list">
<dl>
<dt onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'block'">
什么是 HTML5？
</dt>
<dd>HTML5 是 HTML 的第五个主要版本，引入了诸多新的语义化标签、多媒体支持和 API。它于 2014 年正式成为 W3C 推荐标准。</dd>
<dt onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'block'">
HTML5 与之前的版本有什么区别？
</dt>
<dd>HTML5 不再基于 SGML，语法更宽松；新增了 header、nav、article 等语义标签；原生支持 video/audio 多媒体；提供了 Canvas、WebSocket、LocalStorage 等 JavaScript API。</dd>
<dt onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'block'">
如何开始学习 HTML5？
</dt>
<dd>建议从 MDN Web Docs 入手，了解基础标签和属性；然后通过实践项目巩固知识；同时学习 CSS 和 JavaScript 以实现完整的网页功能。</dd>
<dt onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'block'">
HTML5 是否需要特殊的编辑器？
</dt>
<dd>不需要！任何文本编辑器都可以编写 HTML5 代码。推荐使用 VS Code 配合 Live Server 扩展进行实时预览，或者直接使用浏览器打开 HTML 文件。</dd>
</dl>
</div>
</div>
<!-- ========== DL 应用：产品规格 ========== -->
<div class="card">
<h2>2. 定义列表 — 产品规格参数表</h2>
<div style="max-width:550px;background:#fafafa;padding:20px;border-radius:10px;border:1px solid #eee;">
<dl class="spec-grid">
<dt>产品名称</dt> <dd>智能手机 Pro Max Ultra</dd>
<dt>屏幕尺寸</dt> <dd>6.7 英寸 OLED，2778 × 1284 像素</dd>
<dt>处理器</dt> <dd>A18 Pro 仿生芯片，6 核 CPU + 6 核 GPU</dd>
<dt>内存</dt> <dd>8GB RAM</dd>
<dt>存储容量</dt> <dd>256GB / 512GB / 1TB 可选</dd>
<dt>后置摄像头</dt> <dd>48MP 主摄 + 12MP 超广角 + 12MP 长焦</dd>
<dt>电池容量</dt> <dd>4500mAh，支持 45W 有线快充</dd>
<dt>操作系统</dt> <dd>iOS 18</dd>
<dt>防护等级</dt> <dd>IP68 防尘防水</dd>
<dt>重量</dt> <dd>221 克</dd>
</dl>
</div>
</div>
<!-- ========== 可折叠导航菜单 ========== -->
<div class="card">
<h2>3. 嵌套列表 — 可折叠导航菜单</h2>
<p style="font-size:13px;color:#666;margin-bottom:15px;">点击展开/收起子菜单：</p>
<ul class="nav-menu" id="nav-menu">
<li>
<a href="#" onclick="toggleNav(this);return false;">📚 前端基础</a>
<ul class="nav-submenu">
<li><a href="#">HTML 语义化标签</a></li>
<li><a href="#">CSS 选择器与布局</a></li>
<li><a href="#">JavaScript ES6+</a></li>
<li><a href="#">TypeScript 入门</a></li>
</ul>
</li>
<li>
<a href="#" onclick="toggleNav(this);return false;">🎨 CSS 框架</a>
<ul class="nav-submenu">
<li><a href="#">Tailwind CSS</a></li>
<li><a href="#">Bootstrap 5</a></li>
<li><a href="#">Sass/SCSS</a></li>
</ul>
</li>
<li>
<a href="#" onclick="toggleNav(this);return false;">⚛️ 前端框架</a>
<ul class="nav-submenu">
<li><a href="#">React 18+</a></li>
<li><a href="#">Vue 3 Composition API</a></li>
<li><a href="#">Angular 17+</a></li>
<li><a href="#">Next.js / Nuxt.js</a></li>
<li><a href="#">Svelte / SolidJS</a></li>
</ul>
</li>
<li>
<a href="#" onclick="toggleNav(this);return false;">🛠️ 工具链</a>
<ul class="nav-submenu">
<li><a href="#">Vite 构建工具</a></li>
<li><a href="#">Webpack 配置</a></li>
<li><a href="#">ESLint / Prettier</a></li>
<li><a href="#">Git 版本控制</a></li>
</ul>
</li>
<li>
<a href="#" onclick="toggleNav(this);return false;">🚀 进阶主题</a>
<ul class="nav-submenu">
<li><a href="#">性能优化策略</a></li>
<li><a href="#">Web 安全防护</a></li>
<li><a href="#">PWA 渐进式应用</a></li>
<li><a href="#">微前端架构</a></li>
</ul>
</li>
</ul>
</div>
<!-- ========== 文档大纲导航 ========== -->
<div class="card">
<h2>4. 有序列表 — 文档目录/大纲导航</h2>
<p style="font-size:13px;color:#666;margin-bottom:15px;">模拟长文档的章节导航：</p>
<ol class="outline-nav">
<li>
HTML 基础入门 <span class="level">H2</span>
<ol style="padding-left:20px;margin-top:6px;font-size:13px;">
<li style="padding:4px 0;color:#666;">什么是 HTML？ <span style="color:#aaa;font-size:11px;">H3</span></li>
<li style="padding:4px 0;color:#666;">第一个 HTML 页面 <span style="color:#aaa;font-size:11px;">H3</span></li>
<li style="padding:4px 0;color:#666;">常用标签速查 <span style="color:#aaa;font-size:11px;">H3</span></li>
</ol>
</li>
<li>
CSS 样式设计 <span class="level">H2</span>
<ol style="padding-left:20px;margin-top:6px;font-size:13px;">
<li style="padding:4px 0;color:#666;">选择器优先级 <span style="color:#aaa;font-size:11px;">H3</span></li>
<li style="padding:4px 0;color:#666;">盒模型详解 <span style="color:#aaa;font-size:11px;">H3</span></li>
<li style="padding:4px 0;color:#666;">Flexbox 弹性布局 <span style="color:#aaa;font-size:11px;">H3</span></li>
<li style="padding:4px 0;color:#666;">Grid 网格布局 <span style="color:#aaa;font-size:11px;">H3</span></li>
</ol>
</li>
<li>
JavaScript 编程 <span class="level">H2</span>
<ol style="padding-left:20px;margin-top:6px;font-size:13px;">
<li style="padding:4px 0;color:#666;">变量与数据类型 <span style="color:#aaa;font-size:11px;">H3</span></li>
<li style="padding:4px 0;color:#666;">函数与作用域 <span style="color:#aaa;font-size:11px;">H3</span></li>
<li style="padding:4px 0;color:#666;">DOM 操作 <span style="color:#aaa;font-size:11px;">H3</span></li>
</ol>
</li>
<li>
响应式设计与移动适配 <span class="level">H2</span>
</li>
<li>
性能优化最佳实践 <span class="level">H2</span>
</li>
<li>
部署与上线流程 <span class="level">H2</span>
</li>
</ol>
</div>
<script>
function toggleNav(link) {
const li = link.parentElement;
const wasOpen = li.classList.contains('open');
// 关闭其他打开项
document.querySelectorAll('.nav-menu > li.open').forEach(el => {
if (el !== li) el.classList.remove('open');
});
// 切换当前项
li.classList.toggle('open', !wasOpen);
}
// 默认展开第一项
document.querySelector('.nav-menu > li:first-child')?.classList.add('open');
</script>
</body>
</html>html
<!DOCTYPE html>
<!--
来源：基础知识/3-列表.md
演示：步骤流程列表、图标列表、数据统计列表、时间线列表
-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>创意列表样式展示</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; padding: 30px; background: #f0f2f5; max-width: 900px; margin: 0 auto; }
h1 { color: #1a1a1a; margin-bottom: 25px; }
.card { background: white; padding: 24px; margin-bottom: 20px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
h2 { color: #2c3e50; font-size: 17px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid #ecf0f1; }
/* 步骤流程 */
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 40px; }
.steps::before {
content: ''; position: absolute; left: 17px; top: 24px; bottom: 24px;
width: 3px; background: linear-gradient(to bottom, #3498db, #27ae60);
}
.step-item {
position: relative; padding: 18px 20px; margin: 8px 0;
background: #f8f9fa; border-radius: 10px; border: 2px solid transparent;
transition: all 0.2s; counter-increment: step;
}
.step-item:hover { transform: translateX(6px); border-color: #3498db; background: #ebf5fb; }
.step-item::before {
content: counter(step); position: absolute; left: -33px; top: 18px;
width: 30px; height: 30px; background: linear-gradient(135deg, #3498db, #2980b9);
color: white; border-radius: 50%; display: flex; align-items: center;
justify-content: center; font-weight: bold; font-size: 13px; box-shadow: 0 2px 8px rgba(52,152,219,0.3);
}
.step-item.done::before { background: linear-gradient(135deg, #27ae60, #2ecc71); content: '✓'; }
.step-item.current::before { animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,152,219,0.4); } 50% { box-shadow: 0 0 0 8px rgba(52,152,219,0); } }
.step-title { font-weight: 700; font-size: 15px; color: #2c3e50; margin-bottom: 4px; }
.step-desc { font-size: 13px; color: #666; }
/* 图标列表 */
.icon-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 550px) { .icon-list { grid-template-columns: 1fr; } }
.icon-list li {
display: flex; align-items: center; gap: 14px; padding: 16px;
background: #fafbfc; border-radius: 10px; transition: all 0.2s;
border-left: 4px solid transparent;
}
.icon-list li:hover { background: #f0f4ff; border-left-color: #3498db; transform: translateX(4px); }
.icon-list .icon {
width: 44px; height: 44px; border-radius: 12px; display: flex;
align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
}
/* 统计列表 */
.stats-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat-card {
text-align: center; padding: 24px 16px; border-radius: 12px;
transition: transform 0.2s;
}
.stat-card:hover { transform: translateY(-4px); }
.stat-value { font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 13px; color: #888; margin-top: 4px; }
.stat-change { font-size: 12px; margin-top: 6px; font-weight: 600; }
.stat-change.up { color: #27ae60; }
.stat-change.down { color: #e74c3c; }
/* 时间线 */
.timeline { position: relative; padding-left: 36px; }
.timeline::before {
content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px;
width: 3px; background: linear-gradient(to bottom, #3498db, #9b59b6, #e74c3c);
border-radius: 2px;
}
.timeline-item { position: relative; padding: 16px 20px; margin: 16px 0; background: #f8f9fa; border-radius: 10px; }
.timeline-item::before {
content: ''; position: absolute; left: -29px; top: 22px;
width: 14px; height: 14px; border-radius: 50%; border: 3px solid white;
box-shadow: 0 0 0 2px #3498db; background: white;
}
.timeline-item:nth-child(2)::before { box-shadow: 0 0 0 2px #9b59b6; }
.timeline-item:nth-child(3)::before { box-shadow: 0 0 0 2px #e74c3c; }
.timeline-date { font-size: 12px; color: #888; font-weight: 600; margin-bottom: 4px; }
.timeline-title { font-weight: 700; font-size: 15px; color: #2c3e50; }
.timeline-desc { font-size: 13px; color: #666; margin-top: 4px; }
pre { background: #263238; color: #eceff1; padding: 14px; border-radius: 8px; overflow-x: auto; font-size: 12px; line-height: 1.6; }
</style>
</head>
<body>
<h1>💡 创意列表样式展示</h1>
<!-- ========== 步骤流程 ========== -->
<div class="card">
<h2>1. 步骤流程列表</h2>
<div class="steps">
<div class="step-item done">
<div class="step-title">需求分析与规划</div>
<div class="step-desc">确定项目范围、目标用户、核心功能和技术选型</div>
</div>
<div class="step-item done">
<div class="step-title">UI/UX 设计</div>
<div class="step-desc">绘制线框图、设计高保真原型、制定设计规范</div>
</div>
<div class="step-item current">
<div class="step-title">前端开发实现</div>
<div class="step-desc">编写 HTML 结构、CSS 样式、JavaScript 交互逻辑</div>
</div>
<div class="step-item">
<div class="step-title">测试与优化</div>
<div class="step-desc">功能测试、性能优化、浏览器兼容性处理</div>
</div>
<div class="step-item">
<div class="step-title">部署上线</div>
<div class="step-desc">CI/CD 流水线配置、域名解析、监控告警设置</div>
</div>
</div>
</div>
<!-- ========== 图标列表 ========== -->
<div class="card">
<h2>2. 图标特性列表</h2>
<ul class="icon-list">
<li>
<div class="icon" style="background:#e3f2fd;">⚡</div>
<div>
<div style="font-weight:600;font-size:14px;">极速加载</div>
<div style="font-size:12px;color:#888;">平均响应时间 < 100ms</div>
</div>
</li>
<li>
<div class="icon" style="background:#fce4ec;">🔒</div>
<div>
<div style="font-weight:600;font-size:14px;">安全可靠</div>
<div style="font-size:12px;color:#888;">端到端加密传输</div>
</div>
</li>
<li>
<div class="icon" style="background:#e8f5e9;">🌐</div>
<div>
<div style="font-weight:600;font-size:14px;">全球 CDN</div>
<div style="font-size:12px;color:#888;">200+ 边缘节点覆盖</div>
</div>
</li>
<li>
<div class="icon" style="background:#fff3e0;">📊</div>
<div>
<div style="font-weight:600;font-size:14px;">实时分析</div>
<div style="font-size:12px;color:#888;">毫秒级数据更新</div>
</div>
</li>
<li>
<div class="icon" style="background:#f3e5f5;">🎨</div>
<div>
<div style="font-weight:600;font-size:14px;">高度定制</div>
<div style="font-size:12px;color:#888;">支持自定义主题和组件</div>
</div>
</li>
<li>
<div class="icon" style="background:#e0f7fa;">🔄</div>
<div>
<div style="font-weight:600;font-size:14px;">自动同步</div>
<div style="font-size:12px;color:#888;">多端数据实时同步</div>
</div>
</li>
</ul>
</div>
<!-- ========== 数据统计列表 ========== -->
<div class="card">
<h2>3. 数据统计卡片列表</h2>
<div class="stats-list">
<div class="stat-card" style="background:linear-gradient(135deg,#ebf5fb,#d6eaf8);">
<div class="stat-value" style="color:#2980b9;">12,847</div>
<div class="stat-label">总访问量</div>
<div class="stat-change up">↑ 23.5% 较上月</div>
</div>
<div class="stat-card" style="background:linear-gradient(135deg,#eafaf1,#d5f5e3);">
<div class="stat-value" style="color:#27ae60;">3,256</div>
<div class="stat-label">活跃用户</div>
<div class="stat-change up">↑ 12.8% 较上月</div>
</div>
<div class="stat-card" style="background:linear-gradient(135deg,#fef5f5,#fee2e2);">
<div class="stat-value" style="color:#e74c3c;">89</div>
<div class="stat-label">待处理工单</div>
<div class="stat-change down">↓ 5.2% 较上月</div>
</div>
<div class="stat-card" style="background:linear-gradient(135deg,#fef9e7,#fcf3cf);">
<div class="stat-value" style="color:#f39c12;">99.9%</div>
<div class="stat-label">服务可用率</div>
<div class="stat-change up">↑ 0.1% 较上月</div>
</div>
<div class="stat-card" style="background:linear-gradient(135deg,#f3e5f5,#ead1dc);">
<div class="stat-value" style="color:#9b59b6;">1.2s</div>
<div class="stat-label">平均响应时间</div>
<div class="stat-change down">↑ 0.3s 较上月</div>
</div>
</div>
</div>
<!-- ========== 时间线列表 ========== -->
<div class="card">
<h2>4. 时间线列表</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-date">2024-01-15 · 项目启动</div>
<div class="timeline-title">🚀 项目立项与团队组建</div>
<div class="timeline-desc">完成需求评审，确定技术栈为 React + Node.js，团队扩充至 8 人。</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2024-02-01 · 需求冻结</div>
<div class="timeline-title">📋 需求规格说明书定稿</div>
<div class="timeline-desc">PRD v2.0 发布，所有功能点确认完毕，进入开发阶段。</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2024-04-15 · Alpha 版本</div>
<div class="timeline-title">🧪 内部测试版本发布</div>
<div class="timeline-desc">核心功能开发完成，开始内部 Alpha 测试，收集反馈并修复关键 bug。</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2024-06-01 · Beta 版本</div>
<div class="timeline-title">🌐 公开测试版上线</div>
<div class="timeline-desc">邀请 500 名种子用户参与 Beta 测试，持续迭代优化用户体验。</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2024-07-01 · 正式发布 🎉</div>
<div class="timeline-title">✨ 产品正式上线</div>
<div class="timeline-desc">经过 6 个月的开发与测试，产品正式面向所有用户发布！</div>
</div>
</div>
</div>
</body>
</html>