只能包含导航链接，不可塞入搜索框；正确做法是用并列包裹、和用户区域，语义清晰、可访问性强。
用 <nav></nav> 包住导航项，别塞搜索框进去
很多人一上来就把 <input type="search"> 直接丢进 <nav></nav> 里，结果语义错乱、读屏器报错、SEO 权重稀释。HTML5 明确规定：<nav></nav> 只该包含“导航到其他页面的链接集合”，搜索是功能操作，不是导航目标。
正确结构是：用 <header></header> 作为顶层容器，里面并列放 <nav></nav>、<form></form>（包搜索框）、<div class="user">（头像）三块。这样语义清晰，各司其职。
<ul>
<li>
<code><nav></nav> 内部必须是 <ul><li><a></a></li></ul> 结构，不能直接写 <a></a>
<form></form> 里，加 role="search" 和 aria-label="站内搜索"，否则屏幕阅读器只读“输入框”，不知道用途<input type="search">，Safari 会自带放大镜图标和取消按钮，但 Chrome 不一定显示取消按钮——得靠 JS 或 CSS 控制 ::-webkit-search-cancel-button
display: flex 布局时，中间搜索框怎么占满剩余空间？
常见错误是给搜索 <form></form> 设 width: 100%，结果它撑满整个 <header></header>，把右边头像顶跑了。真正该做的是让搜索区域“弹性占位”。
关键 CSS 就这几句：
header {
display: flex;
align-items: center;
gap: 1rem;
}
nav { flex: 0 0 auto; }
form { flex: 1; }
.user { flex: 0 0 36px; }
注意点：
-
flex: 1等价于flex: 1 1 0，意思是“尽可能拉伸，基准尺寸为 0”，所以它会吃掉 nav 和 user 之外的所有空隙 - 别给
form设固定width或max-width，否则在小屏下可能溢出或缩得太小 - 如果搜索框内
<input>没填满父级，记得加width: 100%和box-sizing: border-box
input[type="search"] 的:focus 样式为什么没反应？
Chrome 默认会给 <input type="search"> 加 outline: none（尤其用了重置 CSS 后），但很多人删了 outline 却没补 :focus 的替代样式，导致键盘用户完全看不出焦点在哪——这是可访问性红线。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
必须显式定义：
input[type="search"]:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
border-color: #007bff;
}
容易踩的坑：
- 写了
outline: none却没配:focus，等于主动屏蔽键盘导航 - 只改
border-color，但没调outline，某些浏览器（如旧版 Safari）仍不显示焦点环 - 移动端 Safari 对
appearance: none支持不稳定，加了反而让搜索图标消失，建议只在必要时加，并配合::-webkit-search-decoration手动控制图标
头像下拉菜单弹不出来？先查 z-index 和 overflow
头像点击后下拉菜单不见，90% 是被裁掉了。不是 JS 没绑，也不是 CSS 没写，而是布局层级或容器限制出了问题。
检查顺序如下：
- 头像容器（比如
<div class="user">）是否设了 <code>position: relative？没设就无法锚定绝对定位的下拉菜单 - 下拉菜单本身是否设了
position: absolute; top: 100%; right: 0; z-index: 1000？z-index必须比 header 高，且不能依赖父级的z-index（IE11 除外） -
<header></header>是否有overflow: hidden？有就立刻删掉，这是最常被忽略的裁剪元凶 - 如果 header 用了
transform: scale(0.98)或filter: drop-shadow()，会创建新层叠上下文，导致子元素的z-index失效；此时要在头像容器上加isolation: isolate
复杂点在于：这些限制条件往往叠加出现，比如小屏下媒体查询改了 flex-direction，又加了 transform 动画，再配上 overflow: hidden —— 下拉菜单就彻底隐身了。调试时得一层层关掉样式来隔离问题。
