语义上必须用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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</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，否则新增结果不会被朗读
排版再干净，缺了这些，对部分用户就是不可用的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
