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