A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/zh-CN/docs/Web/HTML/Reference/Elements/header below:

<header>ï¼šæ ‡é¢˜å…ƒç´ - HTMLï¼ˆè¶…æ–‡æœ¬æ ‡è®°è¯è¨€ï¼‰ | MDN

<header>：标题元素

Baseline Widely available

<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 地标。

示例 页面标题 
<header>
  <h1>主页标题</h1>
  <img src="mdn-logo-sm.png" alt="MDN 徽标" />
</header>
结果 文章标题 
<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>
结果 技术概要 规范 浏览器兼容性 参见

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4