搜索框必须放在内，因其是HTML规范定义的唯一语义化页眉容器，承载站点标题、导航及搜索功能；放错位置会导致屏幕阅读器无法识别、SEO失败及无障碍错误。
搜索框加在哪儿才符合语义和可访问性？
直接塞进 <header></header> 里是最稳妥的选择，尤其当它属于全站导航的一部分。浏览器和屏幕阅读器会默认把 <header></header> 视为页面入口区域，放搜索框能被正确识别为“查找内容的主入口”。别用 <div class="search"> 包裹——它没有语义，搜索引擎和辅助工具无法理解它的用途。
<p>必须配 <code><label></label>，且 for 属性要严格匹配 <input> 的 id。不写 <label></label> 或仅靠 placeholder 提示，会导致屏幕阅读器跳过、移动端点击热区变小、SEO 权重丢失。
-
<input type="search">比type="text"更合适：原生支持清空按钮、历史记录下拉、iOS Safari 自动聚焦时隐藏键盘“搜索”键 - 给
<form></form>加role="search"，进一步向辅助技术声明意图 - 如果搜索框只用于前端过滤（比如 JS 动态筛选本地列表），
action可设为"#"，但必须保留method="get"，否则部分旧 Android 浏览器会忽略回车提交
纯前端站内搜索怎么避免“搜不到”？
所谓“站内搜索”，如果没后端服务，实际就是用 JavaScript 在当前页面或预加载的 JSON 数据里做字符串匹配。常见失效原因不是代码写错，而是数据源没对齐：
- 只搜
<h1></h1>和<p></p>文本？漏掉了<section></section>里的<h2></h2>或<article></article>标题——得统一提取所有语义化标题和正文节点的textContent - 大小写敏感导致“Vue”搜不出“vue”？用
.toLowerCase()统一处理比对，但注意别改原始数据，否则影响高亮定位 - 中文分词没做，搜“响应式布局”匹配不到“响应式”+“布局”两个独立词？简单方案是用
includes()做子串匹配；进阶可引入segmentit类库，但模板项目里通常没必要 - 搜索结果没做防抖，用户每按一个键都触发全量遍历？加
setTimeout+clearTimeout控制，延迟 300ms 再执行，体验立刻不同
HTML原生搜索框为什么点回车没反应？
最常被忽略的是表单缺少 <button type="submit"></button> 或等效触发机制。浏览器只认 <form></form> 内的 submit 行为，光有 <input> 不够。
立即学习“前端免费学习笔记（深入）”；
检查这三点：
-
<form></form>标签是否闭合？未闭合会导致整个后续 DOM 被吞进 form 里，JS 获取元素失败 -
<input>是否在<form></form>内部？哪怕只是视觉上“看起来在里面”，DOM 结构错位也会让回车失效 - 有没有其他 JS 拦截了
submit事件但没调用event.preventDefault()？比如某个轮播图脚本监听了全局keydown，误杀了回车事件
快速验证法：临时删掉所有 JS，只留 HTML + CSS，点回车看是否刷新页面（说明 form 基础行为正常）；再逐个加回 JS 文件定位冲突源。
移动端搜索框适配要注意什么？
不是加个 width: 100% 就完事。iOS Safari 和 Chrome on Android 对 type="search" 的渲染逻辑不同，容易出现输入框被虚拟键盘顶起、焦点丢失、缩放异常等问题。
- 强制禁用缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">中的user-scalable=no必须加上，否则双击放大后搜索框可能错位 - 输入框高度至少
44px：这是 iOS 可触摸最小热区标准，小于这个值点击成功率骤降 - 不要用
position: fixed把搜索框钉在顶部：滚动时容易触发 iOS 的“粘滞 header”bug，导致输入框悬空或消失；改用position: sticky+top: 0更可靠 - placeholder 文字颜色太浅？iOS 默认是灰色，跟背景色接近，用
::-webkit-input-placeholder { color: #666; }显式定义
真正麻烦的从来不是“怎么加搜索框”，而是“加完之后用户能不能在 iPhone 上单手稳稳点中、输完回车、看到结果”。这些细节不压测到真机，光在 Chrome DevTools 里切设备模式是发现不了的。
