Web学习网站

Appearance

<header> 标签 ​

<header> 标签用于定义文档或章节的页眉。它通常包含介绍性内容或导航链接。

概述 ​

<header> 标签是 HTML5 中引入的语义化标签，用于定义文档或章节的头部区域。一个文档中可以有多个 <header> 元素。

语法 ​

html
<header>
  <!-- 头部内容 -->
</header>

基本用法 ​

页面头部 ​

html
<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#contact">联系</a></li>
    </ul>
  </nav>
</header>

文章头部 ​

html
<article>
  <header>
    <h1>文章标题</h1>
    <p>发布于 <time datetime="2023-01-01">2023年1月1日</time> 作者：张三</p>
  </header>
  <p>文章内容...</p>
</article>

实际示例 ​

完整页面结构 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>header 标签示例</title>
  <style>
    header {
      background-color: #333;
      color: white;
      padding: 1rem;
      margin-bottom: 2rem;
    }
    
    nav ul {
      list-style: none;
      padding: 0;
      display: flex;
      gap: 1rem;
    }
    
    nav a {
      color: white;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <header>
    <h1>我的网站</h1>
    <nav>
      <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
        <li><a href="#services">服务</a></li>
        <li><a href="#contact">联系</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <h2>主要内容</h2>
    <p>页面的主要内容...</p>
  </main>
</body>
</html>

与其他标签的区别 ​

与 <head> 的区别 ​

html
<!-- head 标签包含文档元数据，不显示在页面上 -->
<head>
  <title>页面标题</title>
  <meta name="description" content="页面描述">
</head>

<!-- header 标签包含页面头部内容，显示在页面上 -->
<header>
  <h1>页面标题</h1>
  <nav>导航链接</nav>
</header>

与 <h1>-<h6> 的区别 ​

html
<!-- h1-h6 是标题标签 -->
<h1>主标题</h1>

<!-- header 是容器标签，可以包含标题和其他元素 -->
<header>
  <h1>主标题</h1>
  <p>副标题</p>
  <nav>导航</nav>
</header>

最佳实践 ​

  1. 语义化使用：只在真正表示文档或章节头部时使用
  2. 不包含页脚内容：header 不应包含 footer、address 等元素
  3. 可以嵌套：可以在 article、section 等元素中使用
  4. 样式化：使用 CSS 控制外观，而非 HTML 属性

浏览器兼容性 ​

<header> 标签在所有现代浏览器中都得到支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 9+

注意事项 ​

  1. <header> 标签是块级元素
  2. 一个文档中可以有多个 <header> 元素
  3. <header> 标签不能放在 <footer>、<address> 或另一个 <header> 元素内部
  4. <header> 标签没有默认的样式，需要通过 CSS 设置

相关标签 ​