HTML5新增非主体结构元素
2016-07-20 21:32
639 查看
header元素
footer 元素和 hgroup 元素
address 元素和网页编排规则
显示编排内容区域块
隐示编排内容区域块
标题分级
不同区域块可以使用相同级的标题
footer 元素和 hgroup 元素
address 元素和网页编排规则
header元素
header 元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,例如数据表格、搜索表单或相关的 logo 图片<header> <h1>学习</h1> <a href="www.baidu.com" target="_blank">百度</a> <nav> <ul> <li>学习</li> <li>学习</li> <li>学习</li> </ul> </nav> </header>
footer 元素和 hgroup 元素
footer 元素可以作为其上层父级内容区块或是一个根区块的脚注。footer 通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。<footer> <ul> <li><a href="#">学习</a></li> <li><a href="#">学习</a></li> <li><a href="#">学习</a></li> </ul> </footer> <article> <footer> <a href="#">学习</a> </footer> </article> <section> <footer> <a href="#">学习</a> </footer> </section> <article> <header> <!--hgroup 在同级,但是有父子关系--> <hgroup> <h1>标题</h1> <h2>标题2</h2> </hgroup> <p>简介</p> </header> <div>这是内容</div> <footer>这是底部</footer> </article>
address 元素和网页编排规则
address 元素用来在文档中呈现联系信息,包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address 应该不只用来呈现电子邮箱或真实地址,还用来展示跟文档相关的联系人的所有联系信息。<footer> <address> <a href="#">小雨</a> <a href="#">地址</a> <a href="#">2016-11-11</a> </address> </footer>
显示编排内容区域块
隐示编排内容区域块
标题分级
不同区域块可以使用相同级的标题
<body> <header> <h1>大标题</h1> </header> <article> <hgroup> <h1>文字标题</h1> <h2>文字子标题</h2> <p>内容</p> </hgroup> <section> <div> <article> <h1>文字标题</h1> <p>内容</p> </article> </div> </section> </article> <footer> <h1>注脚</h1> </footer> </body>
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧
- 原生js结合html5制作小飞龙的简易跳球
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)