～

，否则语义失效

只放<img>和<form></form>进去，没有标题元素，<header></header>就等于没说清楚“这是什么的头部”。屏幕阅读器会跳过，SEO 也收不到结构信号。

<header><img src="logo.svg" alt="我的网站"><form><input type="search"></form></header> ❌ 缺少标题，语义断裂
<header><h1>我的网站</h1> <img src="logo.svg" alt="我的网站"><form><input type="search"></form></header> ✅ 标题明确，logo 和搜索框作为辅助引导内容合理存在
如果 logo 图片本身含文字（比如 SVG 内嵌文本），且视觉上就是主标题，可用 <h1><img src="logo.svg" alt="我的网站"></h1>，但 alt 值仍需准确描述标题内容

搜索框要用`<form></form>`包裹，别只用`<input type="search">`

<input type="search"> 单独存在时无法提交，也不具备语义完整性；<form></form> 才能声明“这是一个可交互的搜索功能”，并支持 role="search" 显式标注用途。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

✅ 推荐写法：<form role="search"> <label for="site-search">站内搜索</label><input id="site-search" type="search" name="q" placeholder="搜索..."><button type="submit">搜索</button> </form>
❌ 常见错误：把 <input type="search"> 直接丢进 <header></header>，没 <form></form>、没 label、没提交机制——它只是个输入框，不是搜索功能
注意：不要在 <nav></nav> 里塞搜索框，<nav></nav> 只管导航链接；搜索是独立功能，归 <form></form> 或 <div role="search"> <h3>logo 图片必须带 <code>alt，且值要匹配标题语义
如果 <h1></h1> 是“知乎”，那 <img> 的 alt 就不能写“蓝色图标”或留空；否则辅助技术读出来是两套不一致的信息，破坏一致性。
- ✅ 同一语义下，<h1>知乎</h1> + <img src="zhihu-logo.svg" alt="知乎">
- ✅ 若 logo 是纯图形、无文字，且 <h1></h1> 已表达品牌名，则 alt=""（空字符串）表示该图像是装饰性的，避免重复播报
- ❌ alt="logo" 或 alt="网站首页图标" —— 没传达实质信息，对视障用户无效
- ⚠️ 不要用 <img> 替代 <h1></h1>，即使样式隐藏了文字；搜索引擎和读屏器依赖真实 HTML 结构，不是 CSS 视觉呈现
移动端 fixed 或 sticky 定位时，<header></header> 容易触发 iOS Safari 输入失焦

这不是标签本身的问题，而是布局逻辑冲突：当 <header></header> 设为 position: fixed 或 position: sticky，且内部 <input type="search"> 获焦时，iOS Safari 可能因滚动层切换导致键盘弹出后立即收起，或焦点丢失。
- ✅ 临时缓解：给 <header></header> 加 transform: translateZ(0) 或 will-change: transform，强制创建独立渲染层
- ✅ 更稳妥做法：避免在 <header></header> 上直接用 fixed；改用 position: sticky + top: 0，并在上设 overflow-x: hidden 防止横向滚动干扰
- ⚠️ 注意：IE9–11 不支持 position: sticky，如需兼容，得降级为 JS 监听滚动 + 切换 class 控制定位
实际项目中，最容易被忽略的是标题与 logo 的语义对齐——很多人写了 <h1></h1>，却让 <img> 的 alt 值和它不一致，或者干脆删掉 <h1></h1> 只留 logo 图片，以为“视觉上有标题就行”。语义不是看出来的，是解析出来的。