搜索页需语义分离入口与出口，采用form+ul结构并用aria-live等属性保障无障碍；双栏指功能分区而非视觉分栏；结果项应整行可点击；空/加载态须用真实DOM占位。
搜索框与结果列表必须语义分离
搜索页不是“一个输入框+一堆div”，而是两个明确角色：触发入口（form或带role="search"的容器）和结果出口（ul#result-list）。混在一起会导致键盘导航跳过结果、屏幕阅读器无法 announce 新内容、JS 重绘时焦点丢失。
常见错误是把 input 和 ul 套进同一个 div class="search-container" 后，再用 CSS 强行并排——这会让语义断裂。正确结构应为：
<form role="search"> <input type="search" aria-label="搜索关键词" /> </form> <ul id="result-list" aria-live="polite" aria-busy="false"></ul>
aria-live="polite" 是关键：结果动态插入时，屏幕阅读器会读出新增项；aria-busy 可在加载中设为 true，暂停播报。
双栏搜索页 ≠ 左右并列两个 div
所谓“双栏搜索页”，实际指「搜索操作区 + 结果展示区」在桌面端横向并置、移动端纵向堆叠。这不是视觉分栏，而是功能分区。强行用 grid-template-columns: 20% 80% 去套整个页面，会把搜索框压窄、让结果列表失去流式高度，反而破坏可用性。
立即学习“前端免费学习笔记（深入）”；
推荐布局方式：
- 外层用
display: grid，定义两行三列：顶部搜索栏跨满第一行，结果列表在第二行左侧占主宽，右侧留空或放筛选面板（如需） - 结果列表本身仍保持垂直
ul流式结构，不拆成左右两列——搜索结果天然是线性序列，不是网格卡片 - 如果真要“双栏结果”（比如每行显示两条摘要），用
ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }，但仅限于#result-list内部，不影响整体结构语义
结果项点击区域必须包裹整条 li，不能只包 a
用户习惯点整条结果行，而不是只点标题文字。若写成：
<li>
<h3><a href="/item/1">苹果</a></h3>
<p>一种常见水果...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</li>会导致 tab 键聚焦两次才能跳到下一项，且鼠标悬停样式难统一。
正确做法是把 a 提升为块级容器：
<li>
<a href="/item/1">
<h3>苹果</h3>
<p>一种常见水果...</p>
</a>
</li>同时加 CSS：a { display: block; padding: 12px 16px; }。这样既满足语义（一条结果 = 一个可跳转目标），又避免 JS 绑定 click 的冗余逻辑。
空状态、加载态、无结果必须用真实 DOM 占位
别等 JS 渲染完才插入 <li class="empty">没找到相关结果</li>。这些状态应作为初始 HTML 的一部分存在，仅靠 class 切换显隐：
<ul id="result-list"> <li class="loading" hidden>正在搜索...</li> <li class="empty" hidden>没找到相关结果</li> <!-- 动态插入的真实结果项将出现在这里 --> </ul>
JS 加载时只需：document.querySelector('.loading').hidden = false，完成后 .hidden = true 并插入真实 li。这样 SSR 友好、SEO 可见、无障碍设备能提前感知结构。
容易被忽略的是：移动端切换单栏时，ul 的 grid 布局可能让 .loading 和 .empty 被挤到右侧——必须确保它们也参与 grid flow，或改用 flex-direction: column 控制主轴，而非依赖列数硬编码。
