应使用语义化列表标签：无序内容用，有序步骤用，条目必须为；避免模拟列表；CSS控制外观时拆解list-style属性；横向布局用flex；坚持原生标签保障可访问性。
用
堆砌
纯视觉排版倾向让人忽略 HTML 的语义价值。用 套 正确做法是：无序内容用
-
start 属性可设起始编号，比如
-
type 属性（如 type="square"）已不推荐，应交由 CSS 的 list-style-type 控制
- 嵌套列表时，
CSS 控制列表外观：绕开 list-style 的坑
list-style 是简写属性，容易误覆盖。比如写 list-style: none; 会同时清空类型、位置和图像，但有时你只想隐藏符号、保留缩进。
更稳妥的写法是拆解控制：
立即学习“前端免费学习笔记（深入）”；
- 去掉符号但保留缩进：
list-style-type: none; + padding-left: 1.5em;
- 用自定义图标替代默认符号：
list-style: none; + background-image: url("arrow.svg"); + padding-left: 24px; + background-position: left center;
-
list-style-position: inside 让文字换行后对齐符号，但可能破坏块级布局；outside（默认）更稳定
响应式列表排版：用 display: flex 替代浮动或 inline-block
横向排列列表项（如导航菜单、标签云）时，老方案用 float: left 或 display: inline-block，但都带清除浮动或空白符问题。
现代写法直接作用于
ul.horizontal {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
ul.horizontal li {
margin: 0;
}
-
gap 替代 margin 控制间距，避免首尾外溢
- 加
flex-wrap: wrap 保证小屏自动折行
- 务必重置
li 的默认 margin，否则 flex 下仍可能错位
可访问性关键点：别让 role="list" 欺骗自己
有人为自定义结构加 role="list"，以为能“模拟”语义。但若没配合同等语义的子元素（如 role="listitem"），或缺失键盘导航支持（Tab 键跳转、Enter 触发），反而干扰辅助技术。
真正要做的只有两件：
- 坚持用原生
- 若需点击交互，在
onclick
- 避免用
aria-hidden="true" 隐藏列表符号——屏幕阅读器靠的是结构，不是视觉符号
列表排版最易被忽略的，其实是语义与交互的耦合：一个看似简单的
纯视觉排版倾向让人忽略 HTML 的语义价值。用 正确做法是：无序内容用 更稳妥的写法是拆解控制： 立即学习“前端免费学习笔记（深入）”； 横向排列列表项（如导航菜单、标签云）时，老方案用 现代写法直接作用于 有人为自定义结构加 真正要做的只有两件： 列表排版最易被忽略的，其实是语义与交互的耦合：一个看似简单的 模拟列表，会导致屏幕阅读器无法识别层级、SEO 权重分散、CSS 维护成本飙升。
—— 浏览器默认有缩进、项目符号/编号，且天然支持 :first-child/:last-child/:nth-child 伪类。
start 属性可设起始编号，比如 type 属性（如 type="square"）已不推荐，应交由 CSS 的 list-style-type 控制 内直接跟 CSS 控制列表外观：绕开
list-style 的坑list-style 是简写属性，容易误覆盖。比如写 list-style: none; 会同时清空类型、位置和图像，但有时你只想隐藏符号、保留缩进。
list-style-type: none; + padding-left: 1.5em;
list-style: none; + background-image: url("arrow.svg"); + padding-left: 24px; + background-position: left center;
list-style-position: inside 让文字换行后对齐符号，但可能破坏块级布局；outside（默认）更稳定响应式列表排版：用
display: flex 替代浮动或 inline-blockfloat: left 或 display: inline-block，但都带清除浮动或空白符问题。ul.horizontal {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
ul.horizontal li {
margin: 0;
}
gap 替代 margin 控制间距，避免首尾外溢flex-wrap: wrap 保证小屏自动折行li 的默认 margin，否则 flex 下仍可能错位可访问性关键点：别让
role="list" 欺骗自己role="list"，以为能“模拟”语义。但若没配合同等语义的子元素（如 role="listitem"），或缺失键盘导航支持（Tab 键跳转、Enter 触发），反而干扰辅助技术。
，它们自带完整 ARIA 语义 内包裹 或 ，而非给 加 onclick
aria-hidden="true" 隐藏列表符号——屏幕阅读器靠的是结构，不是视觉符号，既是内容单元，也是焦点管理的基本粒度。改样式前，先确认它还在正确说话。
