搜索结果页需语义化结构、可访问设计与响应式交互：用列表包裹项，标题+摘要截断两行，无固定高，留空态/加载态/错误反馈，URL同步并安全高亮关键词，触控热区≥44px。
用语义化列表组织结果项
每条结果必须包裹在 `- ` 显式声明。不要用 `
-
正在搜索…
- ` 的点击热区）最小尺寸不低于 `44px × 44px`，满足触控规范；图标类元素统一用 `inline-flex` 包裹，防止 baseline 错位。
` 堆砌 —— `
- ` 天然表达“集合”，对屏幕阅读器友好，也方便键盘 tab 导航连续跳转。`` 标签应直接包裹标题和摘要，确保整行可点击，避免焦点分散。
标题与摘要的层级和样式要点
标题统一用 `
`（不是 ``，页面主标题已占位），字体大小建议 `1.125rem`，行高 `1.3`；摘要用 `
`，配合 `-webkit-box` + `-webkit-line-clamp: 2` 截断两行，不能只靠 `text-overflow: ellipsis`。
每条结果外层不设固定高度或 `min-height` —— 内容长度天然不同，强行拉齐反而导致空白或溢出。垂直间距靠 `margin-bottom: 1.5rem` 或 `border-bottom` 控制，更稳定。
立即学习“前端免费学习笔记（深入）”；
空状态、加载态与错误反馈要写进初始 HTML
首屏不能空白。哪怕后端不渲染，也要预留结构：
HTTP 请求失败或无结果时，清空列表并插入：
没找到相关内容
别只 `console.log` 错误，用户需要明确反馈。
URL 同步与高亮需兼顾安全与可读
用户输入关键词后，用 `history.pushState()` 更新地址栏 search 参数，保证刷新不丢上下文。高亮匹配词时，先对关键词做正则转义（如 `keyword.replace(/[.*+?^${}()|[]\]/g, '\$&')`），再基于纯文本内容构造 ``，避免误替换 HTML 标签内的字符。
所有可点击区域（包括整条 `
