语义上必须用ol——搜索结果有天然顺序，ul会丢失含义；应重置默认编号，标题用h3，URL用cite，摘要用p或div；li用margin-bottom间距，加aria-label="搜索结果"提升可访问性。
搜索结果列表用 ul 还是 ol？
语义上必须用 ol——搜索结果有天然顺序（相关性、时间、权重），ul 会丢失这一层含义，影响可访问性和 SEO。浏览器默认的 ol 编号（1. 2. 3.）在搜索页里反而干扰视觉，所以得重置。
实操建议：
- 用
ol包裹每条结果，不改语义 - 加 CSS 清除默认序号：
ol { list-style: none; padding: 0; margin: 0; } - 若需视觉编号（比如调试或特殊 UI），用
::before伪元素控制，避免破坏语义
li 里怎么组织标题、摘要和 URL？
结构要兼顾机器解析和人眼扫描。标题必须是 h3（不能降级为 div 或 span），URL 用 cite 标签（HTML5 明确指定用于引用来源），摘要用 p 或 div 均可，但别嵌套标题。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 把 URL 写成普通
span，导致屏幕阅读器无法识别其语义 - 标题用
strong代替h3，破坏文档大纲 - 摘要里塞
h4或em，干扰结果块的层级一致性
最小可用结构示例：
<ol>
<li>
<h3><a href="https://example.com">页面标题</a></h3>
<cite>https://example.com</cite>
<p>这是简短的摘要文字，不超过两行，避免换行错位。</p>
</li>
</ol>
如何让结果项之间有合理间距又不破坏流式布局？
用 margin-bottom 而非 padding-bottom 给 li 加间隙——前者不影响内部盒模型，后者会让点击热区变大且易与下一项重叠；同时给最后一项设 margin-bottom: 0，避免底部多余空白。
关键细节：
- 避免用
br或空div分隔，破坏语义和响应性 - 移动端需限制
li的最大宽度，防止长 URL 撑破容器：max-width: 100%; word-break: break-all; - 如果结果带图标（如 favicon），用
display: flex对齐，别依赖float或负 margin
为什么 search 角色和 aria-label 不能省？
仅靠 HTML 标签不够。辅助技术需要明确知道这个列表是“搜索结果”，否则可能读作“一段列表”，失去上下文。加 role="search" 到外层容器（如 section）是冗余的——ol 本身无此角色，真正该加的是 aria-label="搜索结果" 到 ol 上。
容易被忽略的点：
-
aria-label必须用中文（当前页面语言），不能留空或写英文 - 不要给每个
li单独加role="result"，没标准支持，纯属干扰 - 若结果动态加载，需用
aria-live="polite"包裹整个ol，否则新增结果不会被朗读
排版再干净，缺了这些，对部分用户就是不可用的。
