搜索结果页需语义化结构、可访问设计与响应式交互：用列表包裹项，标题+摘要截断两行，无固定高，留空态/加载态/错误反馈，url同步并安全高亮关键词，触控热区≥44px。

搜索结果页的核心是让内容可读、可定位、可访问。结构不是越复杂越好，而是要贴合语义逻辑和用户操作路径。

用语义化列表组织结果项

• 苹果

  一种常见水果，富含维生素C，适合日常补充膳食纤维。

• 香蕉

  热带水果，钾含量高，运动后补充电解质的理想选择。

每条结果必须包裹在 `

` 中，整个列表用 `

` 显式声明。不要用 `
` 堆砌 —— `
` 天然表达“集合”，对屏幕阅读器友好，也方便键盘 tab 导航连续跳转。`` 标签应直接包裹标题和摘要，确保整行可点击，避免焦点分散。

标题与摘要的层级和样式要点

标题统一用 `

`（不是 `

`，页面主标题已占位），字体大小建议 `1.125rem`，行高 `1.3`；摘要用 `

`，配合 `-webkit-box` + `-webkit-line-clamp: 2` 截断两行，不能只靠 `text-overflow: ellipsis`。

每条结果外层不设固定高度或 `min-height` —— 内容长度天然不同，强行拉齐反而导致空白或溢出。垂直间距靠 `margin-bottom: 1.5rem` 或 `border-bottom` 控制，更稳定。

空状态、加载态与错误反馈要写进初始 HTML

首屏不能空白。哪怕后端不渲染，也要预留结构：


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载

• 正在搜索…

HTTP 请求失败或无结果时，清空列表并插入：

没找到相关内容

别只 `console.log` 错误，用户需要明确反馈。

URL 同步与高亮需兼顾安全与可读

用户输入关键词后，用 `history.pushState()` 更新地址栏 search 参数，保证刷新不丢上下文。高亮匹配词时，先对关键词做正则转义（如 `keyword.replace(/[.*+?^${}()|[]\]/g, '\$&')`），再基于纯文本内容构造 ``，避免误替换 HTML 标签内的字符。

所有可点击区域（包括整条 `

• ` 的点击热区）最小尺寸不低于 `44px × 44px`，满足触控规范；图标类元素统一用 `inline-flex` 包裹，防止 baseline 错位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！