您现在的位置是：网站首页 > <header>-页眉或区块头文章详情

<header>-页眉或区块头

陈川【 HTML 】 16153人已围观 8547字

<header> 是 HTML5 中用于定义文档或区块头部的语义化标签。它通常包含标题、导航、LOGO 或其他与页面头部相关的内容。这个标签不仅提升了代码的可读性，还对 SEO 和可访问性有积极影响。

`<header>` 的基本用法

<header> 标签可以出现在文档的多个位置，不仅限于页面顶部。它可以作为整个页面的页眉，也可以作为某个区块（如 <article> 或 <section>）的头部。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>示例网站</title>
</head>
<body>
    <header>
        <h1>网站主标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h2>文章标题</h2>
                <p>作者：张三 | 发布日期：2023-05-15</p>
            </header>
            <p>这里是文章内容...</p>
        </article>
    </main>
</body>
</html>

`<header>` 的嵌套规则

<header> 可以包含多种元素，但通常不嵌套另一个 <header> 或 <footer>。常见的包含元素包括：

标题标签 (<h1>-<h6>)
导航 (<nav>)
搜索表单
Logo 图片
作者信息
发布日期

<header>
    <div class="logo">
        <img src="logo.png" alt="公司Logo">
    </div>
    <h1>公司名称</h1>
    <nav>
        <ul>
            <li><a href="#services">服务</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
    <form action="/search" method="get">
        <input type="search" name="q" placeholder="搜索...">
        <button type="submit">搜索</button>
    </form>
</header>

`<header>` 的样式处理

虽然 <header> 是语义化标签，但默认情况下它没有特殊样式。通常需要添加 CSS 来定义其外观：

header {
    background-color: #333;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
    font-size: 1.5em;
}

header nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

header nav li {
    margin-left: 20px;
}

header a {
    color: white;
    text-decoration: none;
}

`<header>` 在响应式设计中的应用

在移动设备上，<header> 的布局可能需要调整。常见的做法是使用媒体查询来改变布局：

@media (max-width: 768px) {
    header {
        flex-direction: column;
        text-align: center;
    }
    
    header nav ul {
        flex-direction: column;
    }
    
    header nav li {
        margin: 10px 0 0 0;
    }
}

`<header>` 与 ARIA 角色

虽然 <header> 本身具有语义，但在某些情况下可能需要明确其角色：

<header role="banner">
    <!-- 主要内容 -->
</header>

注意：对于文档级 <header>，role="banner" 是合适的；而对于区块级 <header>，则不需要添加此角色。

`<header>` 的 SEO 考虑

搜索引擎会特别关注 <header> 中的内容，尤其是：

主标题 (<h1>) 应该包含重要的关键词
导航结构应该清晰
Logo 图片应该包含适当的 alt 文本

<header>
    <a href="/">
        <img src="logo.png" alt="ABC公司 - 专业网站建设服务" width="200" height="60">
    </a>
    <h1>ABC公司 - 专业网站建设与数字营销解决方案</h1>
    <nav aria-label="主导航">
        <ul>
            <li><a href="/services">服务项目</a></li>
            <li><a href="/portfolio">案例展示</a></li>
            <li><a href="/blog">行业资讯</a></li>
        </ul>
    </nav>
</header>

`<header>` 的常见错误用法

过度使用：不是每个区块都需要 <header>，只有当内容确实代表头部时才使用
嵌套错误：避免将 <header> 嵌套在另一个 <header> 中
忽略标题：通常 <header> 应该包含至少一个标题元素
用作装饰：不要仅仅为了样式而使用 <header>

错误示例：

<!-- 错误：嵌套header -->
<header>
    <header>
        <h1>标题</h1>
    </header>
</header>

<!-- 错误：没有标题 -->
<header>
    <div class="banner-image"></div>
</header>

`<header>` 与 `<head>` 的区别

初学者常混淆这两个概念：

<head> 是 HTML 文档的元数据容器，包含 <title>、<meta>、<link> 等不可见元素
<header> 是文档内容的一部分，包含可见的页面头部内容

<!DOCTYPE html>
<html>
<head>
    <!-- 元数据 -->
    <title>页面标题</title>
    <meta charset="UTF-8">
</head>
<body>
    <header>
        <!-- 可见的页面头部内容 -->
        <h1>网站主标题</h1>
    </header>
</body>
</html>

`<header>` 的历史演变

