HTML5新增的主体元素和新增的非主体结构元素
2016-03-04 00:41
585 查看
HTML5新增的主体元素
article元素article元素表示文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章,一篇论坛帖子、一段用户评论或独立的插件,或者其他任何独立的内容。(article元素是可以嵌套使用的、article元素可以用来表示插件)
示例
<article> <h1>这是一个内嵌页面</h1> <object> <embed src="" width="600" height="400"> </object> </article>
section元素
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素
禁止
不要将section元素作为设置样式的页面容器
如果article元素、aside元素、nav元素更符合使用条件,那就不要使用section元素
没有标题内容 不要使用section元素
示例
<section> <h1>这是section</h1> <p>section是这么用的</p> </section>
nav元素
nav元素是一个可以作用页面导航的连接组,其中导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素,只需要将主要的、基本的连接组放进nav元素即可。
应用场景
传统导航条
侧边栏导航
页内导航
翻页操作
示例
<nav> <ul> <li><a href="#">主页</a></li> <li><a href="#">开发文档</a></li> <li><a href="#">代码</a></li> </ul> </nav>
aside元素
aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或者主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别与主要内容的部分
示例
<aside> <nav> <h2>评论</h2> <ul> <li><a href="#">2015-3-10</a></li> <li> <a href="#"> 这就是aside元素 </a> </li> </ul> </nav> </aside>
time元素与微格式
保存时间
示例
<time datetime="2010-10-10">2015-10-10</time>
pubdate属性(属性)
发布时间
示例
<time datetime="2015-10-10" pubdate>2015-10-10</time>
HTML5新增的非主体结构元素
header元素header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,列如数据表格、搜索表单或相关的logo图片(注意: header元素可以出现多次)
示例
<header> <h1>页面标题</h1> </header>
footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等
示例
<footer> <ul> <li><a href="#">版权信息</a></li> <li><a href="#">站点地图</a></li> <li><a href="#">联系方式</a></li> </ul> </footer>
hgroup元素
hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组,譬如一个内容区块的标题及其子元素算一组
示例
<hgroup> <h1>这是文章标题</h1> <h2>这是一个子标题</h2> </hgroup>
address元素
address元素用来在文档中呈现联系信息,包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address应该不知用来呈现电子邮箱或真实地址,还用来展示跟文档相关的联系人的所有联系信息
示例
<footer> <div> <address> <a href="#">联系人</a> xxxxx地址 </address> </div> </footer>
html5编排规格
显示编排内容区域块
隐示编排内容区域块
标题分级
不同区域块可以使用相同级别的标题
示例
<header> <h1>网页标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">帮助</a></li> </ul> </nav> </header> <article> <hgroup> <h1>文章主标题</h1> <h2>文章子标题</h2> </hgroup> <p>文章正文</p> <section> <div> <article> <h1>评论标题</h1> <p>评论正文</p> </article> </div> </section> </article> <footer> <small>版权所有.....</small> </footer>
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 原生js结合html5制作小飞龙的简易跳球
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能
- JavaScript+html5 canvas制作的百花齐放效果完整实例
- jQuery+HTML5加入购物车代码分享
- jQuery mobile 移动web(6)
- 基于Jquery和html5的7款个性化地图插件
- 实现音乐播放器的代码(html5+css3+jquery)
- 2014 HTML5/CSS3热门动画特效TOP10
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- HTML5使用DeviceOrientation实现摇一摇功能