9.1 header 元素
这节主要讲解新增的非主体结构元素。在 HTML5 中还增加了一些用来表示逻辑结构,或者是附加信息的非主体结构元素。
header 元素
header 元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面里的一个内容区块的标题,但是也可以包含其他内容,例如数据表格、搜索表单或相关的
logo图片。关于header我们见的并不少,只是以前的写法和现在的并不太相通,以前是通过一个div包裹,然后设定id或class指定为 header 用来包含整个页面或其中某个区块的标题。
需要注意的是 header 元素可以出现很多次,无论是整个页面中表示标题或一个区块中表示标题,都是可以的。
下面看下实例:
<body>
<!-- 在以往的使用中往往是这样 -->
<div class="header"></div>
<!-- 使用新标签 header -->
<header>
<h1>页面标题</h1>
</header>
<article>
<!-- header 也可以表示一个区块中的头部内容 -->
<header>
<h1>hello</h1>
</header>
</article>
</body>
除此之外 header 中可以包含的内容还有很多,下面做一个相对完整的例子:
<header>
<h1>IT 最新技术</h1>
<a href="https://www.nowcoder.com">牛客网</a>
<nav>
<ul>
<li><a href="#">学习</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">极客</a></li>
</ul>
</nav>
</header>关于 header 就介绍到这里。
