此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
<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 元素表示介绍性内容,通常是一组介绍性或导航性辅助内容。它可能包含一些标题元素,也可能包含徽标、搜索表单、作者姓名和其他元素。
In this article
尝试一下
<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,通常包含周围部分的标题(h1 –h6 元素)和可选的副标题,但这并不是必要的。
历史用法
<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 角色 | 如果是article、aside、main、nav 或是section 元素的后代,或者是带有role=article、complementary、main、navigation 或region 属性的元素的后代,则为generic;否则为banner。 |
| 允许的 ARIA 角色 | group、presentation 或none |
| DOM 接口 | HTMLElement |
规范
| Specification |
|---|
| HTML> # the-header-element> |