Movatterモバイル変換


[0]ホーム

URL:


  1. 面向开发者的 Web 技术
  2. HTML(超文本标记语言)
  3. HTML 参考
  4. HTML 元素参考
  5. <header>

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in EnglishAlways switch to English

<header>:标题元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

<header>HTML 元素表示介绍性内容,通常是一组介绍性或导航性辅助内容。它可能包含一些标题元素,也可能包含徽标、搜索表单、作者姓名和其他元素。

尝试一下

<header>  <a href="#">Cute Puppies Express!</a></header><article>  <header>    <h1>Beagles</h1>    <time>08.12.2014</time>  </header>  <p>    I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and    their ears are so, so snugly soft!  </p></article>
.logo {  background: left / cover    url("/shared-assets/images/examples/puppy-header.jpg");  display: flex;  height: 120px;  align-items: center;  justify-content: center;  font:    bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script",    fantasy;  color: #ff0083;  text-shadow: #000 2px 2px 0.2rem;}header > h1 {  margin-bottom: 0;}header > time {  font: italic 0.7rem sans-serif;}

使用说明

<header> 元素的意义与网站范围内的banner 地标角色相同,除非嵌套在分段内容内。在这种情况下,<header> 元素不再是地标。

<header> 元素可以定义一个全局站点标题,在无障碍树中描述为banner。它通常包括一个徽标、公司名称、搜索功能,以及可能的全局导航或标语。它通常位于页面的顶端。

否则,它是在无障碍树中的一个section,通常包含周围部分的标题(h1h6 元素)和可选的副标题,但这并不是必要的。

历史用法

<header> 元素最初在 HTML 的早期用于标题。在第一个网站中可以看到。在某个时间点,标题变成了<h1><h6>,使<header> 可以自由地扮演一个不一样的角色。

属性

此元素包含全局属性

无障碍

<header> 元素的上下文为<body> 元素时,它定义了一个banner 地标。当 HTML 标题元素是<article><aside><main><nav><section> 元素的后代时,则不视为 banner 地标。

示例

页面标题

html
<header>  <h1>主页标题</h1>  <img src="mdn-logo-sm.png" alt="MDN 徽标" /></header>

结果

文章标题

html
<article>  <header>    <h2>行星地球</h2>    <p>      作者:Jane Smith,发布日期:<time datetime="2017-10-04"        >2017 年 10 月 4 日</time      >    </p>  </header>  <p>我们生活在一个蓝绿相间的星球上,有许多东西还未曾见过。</p>  <p><a href="https://example.com/the-planet-earth/">继续阅读……</a></p></article>

结果

技术概要

内容分类流式内容可感知内容
允许的内容流式内容,但没有<header><footer> 后代。
标签省略不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的元素。请注意,<header> 元素不得是<address><footer> 或另一个<header> 元素的后代。
隐含的 ARIA 角色 如果是articleasidemainnav 或是section 元素的后代,或者是带有role=articlecomplementarymainnavigationregion 属性的元素的后代,则为generic;否则为banner
允许的 ARIA 角色grouppresentationnone
DOM 接口HTMLElement

规范

Specification
HTML
# the-header-element

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp