HTML5 中的Header元素详解

爱被打了一巴掌 2022-07-13 03:30 137阅读 0赞

**什么是****header****元素**

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。

注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。

**header元素的用法**

下面根据一幅图来具体看看header元素的使用方法：

![Center][]

黑色线框所包裹的就是我们的网页，在网页里面有一个网页标题，在网页标题下面是我们的文章标题和正文内容区域，在这幅图里面我们就可以给我们的网页标题和文章标题都使用header元素。

下面就一起来演示下：

<body>

<header>

<h1>网页标题</h1>

</header>

<article>

<header>

<h1>文章标题</h1>

</header>

<p>文章正文部分</p>

</article>

</body>

Header元素效果演示图：

![Center 1][]

在HTML5中，一个header元素至少可以包含一个heading元素（h1-h6），也可以包括我们下节课将要学习的hgroup元素，还可以包括其他的元素，在新的W3C HTML5标准，我们还可以把NAV元素包括进去。

![Center 2][]

下面我们就来实现上图中header案例：

<body>

<header>

<hgroup>

<h1>HTML5视频教程</h1>

<a href=”/”>\[手机版\]</a>

<a href=”/”>\[HTML5论坛\]</a>

</hgroup>

<nav>

<ul>

<li><a href=”/”>首页</a></li>

<li><a href=”/”>手机版</a></li>

<li><a href=”/”>论坛</a></li>

</ul>

</nav>

</header>

</body>

效果演示图如下：

![Center 3][]

下面我们需要给它添加一些css样式：

<style>

\*\{

Margin:0;

Padding:0;

\}

Body\{

Font-family:微软雅黑;

Text-algin:center;

\}

A\{

Color:\#f60;

Text-decoration:none;

\}

Hgroup\{

Margin-bottom:10px;

\}

Nav\{

Height:48px;

Backgroud:\#ff6600;

\}

Nav li\{

Float:left;

Backgroud:\#000000;

Border-radius:5px;

Padding:5px 10px;

Margin:10px;

List-style:none;

\}

</style>

最终效果演示图：

![Center 4][]

原文链接：[http://www.maiziedu.com/wiki/html5/header/][http_www.maiziedu.com_wiki_html5_header]

[Center]: /images/20220713/779529c4df4449fbb39a699469d66a4e.png
[Center 1]: /images/20220713/7f96a2e7e5d946fb80396e910f5b6ad6.png
[Center 2]: /images/20220713/217a3e702114454caa550a7a1803b5bb.png
[Center 3]: /images/20220713/63a159b5a3cf4c12a5fe58c5726080ad.png
[Center 4]: /images/20220713/3b369435dfbb40958f52cab23237a06d.png
[http_www.maiziedu.com_wiki_html5_header]: http://www.maiziedu.com/wiki/html5/header/

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5中的标签：section footer header article

section:区段类似于段落文档中的区段，解释了 PRC： <section> <h1>PRC</h1> <p>The

叁歲伎倆/ 2022年11月22日 12:39/ 0 赞/ 147 阅读

相关 html5中的table元素

<html> <head> <title>Table</title> </head>

亦凉/ 2022年08月22日 13:19/ 0 赞/ 138 阅读

相关 html5中图像元素

<html> <head> <meta charset="utf-8"/> <title>图片</tit

柔光的暖阳◎/ 2022年08月22日 13:19/ 0 赞/ 147 阅读

相关 html5中列表元素

<html> <head> <title>List</title> </head> <body>

快来打我*/ 2022年08月22日 13:16/ 0 赞/ 175 阅读

相关 HTML5 中的Header元素详解

什么是header元素 header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放

爱被打了一巴掌/ 2022年07月13日 03:30/ 0 赞/ 138 阅读

相关 HTML5中article元素的使用

本文和大家分享的主要是HTML5中article元素的相关用法，同时结合具体实例进行讲解，加深大家对article元素的印象，一起来看看吧，希望对大家学习HTML5有所帮助。

绝地灬酷狼/ 2022年07月13日 03:07/ 0 赞/ 137 阅读

相关 HTML5元素的 data-* 属性详解

data-\ 属性是 HTML 5 的新特性，允许用户在 DOM 中存储自定义信息。以前，需要存储含有特定含义的信息通常是通过 class 完成的，但这并不是 class

快来打我*/ 2022年06月13日 06:22/ 0 赞/ 221 阅读

相关 HTML5中新的语义元素

HTML5 提供了新的语义元素来明确一个Web页面的不同部分: `<header>`：描述了文档的头部区域，主要用于定义内容的介绍展示区域，在页面中你可以使用多个hea

客官°小女子只卖身不卖艺/ 2022年05月19日 08:14/ 0 赞/ 212 阅读

相关 HTML5中video元素

HTML5中video元素 video元素：也是我们做网页经常用到的元素，它可以在页面中播放视频 1.属性： src：视频的地址 Height：视频页面的高度

旧城等待，/ 2022年02月14日 03:31/ 0 赞/ 297 阅读

相关 HTML5页面架构元素 - <header>标签

在HTML4流行的时候大家的页面架构元素使用最多的还是table，方便快捷，用起来很爽（虽然他不是一个真正的页面架构元素）。XHTML1.0后大家都开始认识到table使用的错

亦凉/ 2021年12月24日 07:43/ 0 赞/ 185 阅读