<header>明确语义化头部结构，含带alt文本的logo链接、语义化nav导航及type="search"搜索框，采用flex布局实现响应式对齐，兼顾SEO、无障碍与维护性。</header>
用 <header> 包裹，别直接用 <div> 套娃
语义化是第一步，<header> 明确告诉浏览器和开发者“这是头部”，对 SEO 和屏幕阅读器都更友好。很多新手直接写 <div class="header">，后续加 ARIA 属性或做无障碍适配时会多绕两步。
常见错误是把 logo、nav、search 全塞进一个没语义的 <div>，结果调试时发现键盘焦点跳转混乱，或者搜索引擎抓不到主标题结构。
建议结构如下：
<header>
<div class="wp"> <!-- 版心容器 -->
<div class="logo"><a href="/"><img src="logo.png" alt="学成在线"></a></div>
<nav class="nav"><ul><li><a href="#">首页</a></li></ul></nav>
<div class="search"><input type="text" placeholder="SEARCH"></div>
</div>
</header>Logo 必须带 <a> 跳转，alt 文本不能空
纯图片 logo 不等于可访问 logo。漏掉 <a href="/">，用户点 logo 回首页就失效；alt 写成空字符串（alt=""）或只写“logo”，搜索引擎和读屏软件就无法识别品牌关键词。
立即学习“前端免费学习笔记（深入）”；
正确做法：
-
alt应包含品牌名+核心业务，比如alt="学成在线 - 在线职业教育平台" - 如果用背景图方式实现 logo（如
background-image），必须配合aria-label或隐藏文字（font-size: 0; text-indent: -999px;），否则对无障碍完全不友好 - 别给
<img>设固定width/height后又用 CSS 拉伸，容易模糊；优先用max-width: 100%; height: auto;
<input type="search"> 比 type="text" 更合适
虽然两者都能输文字，但 type="search" 有隐式优势：在 Safari 和部分 Android 浏览器中自动带清除按钮（×），且支持系统级搜索历史下拉；更重要的是，它向辅助技术表明“这是搜索控件”，比 type="text" 语义准确。
实操注意点：
- 加上
name="q"（不是必须，但和后端约定俗成，也利于 Google Analytics 识别） - 用
placeholder提示时，别只写“搜索”，建议带上下文，如placeholder="搜索课程、讲师或机构" - 如果右侧要加图标（如放大镜），优先用伪元素
::after+ background 或 SVG，避免额外<img>标签破坏表单结构
浮动（float）已过时，用 display: flex 对齐更稳
老教程里满屏 float: left + float: right + clear: both，现在不仅难维护，还容易在缩放或小屏下错位。Flex 布局一行代码就能居中、等宽、响应式对齐。
示例 CSS：
.wp {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo, .nav, .search { flex: 0 0 auto; }
@media (max-width: 768px) {
.wp { flex-direction: column; text-align: center; }
.nav ul { flex-wrap: wrap; }
}关键点：别忘了给 .wp 设固定宽度（如 max-width: 1200px）并 margin: 0 auto 居中；否则在大屏上 logo 和搜索框会贴边，视觉失衡。
复杂点往往藏在细节里：比如搜索框高度要和 logo 图片行高对齐，input 默认有上下 border 和 padding，直接设 height 容易割裂；更稳妥的是统一用 padding 控制内边距，再配 box-sizing: border-box。
