网页header

打开任何一个网站，网页最先撞进眼睛的网页就是header。它横在页面顶部，网页像一块招牌，网页告诉访客“你来了什么地方”。网页但很多人做网页时，网页把header当成一个随便塞logo和导航的网页容器，结果就是网页：用户滚动页面时找不到菜单，或者手机上一堆链接挤成蚂蚁窝。网页

我见过一个本地咖啡馆的网页官网，header区域放了张1200px宽的网页大图，logo压在左上角，网页导航用白色细字叠在深色咖啡豆背景上。网页桌面端看还行，网页一到手机上，网页导航文字直接和背景糊在一起，点都点不准。老板说“我花了三千块找人做的”，可那三千块大概全花在图片滤镜上了。

header不只是“顶部那条”

从HTML结构看，<header>是个语义标签，可以出现在页面顶部，也可以出现在<article>或<section>内部。但大多数人说的“网页header”，指的是全局页头。它通常包含：品牌标识（logo）、主导航、搜索框、登录/注册入口，有时还有语言切换或购物车图标。

关键不在于塞多少东西，而在于优先级。用户第一眼要确认“这是哪”，第二眼要找到“我能去哪”。所以logo和主导航的视觉权重必须最高。我见过一个后台管理系统，header里放了八个图标按钮，每个都长得差不多，结果新用户每次都要把鼠标悬停上去看tooltip才知道哪个是消息、哪个是设置。这就是典型的header信息过载。

固定定位是个好东西，但别滥用

position: fixed让header钉在视口顶部，滚动时导航始终可见。电商网站尤其爱用这招——你翻到商品详情页底部，还能直接点“购物车”。但固定header会吃掉垂直空间。手机上本来屏幕就矮，一个80px高的固定header加上浏览器地址栏，实际内容区只剩不到500px。用户看两行字就得滑一下，体验很憋屈。

我的做法是：桌面端固定，移动端默认不固定，或者做成滚动时隐藏、上滑时出现的动态header。CSS的transform: translateY(-100%)配合滚动监听就能实现。别小看这几十像素，它决定了用户是“浏览”还是“挣扎”。

响应式不是把导航压扁

很多模板的移动端header就是把桌面导航的display: flex改成flex-wrap: wrap，结果链接换行后和logo挤在一起，像早高峰地铁。正确的做法是：在窄屏下把主导航收进汉堡菜单，只保留logo和一个菜单按钮。汉堡菜单展开后可以是全屏覆盖，也可以是侧滑抽屉，但里面的链接要够大——至少44px高的点击区域，这是手指触控的舒适下限。

有个细节值得注意：汉堡图标本身要能明确传达“点我展开”。三条横线是通用符号，但如果你把它做成三条细如发丝的线，用户可能根本注意不到。加个微妙的背景色块或圆角边框，点击率会明显不同。

别忽略键盘和屏幕阅读器

header里的导航链接，用<nav>包裹并加上aria-label="主导航"，屏幕阅读器用户就能快速跳转。汉堡菜单按钮要设置aria-expanded状态，展开时设为true，收起时设为false。这些属性不影响视觉，但决定了部分用户能不能用你的网站。

我测试过一个政府网站，header的导航用纯div加onclick实现，键盘Tab键完全聚焦不上去。对于需要无障碍访问的场景，这就是硬伤。用<a>或<button>原生元素，浏览器自动处理焦点和回车触发，省事又可靠。

header是页面的门面，也是导航的起点。它不需要炫技，但需要清晰、可点、不挡路。下次改版时，先把logo和导航的对比度调到4.5:1以上，再想想手机上那根汉堡按钮够不够大。这些小事，比换个渐变背景有用得多。