• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 浅析HTML5中header标签的用法

浅析HTML5中header标签的用法

作者:雨打浮萍 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含HTML5,header等相关知识,雨打浮萍 希望在学习及工作中可以帮助到您

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

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

  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,如下。

  1. header { display:block;}  

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03H5的所有元素及基本语法归纳
  • 2018-12-03详解如何用HTML5 Canvas API控制图片的缩放变换_html5教程技巧
  • 2017-08-06利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
  • 2018-12-03html5 表单、select 下拉、textarea多行文本的介绍
  • 2018-12-03HTML5页面调起APP功能的方法试验
  • 2018-12-03利用HTML5中的Canvas绘制笑脸的代码
  • 2017-08-06利用HTML5 Canvas制作键盘及鼠标动画的实例分享
  • 2018-12-03HTML5学习笔记简明版(2):新元素之section,article,aside
  • 2018-12-03前端性能优化的方法?
  • 2017-08-06极简的HTML5模版

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 将HTML5封装成android应用APK文件的几种方法
    • HTML5 元素通用DOM接口
    • 逼真的HTML5树叶飘落动画
    • html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
    • HTML5 Video/Audio播放本地文件
    • H5的存储方式详解
    • 关于H5的pushState和replaceState的用法分析
    • HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
    • HTML5几个设计和修改的页面范例分享
    • 后端渲染html、前端模板渲染html,jquery的html,各有什么区别?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有