应使用语义化列表标签：无序内容用，有序步骤用，条目必须为；避免模拟列表；css控制外观时拆解list-style属性；横向布局用flex；坚持原生标签保障可访问性。
用 <ul></ul> 和 <ol></ol> 做语义化列表，别再只用 <div> 堆砌
<p>纯视觉排版倾向让人忽略 HTML 的语义价值。用 <code><div> 套 <code><span></span> 模拟列表，会导致屏幕阅读器无法识别层级、SEO 权重分散、CSS 维护成本飙升。
正确做法是：无序内容用 <ul></ul>，有序步骤或排名用 <ol></ol>，每个条目必须是 <li> —— 浏览器默认有缩进、项目符号/编号，且天然支持 :first-child/:last-child/:nth-child 伪类。
-
<ol></ol>的start属性可设起始编号，比如<ol start="5"></ol> -
<ul></ul>的type属性（如type="square"）已不推荐，应交由 CSS 的list-style-type控制 - 嵌套列表时，
<li>内直接跟<ul></ul>或<ol></ol>，无需额外容器
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></ul>：
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 触发），反而干扰辅助技术。
真正要做的只有两件：
- 坚持用原生
<ul></ul>/<ol></ol>/<li>，它们自带完整 ARIA 语义 - 若需点击交互，在
<li>内包裹<a></a>或<button></button>，而非给<li>加onclick - 避免用
aria-hidden="true"隐藏列表符号——屏幕阅读器靠的是结构，不是视觉符号
列表排版最易被忽略的，其实是语义与交互的耦合：一个看似简单的 <li>，既是内容单元，也是焦点管理的基本粒度。改样式前，先确认它还在正确说话。
