语义正确的列表需按意图选用：无序列表用于无顺序依赖项（如菜单），有序列表用于有顺序项（如步骤）；嵌套时子列表须完整置于父内，中禁用等非法子元素。
怎么用 <ul></ul> 和 <ol></ol> 写出语义正确的列表
浏览器不关心你写的是 <ul></ul> 还是 <ol></ol>，但屏幕阅读器、SEO 爬虫和协作同事会在意。关键不是“能不能显示”，而是“是否表达了真实意图”。
无序列表 <ul></ul> 表示项目之间没有顺序依赖（比如菜单项、标签云）；有序列表 <ol></ol> 表示步骤、排名或时间先后（比如安装流程、排行榜）。别因为“看着都带点/数字”就混用。
-
<ul></ul>里只能直接放<li>，不能塞<p></p>或<div>（会触发 HTML5 的隐式闭合，导致结构错乱） <li> <code><ol></ol>支持start、reversed、type属性，但type="A"在部分旧 Android WebView 中失效，慎用于关键编号逻辑 - 嵌套时，子列表必须完整包裹在父
<li>内部，而不是跟在后面——否则语义断裂，辅助技术可能跳过子项 - 如果
<li>里有<button></button>或<a></a>，且它本身承担主要操作（比如“删除这项”），建议加role="listitem"显式声明，避免某些读屏器忽略父级<li> - 不要用
<li>模拟段落缩进——<p></p>+ CSStext-indent更准确；用列表假装排版，会让 AT 用户听到一堆无意义的“列表项 1”“列表项 2” -
<li>不支持value属性（那是<ol></ol>里才有的），写上去浏览器会忽略，别白费劲 - 用
list-style-type: none+ 自定义伪元素（::marker）能精细控制序号样式，但::marker在 Safari 15.4 之前不支持content动态值 - 如果彻底去掉编号（比如想让
<ol></ol>行为像<ul></ul>），别只靠 CSS，直接改标签为<ul></ul>——语义比样式优先 - 用
display: flex或display: grid布局<li>时，list-style仍生效，但位置可能错位；此时需配合list-style-position: inside或伪元素手动对齐 - 屏幕阅读器遇到
<nav><ul><li> <a></a> </li></ul></nav>结构，会主动播报“导航栏，列表，共 5 项”，用户可快速跳过整块区域；换成<div> 就只剩逐个读链接 <li>JavaScript 操作时，<code>document.querySelectorAll('nav ul li')比document.querySelectorAll('nav div a')更稳定——后者容易误选图标、文字等非导航子节点 - 某些 CMS 或静态站生成器（如 Jekyll 的
{% for item in site.nav %}）默认输出<ul></ul>，硬改成<div> 可能破坏模板逻辑 <p>真正容易被忽略的点：列表项之间的空格/换行在 HTML 中会被压缩成单个空格，如果用 inline-block 布局 <code><li>又没处理间隙，会出现意外的空白——这不是语义问题，但会干扰视觉对齐，得用font-size: 0或注释掉换行来解决。
<li> 里面能写什么？哪些内容会破坏可访问性
<li> 是流内容容器，合法内容很多，但常见误用是往里塞交互控件却不补语义。
CSS 重置 list-style 后，序号/符号还存在吗
设置 list-style: none 只是隐藏视觉符号，<ol></ol> 的计数逻辑、<ul></ul> 的语义层级依然保留。这对无障碍很关键——隐藏样式 ≠ 删除语义。
立即学习“前端免费学习笔记（深入）”；
