HTML5 header元素

header元素

header元素是一种具有引导和导航作用的结构元素，通常表示整个页面或页面上的一个内容块的头部，它可以包含标题元素 h1 ~ h6（当并非必需的），也可以包含其他的内容，如导航、logo、搜索表单等等。

如果一个页面上包含多个内容块，就可以为每个内容块分别加上一个header元素，也就是说，一个页面上可以有任意数量的 header元素，它们的含义可以根据上下文而有所不同。

出现在页面的顶端或接近这个位置的 header元素，就成为整个页面的页眉，页眉通常会包含网站的logo、网站名称、网站主导航、甚至搜索框等。

<body>
<header><nav><ul><li><a href="/games">Games</a><li><a href="/forum">Forum</a><li><a href="/download">Download</a></ul></nav><h1>Little Green Guys With Guns</h1><h2>Important News</h2><p>To play today's games you will need to update your client.</p><h2>Games</h2><p>this starts a third subsection.</p>
</header>
</body>

header元素也很适合作为页面上的一组介绍性内容的头部，此时，就会稍微简单一点，通常会包含其自身的 h1 ~ h6 标题等信息：

<section><header><h1>Voidwars!</h1><p>Welcome to...</p></header>
</section>

当然，应该只在必要时使用 header元素，大多数情况下，如果使用 h1~h6 就能满足需求，就没必要用 header 将它们包起来。不能在 header 里嵌套 footer 或另一个 header元素，也不能在 footer 或 address 元素里嵌套 header元素。

HTML5 header元素相关推荐

html页面的header,HTML5教程 | HTML5 header和footer元素
header HTML5 header元素是一个页面的头部的语义标记,或者它也可以是article元素的一部分. 例如下面的图中,header元素是作为一个页面的头部来使用. 使用header元素的H ...
HTML5新布局元素布局,HTML5新的布局元素
HTML5相对于HTML4新增了一些布局元素新增布局标签的优点: ⒈更加注重文档的结构内容而不是以什么形式展现出来 ⒉对人的友好,更加语义化,增加代码的可读性 ⒊对计算机友好,浏览器更容易解析新增 ...
下列不属于html5语义元素,HTML5 新的语义元素
HTML5 提供了新的语义元素来明确一个Web页面的不同部分: HTML5中新的语义元素 HTML5 元素标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 根据W ...
HTML5废除元素,HTML5 与 HTML4 的区别(2) - 新增的元素和废除的元素
新增的结构元素在 HTML5 中,新增了以下与结构相关的元素: section元素 section 元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分. 它可以与h1.h2.h3. ...
html5 header和group
<html><head><meta charset="UTF-8" /><meta name="generator"c ...
三天学会HTML5 ——多媒体元素的使用
文件夹 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息多媒体是互联网中的最重要的一部 ...
html5用语义元素做旅游网站,HTML5语义元素
语义元素 article,aside,nav,section,header,footer 上面这些语义元素不会给页面内容造成任何视觉上的改变,它们只是提供html文档的结构,供计算机和开发者读取和阅读 ...
那些是html5新增元素类型,HTML5 元素分类
HTML5 元素分类发布时间:2020-03-02 02:39:31 来源:51CTO 阅读:547 作者:双士之心 HTML5元素分类:结构性元素.级块性元素.行内语义性元素.交互性元素. 目的: ...
HTML5结构元素总结
HTML5结构元素: HTML 5中新增了section.article.nav.aside.header和footer等结构元素.运用这些结构元素,可以让网页的整体布局更加直观和明确.更富有语义化. ...

HTML5 header元素

header元素

HTML5 header元素相关推荐

最新文章

热门文章