浅析HTML5中header标签的用法


Posted in HTML / CSS onJune 24, 2016

<header>标签定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。
在新的标准中header标签定义如下:

"A group of introductory or navigational aids.”
基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单只是定义页头内容,也可以定义页头以下其它内容的介绍。这和我们传统的页面header定义并不完全一致。
通常<header>标签至少包含(但不局限于)一个标题标记(<h1>-<h6>),还可以包括<hgroup>标签,还可以包括表格内容、标识、搜索表单、<nav>导航等。

XML/HTML Code复制内容到剪贴板
  1. <header>  
  2.  <h1>雨打浮萍</h1>  
  3.  <p>专注于web前端开发</p>  
  4. </header>  
  5. <article>  
  6.  <header>  
  7.   <h1>html5语义化标签之结构标签</h1>  
  8.   <p>article、section、hgroup、aside、nav...</p>  
  9.  </header>  
  10.  <p>...这里面包含很多东西...</p>  
  11. </article>  

在上面的结构中,我们可以看到使用header我们定义了一篇文章的标题和内容。这里header标签的使用并不是页面的页头,而是文章的页头。

所以在HTML5中,header的使用更加灵活,你可以根据你的需要来定义和组织document结构。

同样,在架构页面时,header标签一般都放在页面的顶部,但是如果你想把他放在左侧,右侧甚至底部都没有关系,标签只定义了本身在页面的角色,而不是位置。当然更具搜索引擎优化原则,重要内容最后在架构页面的时候提前。
最后由于在HTML5中header属于块元素,如果我们要在大多数主流浏览器使用的话最好定义CSS,如下。

CSS Code复制内容到剪贴板
  1. header { display:block;}  
HTML / CSS 相关文章推荐
css3实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 #HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 #HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 #HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 #HTML / CSS
浅谈html5增强的页面元素
Jun 14 #HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 #HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 #HTML / CSS
You might like
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php文件上传类完整实例
2016/05/14 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
Python3基础之函数用法
2014/08/13 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
Python实现登陆文件验证方法
2018/10/06 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python中捕获键盘的方式详解
2019/03/28 Python
python同步两个文件夹下的内容
2019/08/29 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python 读取数据库并绘图的实例
2019/12/03 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
创先争优制度
2014/01/21 职场文书
有创意的广告词
2014/03/18 职场文书
家长意见书
2015/06/04 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python
AngularJS实现多级下拉框
2022/03/25 Javascript