：Header 元素

admin
2025-11-23 07:51:28

试一试

Beagles

I love beagles so much! Like, really, a lot. They’re adorable and

their ears are so, so snugly soft!

.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: black 2px 2px 0.2rem;

}

header > h1 {

margin-bottom: 0;

}

header > time {

font: italic 0.7rem sans-serif;

}

用法说明

当

元素未嵌套在 分区内容、
或具有与这些元素隐含 ARIA 角色相同的 ARIA 角色的元素内时，
元素与站点范围的 banner 地标角色具有相同的含义。它定义了一个全局站点标题，通常包括徽标、公司名称、搜索功能，以及可能的全局导航或标语。它通常位于页面的顶部。

否则，当嵌套在上述元素内时，它将失去地标状态，并表示围绕它的部分的介绍性或导航辅助内容的组。它通常包含围绕它的部分的标题（h1–h6 元素）和可选的副标题，但这 **不是** 必需的。

历史用法

元素最初存在于 HTML 的最早期，用于表示标题。它可以在 第一个网站 中看到。在某个时候，标题变成了

至

，这使得
可以自由地承担不同的角色。

属性

此元素仅包含全局属性。

无障碍

当

元素处于 元素 的上下文中时，它定义了一个 banner 地标。

当放置在

、
、
、