HTML列表须按语义选用：无序列表<ul>用于并列项，有序列表<ol>用于有逻辑顺序的内容，定义列表<dl>专用于术语与定义关系；错误使用会损害可访问性、SEO和可维护性。
HTML 列表不是视觉装饰工具，而是语义容器——选错类型，屏幕阅读器会读错、SEO 会降权、维护者会困惑。
什么时候该用 <ul> 而不是 <ol>
关键看内容是否存在逻辑先后或因果关系。比如「注册流程」写成 <ul>，屏幕阅读器只会读“项目1、项目2”，完全丢失“必须先填邮箱，再设密码，最后点提交”的执行顺序。
- 用
<ul>：导航菜单、产品特性罗列、标签云、同类并列项（如“支持 Chrome、Firefox、Safari”） - 用
<ol>：安装步骤、法律条款编号、排行榜、API 响应字段顺序说明 - 别硬套数字就用
<ol>：如果只是给列表项加个序号图美观（如「1. 首页 2. 关于」），仍该用<ul>+ CSS 计数器，否则语义污染
<dl> 不是“用来排两列”的替代表格
<dl> 的核心是「一对一或多对一的定义关系」，不是视觉布局手段。滥用它模拟表格或卡片，会导致辅助技术把术语当标题、描述当正文，结构彻底错乱。
- 正确场景：
<dt>是术语（如HTTP Status Code），<dd>是解释（如404 表示请求的资源未找到） - 禁止嵌套
<ul>或<ol>在<dd>里来“实现多行描述”——那说明你本该用<section>+ 多个<p> -
<dt>可以连续多个（如同义词），<dd>也可连续多个（如多段解释），但不能反过来
CSS 样式化时最容易破坏语义的三个操作
视觉效果不该以牺牲 HTML 结构为代价。以下操作看似方便，实则埋雷：
立即学习“前端免费学习笔记（深入）”；
- 用
list-style: none+display: flex改造<ul>导航后，忘记加role="navigation"或用<nav>包裹——屏幕阅读器无法识别这是导航区 - 为
<ol>设置counter-reset重置编号，却没同步更新aria-setsize和aria-posinset，导致读屏软件报出错误位置信息 - 用
float或position: absolute把<dt>和<dd>拉成水平排列，但未保证小屏下仍能按源顺序流式阅读（即<dt>必须在<dd>前渲染）
真正难的不是写出合法 HTML，而是在视觉需求和语义约束之间做取舍——比如设计师要「倒序显示排行榜」，reversed 属性可用，但若需跳号（如从第 3 名开始），就得用 start + value 组合，而不是删掉 <ol> 改用 <div>。这些细节，不测试读屏、不查 Lighthouse，根本看不见问题。
