搜索聚合页必须用<main>包裹核心内容，内部首层为带role="search"的<form>，method="get"且action为空，搜索框name="q"，按钮type="submit"，结果用<ol><li>结构，SEO需动态更新title、description和canonical。
搜索聚合页该用什么HTML结构
必须用 <main> 包裹核心内容区，不能用 <div id="container"> 或裸 <section> 代替。搜索引擎和辅助工具靠这个语义识别“这里是用户真正要找的东西”。<main> 内部第一层应是 <form>（带 role="search"），而不是先放一堆 <h2> 或广告位。
-
<form>必须有method="get"和action=""（空 action 表示提交到当前页），否则点击回车无法触发页面内搜索 - 搜索框
<input type="search">要加name="q"—— 这是 URL 参数名，也是后端或 JS 读取关键词的默认约定 - 别把搜索按钮写成
<button>搜索</button>，必须是<button type="submit">，否则在部分 iOS Safari 上不响应回车 - 如果聚合页要支持历史记录或建议词，
<input>需加autocomplete="off"，否则浏览器会覆盖你自己的下拉逻辑
如何让搜索结果不跳转、只局部刷新
纯静态页做不到真正的“无刷新”，但可以用 location.hash + history.replaceState() 模拟。关键不是防跳转，而是让 URL 可分享、可回退、SEO 友好。
- 提交时阻止默认行为：
event.preventDefault()，然后手动拼接location.hash = "#q=xxx" - 监听
hashchange事件，在回调里解析location.hash中的q=值，再用 JS 渲染结果列表 - 结果列表必须用
<ol>包裹，每项是<li>，不能用<div class="result">—— 屏幕阅读器靠这个识别结果数量和顺序 - 每个结果链接的
href应为真实目标地址（比如https://example.com/article?id=123），不是#，否则用户右键“在新标签页打开”会失效
聚合页的 SEO 关键标签怎么写
静态页没有服务端渲染，所以 <title> 和 <meta name="description"> 必须能动态更新。不能只靠初始 HTML 里的固定值。
- 初始
<title>写成 “搜索聚合页 - 站点名”，JS 搜索后立即改写为 “关于‘AI写作’的12个来源 - 站点名” -
<meta name="description">同理，初始留空或写通用描述，搜索后注入匹配摘要，长度控制在155字符内 - 不要在
<head>里硬编码<link rel="canonical">，它应随搜索词变化：<link rel="canonical" href="/search#q=xxx"> - 每个结果项里，
<h3>标题必须用<a>包裹，且<a>的文本要和目标页<h1>高度一致 —— 这是 Google 判定内容相关性的基础信号
为什么本地双击打开会搜不到结果
因为浏览器安全策略禁止 file:// 协议下的 XMLHttpRequest 和 fetch()。所有依赖外部 JSON 数据源的搜索逻辑，在本地直接双击 index.html 时必然失败。
立即学习“前端免费学习笔记（深入）”；
- 解决办法只有两个：① 用 Python/Node 启一个本地 HTTP 服务（
python3 -m http.server）；② 把数据直接内联进 HTML，用<script type="application/json">存在页面里 - 内联数据时，
<script>标签必须加id="search-data"，JS 通过document.getElementById('search-data').textContent读取，避免执行风险 - 别信“加
--allow-file-access-from-files启动 Chrome 就行”——这个 flag 已被废弃多年，新版 Chrome 完全无视 - 测试阶段就上传到 GitHub Pages 或 Vercel，比折腾本地环境更省时间
静态搜索聚合页最难的不是写代码，是让每一次关键词输入都对应一个可抓取、可回退、可朗读的 URL 状态。很多人卡在“搜完页面没变”，其实是没意识到 hashchange 和 title 更新这两步缺一不可。
