<header>必须包含标题元素（如<h1>）才能明确语义，否则屏幕阅读器会跳过、SEO无法识别；logo需与标题语义一致，搜索框必须用<form>包裹并配<label>和提交机制。
header里必须有～，否则语义失效
，否则语义失效
只放<img>和<form>进去，没有标题元素，<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>包裹，别只用<input type="search">
<input type="search"> 单独存在时无法提交，也不具备语义完整性；<form> 才能声明“这是一个可交互的搜索功能”，并支持 role="search" 显式标注用途。
- ✅ 推荐写法：
<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>，没<form>、没label、没提交机制——它只是个输入框，不是搜索功能 - 注意：不要在
<nav>里塞搜索框，<nav>只管导航链接；搜索是独立功能，归<form>或<div role="search">
logo 图片必须带 alt，且值要匹配标题语义
如果 <h1> 是“知乎”，那 <img> 的 alt 就不能写“蓝色图标”或留空；否则辅助技术读出来是两套不一致的信息，破坏一致性。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 同一语义下，
<h1>知乎</h1>+<img src="zhihu-logo.svg" alt="知乎"> - ✅ 若 logo 是纯图形、无文字，且
<h1>已表达品牌名，则alt=""（空字符串）表示该图像是装饰性的，避免重复播报 - ❌
alt="logo"或alt="网站首页图标"—— 没传达实质信息，对视障用户无效 - ⚠️ 不要用
<img>替代<h1>，即使样式隐藏了文字；搜索引擎和读屏器依赖真实 HTML 结构，不是 CSS 视觉呈现
移动端 fixed 或 sticky 定位时，<header> 容易触发 iOS Safari 输入失焦
这不是标签本身的问题，而是布局逻辑冲突：当 <header> 设为 position: fixed 或 position: sticky，且内部 <input type="search"> 获焦时，iOS Safari 可能因滚动层切换导致键盘弹出后立即收起，或焦点丢失。
立即学习“前端免费学习笔记（深入）”；
- ✅ 临时缓解：给
<header>加transform: translateZ(0)或will-change: transform，强制创建独立渲染层 - ✅ 更稳妥做法：避免在
<header>上直接用fixed；改用position: sticky+top: 0，并在<body>上设overflow-x: hidden防止横向滚动干扰 - ⚠️ 注意：IE9–11 不支持
position: sticky，如需兼容，得降级为 JS 监听滚动 + 切换 class 控制定位
<h1>，却让 <img> 的 alt 值和它不一致，或者干脆删掉 <h1> 只留 logo 图片，以为“视觉上有标题就行”。语义不是看出来的，是解析出来的。 
