此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
<header>:标题元素
<header> HTML 元素表示介绍性内容,通常是一组介绍性或导航性辅助内容。它可能包含一些标题元素,也可能包含徽标、搜索表单、作者姓名和其他元素。
尝试一下
<header>
<a class="logo" 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 |
规范
| 规范 |
|---|
| HTML # the-header-element |
浏览器兼容性
启用 JavaScript 以查看此浏览器兼容性表。