• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <header>

    版本:HTML5

    HTML<header>元素用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如Logo、搜索框、作者名称,等等

    浏览器支持

    IE 9、Firefox、Opera、Chrome 和 Safari 支持<header>标签。
    注释:IE 8 或更早版本的 IE 浏览器不支持<header>标签。

    示例

    页面的 Header

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

    文章的 Header

    <article>
      <header>
        <h2>The Planet Earth</h2>
        <p>Posted on Wednesday, 4 October 2017 by Jane Smith</p>
     </header>
      <p>We live on a planet that's blue and green, with so many things still unseen.</p>
      <p>Continue reading....</p>
    </article>
    

    标签定义及使用说明

    • <header>标签定义文档或者文档的一部分区域的页眉。<header>标签定义 section 或 document 的页眉。
    • <header>元素应该作为介绍内容或者导航链接栏的容器。
    • 在一个文档中,您可以定义多个<header>元素。
    • <header>标签不能被放在<footer><address>或者另一个<header>元素内部。
    • <header>元素不是分段内容,因此不会往大纲中引入新的段落。也就是说,<header>元素通常用于包含周围部分的标题(h1h6元素),但这不是必需的。
    内容类型流式内容元素,可触摸内容元素
    许可内容流式内容
    标记省略不允许,开始标签和结束标签都不能省略。
    允许的父元素任何接受流式内容的元素。注意:<header>元素不能作为<address><footer>或另一个<header>元素的子元素。
    允许的 ARIA 角色grouppresentation
    DOM 接口HTMLElement

    HTML 4.01 与 HTML 5 之间的差异

    <header>标签是 HTML 5 中的新标签。

    属性

    此元素仅拥有全局属性。

    全局属性

    <header>标签支持HTML 的全局属性。

    事件属性

    <header>标签支持HTML 的事件属性。

    实例

    <article>的页眉:

    <article>
    	<header>
    		<h1>internet explorer 9</h1>
    		<p><time pubdate datetime="2011-03-15"></time></p>
    	</header>
    	<p>windows internet explorer 9 (abbreviated as ie9) was released to the public on march 14, 2011 at 21:00 pdt.....</p>
    </article>
    

    上篇:<main>