用于无序内容（如菜单、标签），用于有序场景（如步骤、排名）；语义决定可访问性，非视觉样式；可嵌套任意流内容但不可直接含；支持start和reversed属性；css需避免破坏列表结构与无障碍体验。
怎么用 <ul></ul> 和 <ol></ol> 区分语义场景
无序列表 <ul></ul> 表示项目之间没有顺序依赖，比如菜单项、标签云、功能点罗列；有序列表 <ol></ol> 表示步骤、排名、时间线等有明确先后关系的内容。浏览器默认渲染时 <ol></ol> 会用数字编号，<ul></ul> 用圆点，但别靠视觉判断——搜索引擎和读屏软件依赖的是语义，不是样式。
常见误用：把导航菜单写成 <ol></ol>（除非你真在表达“第一步首页、第二步产品、第三步联系我们”这种流程）；或把考试得分排行榜写成 <ul></ul>（丢失了名次信息）。
- 表单校验错误提示列表 → 用
<ul></ul>（无顺序） - 安装指南的 5 个步骤 → 必须用
<ol></ol> - 同一页面多个列表 → 每个都独立包裹在自己的
<ul></ul>或<ol></ol>中，不要复用一个父标签
<li> 里能放什么？嵌套和换行要注意什么
<li> 是唯一合法的 <ul></ul> / <ol></ol> 直接子元素，但它内部可以包含几乎任何流内容：文字、链接、图片、段落，甚至另一个列表（嵌套）。但注意两点：
- 不能把
<div> 直接塞进 <code><ul></ul>或<ol></ol>—— 浏览器会自动容错修正，但 HTML 验证失败，且可能影响可访问性 - 如果
<li>里需要多段文字，用<p></p>包裹，别靠<br>换行；否则屏幕阅读器可能把整块当一句话读 - 嵌套列表要缩进书写（非必需但强烈建议），例如：
- 一级项
- 二级项
- 一级项
-
start="3"：列表第一项显示为 “3.”，后续依次递增 -
reversed：配合start更可控，比如<ol start="5" reversed></ol>会显示 5. 4. 3. 2. 1. - 注意：CSS 的
counter-reset可以实现更复杂的编号逻辑（如字母、罗马数字），但原生 HTML 属性更轻量、兼容性更好 - 浏览器默认给
<ul></ul>/<ol></ol>设了上下 margin 和左侧 padding，清空时建议保留padding-left（用于缩进）或用list-style-position: inside控制标记位置 - 避免对
<li>设置float或display: inline-block后忘记清除浮动/处理空白符——改用display: flex在<ul></ul>上更稳妥 - 用
list-style: none去掉标记后，若未手动添加图标或序号，视觉上会丢失层级感，需用伪元素::before补充
怎么让 <ol></ol> 从指定数字开始或反向编号
默认 <ol></ol> 从 1 开始，但可以用 start 属性改起始值，用 reversed 属性倒序（9→8→7…）。这两个属性只对 <ol></ol> 有效，<ul></ul> 不支持。
为什么列表渲染异常？常见 CSS 干扰点
列表本身语义清晰，但样式一加就容易出问题。最典型的是重置 margin 或 padding 导致项目挤在一起，或者用 display: flex 直接作用于 <ul></ul> 破坏默认布局流。
真正难的不是写对标签，而是每次加样式前先问一句：这个改动会不会让屏幕阅读器用户听不出这是列表？
