HTML列表应使用语义化标签和，而非CSS实现；判断依据是内容是否存在固有次序：用于有序场景（步骤、排名、时间线），用于并列关系；必须嵌套在或内，禁止裸放；样式应通过CSS控制，避免废弃的HTML属性；需兼顾无障碍与SEO，确保语义准确。
HTML 列表不是靠 CSS 实现的，而是用原生语义化标签：<ol></ol> 和 <ul></ul>。用错标签或嵌套不当，会导致语义丢失、屏幕阅读器误读、SEO 减分，甚至影响后续 CSS 选择器的精准控制。
用 <ol></ol> 还是 <ul></ul>？看内容是否有逻辑顺序
关键判断依据不是“要不要编号”，而是“项与项之间是否存在固有次序”：
-
<ol></ol>：适合步骤（如安装流程）、排名（如 Top 5）、时间线（如版本更新日志）——浏览器默认渲染为 1. 2. 3.，但序号可被type或 CSScounter-reset修改 -
<ul></ul>：适合并列关系（如导航菜单、功能特性列表、标签集合）——默认用圆点●，但本质是“无序”，不是“不能编号” - 别为了视觉编号硬套
<ol></ol>：比如“热门城市：北京、上海、广州”，城市间无先后，该用<ul></ul>+ CSS 自定义标记
<li> 必须直接嵌套在 <ol></ol> 或 <ul></ul> 内，不能裸放
常见错误是把 <li> 直接写在 或 <div> 下，浏览器会自动纠错（补上隐式 <code><ul></ul>），但 DOM 结构不可控，CSS 选择器可能失效：
<!-- ❌ 错误：li 没有父级列表容器 --> <li>首页</li> <li>关于</li> <p><!-- ✅ 正确：li 只出现在 ol/ul 内部 --> <ul> <li>首页</li> <li>关于</li> </ul>
注意：<li> 支持嵌套，但子列表必须包在父 <li> 内部，而非同级：
立即学习“前端免费学习笔记（深入）”；
<ul>
<li>前端技术
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>后端技术</li>
</ul>自定义列表样式时，优先用 CSS 而非 HTML 属性
<ol></ol> 的 type（如 type="A"）、start（如 start="3"）和 <ul></ul> 的 type（如 type="square"）已废弃或兼容性差（尤其 type 在 <ul></ul> 中被现代浏览器忽略）：
- 用 CSS
list-style-type替代：ul { list-style-type: square; } - 用
counter-reset/counter-increment精确控制<ol></ol>编号逻辑，比如跳过某项、多级编号对齐 - 彻底隐藏默认标记用
list-style: none，再用::before伪元素+背景图或 Unicode 字符实现定制图标
无障碍与 SEO 容易被忽略的细节
仅靠视觉样式无法传达列表结构。辅助技术依赖 HTML 语义：
- 别用
<div> + <code><p></p>模拟列表——屏幕阅读器不会宣布“这是一个包含 3 项的列表” - 长列表建议加
<h3></h3>标题，并用aria-labelledby关联（如<ul aria-labelledby="list-title"></ul>） -
<ol></ol>的reversed属性（倒序编号）支持有限，且语义模糊，慎用；如需倒序展示，建议后端/JS 控制数据顺序，保持 HTML 自然序
