HTML5原生列表仅含、、三类，分别用于无序、有序和定义列表；支持start和reversed属性实现跳号与倒序；须严格遵循配对规则；CSS模拟列表会破坏语义与可访问性。
HTML5 里只有 <ul></ul>、<ol></ol>、<dl></dl> 这三种原生列表
没有 <li> 单独成列表，也没有 <menu></menu>（已废弃）、<dir></dir>（早已移除）这些“伪列表”。浏览器只认这三类语义结构，其他都是靠 CSS 模拟的视觉效果。
常见错误是把 <div> 套 <code><span></span> 加样式当“自定义列表”用，结果屏幕阅读器读不出层级，SEO 也抓不到结构信息。
-
<ul></ul>：无序列表，项目符号由 CSS 的list-style-type控制（如disc、circle、none） -
<ol></ol>：有序列表，编号类型可设type="1"（数字）、type="a"（小写字母）、type="i"（小写罗马）等 -
<dl></dl>：定义列表，必须成对出现<dt></dt>（术语）和<dd></dd>（定义），一个<dt></dt>可对应多个<dd></dd>，但不能反过来
<ol></ol> 的 start 和 reversed 属性容易被忽略
很多人以为 <ol></ol> 只能从 1 开始正向编号，其实它支持跳号和倒序。比如做错题解析时，想让第 5 题直接显示 “5.”，不用手动写 <li value="5"> —— 直接用 start 更干净。
倒序常用于排行榜或时间线回溯场景，但要注意：IE 完全不支持 reversed，如果兼容性要求高，得用 JS 补位或改用 CSS 计数器。
立即学习“前端免费学习笔记（深入）”；
-
start="3"→ 列表第一项显示为 “3.”，后续自动递增 -
reversed（布尔属性）→ 编号从大到小，如<ol reversed> <li>A</li> <li>B</li> </ol>渲染为 “2. A / 1. B” -
value属性可作用于单个<li>，会重置后续编号起点，慎用，容易导致逻辑混乱
<dl></dl> 不是“随便放 dt dd 就行”，结构错乱会导致语义失效
很多开发者把 <dl></dl> 当成“两列布局容器”，塞一堆 <dt></dt> 再一堆 <dd></dd>，结果 HTML 验证器报错，辅助技术也无法正确关联术语和定义。
关键规则就两条：每个 <dd></dd> 必须紧跟在至少一个 <dt></dt> 后面；多个 <dd></dd> 可共享一个 <dt></dt>，但不能跨 <dt></dt> 界限。
- ✅ 正确：
<dt>HTTP</dt> <dd>超文本传输协议</dd> <dd>基于 TCP</dd> - ❌ 错误：
<dt>HTTP</dt> <dt>HTTPS</dt> <dd>安全版本</dd>（第二个<dt></dt>没配<dd></dd>） - ⚠️ 注意：
<dl></dl>里混用<div> 或 <code><p></p>会破坏语义，想换行用 CSS，别动结构用 CSS 自定义列表符号时，
list-style-image和::marker的兼容性差异想换图标或特殊符号？老办法是
list-style-image，但只支持图片，且无法控制大小/颜色，还容易因路径错误静默失败。现代方案是::marker伪元素，能直接设content、color、font-size，但 Safari 15.4 之前不支持。-
list-style-image: url("arrow.svg");→ 所有主流浏览器都支持，但 SVG 图标在缩放时可能模糊，且无法动态着色 -
li::marker { content: "→ "; color: #007acc; }→ Chrome/Firefox/Edge 支持良好，Safari 需 15.4+，旧版只能降级用list-style-type - 不要在
<ul></ul>上设list-style: none后再用::before模拟标记——这会让屏幕阅读器完全忽略列表结构
真正难的不是怎么写，是判断什么时候该用语义列表、什么时候该用
<div> + ARIA。比如导航菜单、分页组件，看着像列表，但语义上属于交互控件，优先用 <code><nav></nav>或<section role="navigation"></section>，而不是硬套<ol></ol>。 -