在 HTML5 之前，开发者通常使用 <div id="header"> 来创建页面头部。HTML5 引入 <header> 标签后，这种做法已被语义化标签取代：

<!-- HTML4/XHTML 方式 -->
<div id="header">
    <h1>网站标题</h1>
</div>

<!-- HTML5 方式 -->
<header>
    <h1>网站标题</h1>
</header>

`<header>` 的可访问性最佳实践

确保 <header> 中的导航有适当的 ARIA 标签
为 Logo 图片提供有意义的 alt 文本
保持标题层次结构合理
确保颜色对比度符合 WCAG 标准

<header>
    <a href="/" aria-label="返回首页">
        <img src="logo.png" alt="XYZ公司" width="120" height="40">
    </a>
    <nav aria-label="主要导航">
        <ul>
            <li><a href="/about" aria-current="page">关于我们</a></li>
            <li><a href="/services">服务</a></li>
        </ul>
    </nav>
    <button id="search-toggle" aria-expanded="false" aria-label="打开搜索">搜索</button>
</header>

`<header>` 在单页应用(SPA)中的使用

在单页应用中，<header> 通常是静态的，而内容区域动态变化：

<div id="app">
    <header>
        <h1>我的SPA应用</h1>
        <nav>
            <ul>
                <li><a href="#/" data-route="home">首页</a></li>
                <li><a href="#/about" data-route="about">关于</a></li>
            </ul>
        </nav>
    </header>
    <main id="content">
        <!-- 动态内容将在这里渲染 -->
    </main>
</div>

对应的 JavaScript 可能如下：

document.querySelectorAll('[data-route]').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        const route = e.target.getAttribute('data-route');
        loadContent(route);
    });
});

function loadContent(route) {
    const content = document.getElementById('content');
    // 根据路由加载不同内容
    if(route === 'home') {
        content.innerHTML = '<h2>欢迎来到首页</h2>';
    } else if(route === 'about') {
        content.innerHTML = '<h2>关于我们</h2><p>公司简介...</p>';
    }
}

`<header>` 与 CSS 框架的集成

使用 Bootstrap 或 Foundation 等 CSS 框架时，<header> 通常与框架的导航组件结合：

<header class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#">网站Logo</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <nav class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">产品</a></li>
            </ul>
        </nav>
    </div>
</header>

`<header>` 中的微数据标记

可以使用 schema.org 微数据增强 <header> 的语义：

<header itemscope itemtype="http://schema.org/WPHeader">
    <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
        <meta itemprop="name" content="ABC公司">
        <img itemprop="logo" src="logo.png" alt="ABC公司Logo">
    </div>
    <h1 itemprop="headline">最新产品发布</h1>
    <p>发布日期: <time itemprop="datePublished" datetime="2023-05-20">2023年5月20日</time></p>
</header>

`<header>` 在打印样式中的处理

可以专门为打印媒体调整 <header> 的样式：

@media print {
    header {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #000;
    }
    
    header nav {
        display: none;
    }
    
    header::after {
        content: "网址: example.com";
        font-size: 0.8em;
        margin-top: 10px;
    }
}

`<header>` 的交互效果示例

为 <header> 添加滚动效果：

<header id="main-header">
    <!-- 内容 -->
</header>

<style>
    #main-header {
        position: fixed;
        top: 0;
        width: 100%;
        transition: all 0.3s ease;
    }
    
    #main-header.scrolled {
        background-color: rgba(0,0,0,0.9);
        padding: 10px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
</style>

<script>
    window.addEventListener('scroll', function() {
        const header = document.getElementById('main-header');
        if(window.scrollY > 100) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });
</script>

`<header>` 中的多语言支持

对于多语言网站，<header> 中的语言切换器可以这样实现：

<header>
    <div class="language-switcher">
        <ul>
            <li><a href="?lang=zh" hreflang="zh" lang="zh">中文</a></li>
            <li><a href="?lang=en" hreflang="en" lang="en">English</a></li>
        </ul>
    </div>
    <!-- 其他内容 -->
</header>

对应的 CSS 可以这样设计：

.language-switcher {
    position: absolute;
    top: 10px;
    right: 10px;
}

.language-switcher ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.language-switcher li {
    margin-left: 10px;
}

.language-switcher a {
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
}

.language-switcher a[aria-current="true"] {
    font-weight: bold;
    text-decoration: underline;
}

上一篇： <time>-日期/时间表示

下一篇： <footer>-页脚或区块尾