header 的用法和设计

网页设计术语解析

概览 含义 用法 设计 实践

header

/ˈhedər/
名词 网页设计术语

基本释义：网页顶部区域，包含网站标识和主导航

词源：源自英语"head"（头部）

📚 核心含义

网页结构

网站页面的顶部区域，通常包含logo和导航

The header contains the company logo.
页眉包含公司标志。
网页设计

HTML标签

HTML5语义化标签，定义文档头部区域

<header> defines the document's header.
<header>标签定义文档头部。
前端开发

文件头部

数据文件开头的元信息部分

The header of the file contains metadata.
文件的头部包含元数据。
计算机科学

"header"是网页设计中最常用的术语之一，几乎所有网站都会使用header区域来展示品牌信息和导航功能。

🔄 用法对比

英语例句

The website header includes a search bar.

Design a responsive header for mobile devices.

This HTML document has a header section.

中文翻译

网站头部包含搜索框。

为移动设备设计响应式页眉。

这个HTML文档有一个头部区域。

🎯 常见用法

HTML标签

定义文档或节的头部区域

<header>
  <h1>网站标题</h1>
</header>
语义化标签

CSS样式

设置头部区域的样式

header {
  background: #fff;
  padding: 20px;
}
样式设计

SEO优化

放置重要关键词和品牌信息

Place your main keyword in the header.
在头部放置主要关键词。
搜索引擎优化

语法注意

单数： header
复数： headers

⚠️ 易混淆点

不要混淆：

Header和head是相同的标签。 (错误)

正确：Header是内容区域，head包含元数据。

每个页面只能有一个header。 (错误)

正确：HTML5允许多个header元素。

🎨 设计要点

响应式设计

适配不同设备屏幕

@media (max-width: 768px) {
  header { flex-direction: column; }
}
移动优先

固定定位

滚动时保持可见

header {
  position: fixed;
  top: 0;
}
用户体验

品牌展示

突出公司标识

Place your logo in the header.
在头部放置公司标志。
品牌识别

💡 设计趋势

简约风格

留白设计，减少视觉干扰

全屏导航

点击菜单展开全屏导航

透明效果

滚动时产生透明渐变

✍️ 实践练习

代码练习

创建一个包含logo和导航的header：

<header>
  <img src="logo.png">
  <nav>
    <a href="#">首页</a>
  </nav>
</header>

设计练习

设计一个响应式header，要求：

• 桌面端水平布局
• 移动端垂直布局
• 包含logo和3个导航链接
• 固定定位在页面顶部 
header {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
    }
    nav {
        margin-top: 10px;
    }
}

改错练习

找出并改正错误：

1. <header>放在<body>标签外
2. 使用<div class="header">替代语义化标签
3. header { position: absolute; }导致内容被遮挡

1. <header>应放在<body>标签内

2. 应使用语义化标签<header>

3. 应使用position: fixed并设置body { padding-top: 高度 }