HTML

标签

HTML <header> 标签是指在网页文件中放置标题内容的标签。<header> 中可以包含文本，图像，视频，音频等媒体内容，也可以放置导航栏、搜索框等常用功能模块。常常作为网页的页首，出现在网页的主体部分之前。

HTML header 标签的语法格式

<header>
  <h1>这里是标题内容</h1>
  <p>这里是段落文本</p>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">文档</a></li>
      <li><a href="#">社区</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav> 
</header>

HTML header 标签的属性

HTML5 新增属性

• hidden: 隐藏元素

通用属性

• class: 指定元素的 CSS 类
• id: 元素的唯一标识符
• lang: 元素内容的语言

HTML header 标签的应用场景

HTML <header> 标签主要适用于网站页面的顶部、头部等位置，常常放置网站的标志、导航栏、搜索框等常见功能模块，或者是引入一些媒体内容来增加页面的可读性和趣味性，例如：

<header>
  <h1>ABC公司</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品中心</a></li>
      <li><a href="#">新闻资讯</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </nav>
</header>

HTML header 标签的注意事项

• <header> 中应该只包含一次 h1 元素，用于代表该页面的主要标题。
• 如果页面中包含多个 header，应当使用 role="banner" 属性来区分各个 header 的作用。
• <header> 元素默认情况下会在页面上显示，如果需要隐藏元素，可以在 <header> 元素上添加 hidden 属性。