最稳妥的搜索结果区域HTML结构是用<main>包裹，每条结果用语义化<article>表示，标题用<h2>，摘要用<p>，链接用，且每个<article>需有唯一id或可被JS唯一定位。
搜索结果区域用什么 HTML 结构最稳妥？
直接用 <main> 包裹搜索结果列表，里面用语义化 <article> 表示每条结果，比用 <div> 堆砌更利于 SEO 和屏幕阅读器识别。标题用 <h2>（不是 <h1>，因为页面已有主标题），摘要用 <p>，链接用 <a> 并确保 href 可访问。
- 每个
<article>必须有独立的id或至少能被 JS 唯一定位，方便后续高亮或埋点 - 避免把整个结果列表塞进一个大
<div class="results">然后靠 JS 动态 innerHTML —— 初始 HTML 应该包含至少 1 条真实结果（哪怕只是示意），否则首屏无内容、Lighthouse 评分低、爬虫抓不到 - 如果后端不渲染，至少预留
<article class="skeleton">占位结构，CSS 控制骨架屏样式
如何让搜索框和结果联动又不刷新页面？
用原生 fetch() 调后端 API，监听 input 事件做防抖，提交时禁用搜索按钮并加 loading 状态。不要用 form 的默认 submit 行为，除非你真要整页跳转。
- 防抖必须自己实现，别依赖第三方库：用
setTimeout清上一次定时器，延迟 300ms 再发请求 - URL 参数要同步更新：调
history.pushState()把关键词写进search，这样用户刷新页面还能回到上次搜索 - 错误处理不能只 console.log：HTTP 错误或空响应时，清空结果区并显示
<p class="error">没找到相关内容</p>，而不是留着旧结果或空白
移动端搜索结果列表怎么避免文字挤成一团？
关键在三处 CSS 控制：
-
article设置margin-bottom: 1.5rem，不用padding，避免内边距干扰点击热区立即学习“前端免费学习笔记（深入）”；
标题行高设为
1.3，字体大小用rem（如1.125rem），不写死px摘要文字用
line-clamp: 2截断，但必须配display: -webkit-box和-webkit-line-clamp，仅靠text-overflow: ellipsis对多行无效不要用
min-height强制撑高每条结果 —— 内容长度不一才是常态，强行统一反而导致大量空白或溢出图标类元素（如 ? 或 ⚙️）统一用
inline-flex容器包裹，避免 baseline 对齐错乱所有可点击区域（包括标题、摘要外层）最小尺寸保证
44px × 44px，满足 iOS 触控规范
搜索关键词高亮容易漏掉哪些细节？
高亮不是简单 replace 字符串，得用正则全局匹配且忽略大小写，还要防止 HTML 标签被误替换。推荐先提取纯文本内容，再用 RegExp 构造动态模式，最后用 String.replace() 插入 <mark>。
- 正则需转义关键词中的特殊字符：
keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 替换前必须对原始 HTML 做
textContent提取，否则<span>foo</span>里的foo会被拆开替换，破坏结构 -
<mark>样式要重置背景色和颜色，例如background: #ffeb3b; color: #212121;，别依赖浏览器默认（有些系统会渲染成难读的黄底黑字）
搜索结果页真正的难点不在布局，而在状态同步：URL、输入框值、结果列表、加载态、错误提示，这五者必须严格一致。任意一个脱节，用户就可能点刷新丢结果、前进后退失效、或者看到“正在加载”却没请求发出。
