搜索结果页应使用语义化的结构而非，显式重置样式、合理包裹标签、预留空状态与加载态占位符，并确保键盘导航支持。
搜索结果页不是把数据堆上去就行，关键得让结果可读、可操作、能快速定位。用 <ul></ul> + <li> 做列表结构最稳妥，语义清晰、默认缩进合理、适配屏幕阅读器，比纯 <div> 堆砌强得多。
<h3>为什么不用 div 做搜索结果列表</h3>
<p>很多人一上来就写一堆 <code><div class="result-item">，看着自由，实际埋了三个坑：
<ul><li><code><div> 没有语义，对辅助技术不友好，搜索引擎也难识别这是“结果集合”
<li>浏览器默认会给 <code><ul></ul> 加上下间距和缩进，而 <div> 什么都没有，反而要手动补 <code>margin、padding、list-style 重置
<ul></ul> 配合 display: flex 或 grid 更自然，比如移动端单列、桌面端双列，改一行 flex-wrap 就行，<div> 得额外加 wrapper 或 JS 控制
<h3>ul + li 的基础结构怎么写才不翻车</h3>
<p>别直接套默认样式——浏览器对 <code><ul></ul> 的 margin 和 padding 不统一，老版本 IE 还会多出 40px 左右的左侧内边距。必须显式归零：
ul#result-list {
list-style: none;
margin: 0;
padding: 0;
}
#result-list li {
padding: 12px 16px;
border-bottom: 1px solid #eee;
}
- 一定要给
<ul></ul>设id或class，避免全局污染（比如重置了所有<ul></ul>，导航菜单也跟着变形） -
border-bottom比margin-bottom更稳：最后一项不想要下边框？加个:last-child { border-bottom: none; } - 别用
float: left让<li>横排——搜索结果是垂直流式结构，横排属于导航或网格场景，混淆语义
点击结果跳转时，a 标签该包在哪一层
用户点的是整条结果，不是只点标题或链接文字。正确做法是把 <a></a> 当容器用，而不是塞在 <li> 里再套一层 <div>：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<pre class='brush:php;toolbar:false;'><ul id="result-list">
<li><a href="/item/123"><h3>苹果</h3><p>一种常见水果，富含维生素C</p></a></li>
<li><a href="/item/456"><h3>香蕉</h3><p>热带水果，钾含量高</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></a></li>
</ul>
</pre>
<ul>
<li>
<code><a></a> 直接包裹整个 <li> 内容，既符合语义（一条结果 = 一个可跳转目标），又省去 JS 绑定 click 事件的麻烦
<li>
<h3><a>苹果</a></h3>
<p>...</p>
</li> —— 这会让焦点分散，键盘用户 tab 切换时要按两次才能跳到下一项<a></a> 外部，用 aria-label 注明用途，避免跟主跳转冲突空状态和加载态不能靠 JS 硬塞 DOM
搜索没结果或正在请求时，页面不能留白或卡死。提前在 HTML 里预留占位节点，CSS 控制显隐更可靠：
<ul id="result-list"></ul> <div id="no-result" class="hidden">没找到匹配项</div> <div id="loading" class="hidden">搜索中…</div>
- 初始状态设
display: none或visibility: hidden，JS 只需切 class，不操作 innerHTML，避免 XSS 风险 - 别在 JS 里拼接
"<li>没结果</li>"插进去——这不是列表项，是状态提示，语义错乱 - 加载动画建议用 CSS 实现（比如
border: 2px solid #f3f3f3+border-top: 2px solid #007bff+animation: spin 1s linear infinite），减少对第三方库依赖
真正容易被忽略的是键盘导航支持：搜索结果页必须能用 Tab 键顺序聚焦每条 <a></a>，Enter 触发跳转，Escape 清空输入框并收起结果。这一步没做，再漂亮的布局也算半残。
