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