虽说html5中大多数功能性的元素如<video><canvas><audio>等还得不到当前主流浏览器的支持(主要就是指IE浏览器了),但至少那些个与布局相关的元素同html5.js结合起来时我们是可以放心使用的,比如<header>,<footer>,<nav>,<section>,<article>,<aside>,<figure>这几个最常用的元素。

Article 和 Section

article元素是文档中的独立部分,博客条目、文章或其它由文字构成的内容都应该使用这个标签。基本上,你可以很广泛的使用这个标签来构造页面的文字部分。

section元素是最容易让人误解的元素,因为人们认为它就是用来代替div元素的,但事实并非如此。实际上,section元素与article元素的关系非常紧密,比如一篇文章中的章节可以用section标签来区分。总的来说,这个标签主要用来把页面的内容部分划分成有内在关系的几个区域。

Header 和 Footer

这两个元素自不用说了,分别代表页面的头部和底部。但话说回来,这两个元素代表的不仅仅就只是传统意义上我们所讲的页面头部和底部,事实上,它们可以被更加灵活的在页面各个部分进行应用。

Nav

nav元素主要是指页面的导航菜单部分,里面可包含能链接到页面其他部分的超链接。总之记住在页面的导航区域使用该标签就对了。

Figure 和 Figcaption

跟据w3c的说法,这两个元素是用来表示在主文档流之外但又跟文档内容息息相关的那些个部分,其实主要就是指图表、图像、数据引用等这些个能更好的体现文档内容的东西,而且删掉也不会影响主文档内容。Figcaption是指这些多媒体元素的标题。

Aside

aside元素是指脱离主文档主题之外或以主文档内容关系不大的那些区域,典型的应用就是页面的侧边栏之类的啦。

之后在构造页面的时候就多想想吧,看看哪些div是能用上面那些标签来代替的。如果确实是找不到对号入座的元素,那就还是用div吧,因为div在HTML5中并没有被废除,只是作用减弱了而已。对了,在不支持html5标签的浏览器中千万别忘加上html5.js哦!

引:http://www.cnblogs.com/2050/archive/2012/04/26/2471637.html

几个最常用的用来代替Div的HTML5元素的更多相关文章

  1. Selenium常用API的使用java语言之5-selenium元素定位

    1.selenium定位方法 Selenium提供了8种定位方式. id name class name tag name link text partial link text xpath css ...

  2. php中的常用数组函数(二)(数组元素过滤 array_filter())

    array_filter($arr, 'filter_func'); //参数1,要过滤的数组 //参数2,过滤的函数,返回false时,不添加这个元素,返回true添加这个元素. 示例代码: /** ...

  3. HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器

    1,公共样式,在公共的 CSS 文件中加入以下内容  /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...

  4. 常用技巧之JS判断数组中某元素出现次数

    先上代码:function arrCheck(arr){  var newArr = [];  for(var i=0;i<arr.length;i++){    var temp=arr[i] ...

  5. 分治思想 特别常用 Codeforces Beta Round #80 (Div. 1 Only) D

    D. Time to Raid Cowavans time limit per test 4 seconds memory limit per test 70 megabytes input stan ...

  6. 【JS 常用操作】全选、给后来元素增加事件

    11 //全选 $("#allCheckbox").click(function () { var checkedStatus = this.checked; //alert(ch ...

  7. 吴裕雄--天生自然java开发常用类库学习笔记:排序及重复元素说明

    import java.util.Set ; import java.util.HashSet ; class Person{ private String name ; private int ag ...

  8. 告别div,可以代替div的几个标签

    几个最常用的用来代替DIV的HTML5元素 虽说html5中大多数功能性的元素如<video><canvas><audio>等还得不到当前主流浏览器的支持(主要就是 ...

  9. Java常用的几种集合, Map集合,Set集合,List集合

    Java中  Object是所有类的根 Java集合常用的集合List集合.Set集合.Map集合 Map接口常用的一些方法 size() 获取集合中名值对的数量 put(key k, value v ...

随机推荐

  1. 浩瀚PDA开单器-结束手工开单模式【百货、商超】PDA安卓智能手持POS 进销存管理系统移动收银管理软件

    移动销售终端:先进的跨平台技术,支持智能PDA等移动终端提供移动销售开单.移动POS.移动查询货品.移动盘点等功能. 移动开单器的操作说明 第一步:选客户 Ø        用户在空白开单主页左划屏幕 ...

  2. su root认证失败的解决方法

    sudo passwd 输入安装密码. 输入新密码. 输入 su 即获得root权限.

  3. [深度学习大讲堂]从NNVM看2016年深度学习框架发展趋势

    本文为微信公众号[深度学习大讲堂]特约稿,转载请注明出处 虚拟框架杀入 从发现问题到解决问题 半年前的这时候,暑假,我在SIAT MMLAB实习. 看着同事一会儿跑Torch,一会儿跑MXNet,一会 ...

  4. 利用Simple-RTMP-Server(SRS)来进行直播

    1.下载SRS 官方地址:http://www.ossrs.net/srs.release/releases/ 百度地址:http://pan.baidu.com/s/1kV8WQpx 2.编译安装S ...

  5. 【ORACLE】字符串操作 B字符串时A的一部分

    select * from a where instr(a,b)>0;用于实现B字段是A字段中的某一部分的时候,要论顺序或者要相邻的字符. 如果想要不论顺序或者不相邻的字符时,定义函数可以实现: ...

  6. Web API Get Started First

    注:此博客是自官网修剪而来,博主IT新手 一.web api与web service的不同: web api是基于Http协议,而web service是基于soap协议.两协议的区别小子看了很多,但 ...

  7. centos中docker mongodb 配置

    安装docker,对于Centos7,如下: $ sudo yum update$ sudo yum -y install docker$ sudo systemctl start docker 首先 ...

  8. winfrom组件圆角

    精简后,就其实一点,只要有paint事件的组件,都可画圆角,没有的外面套一个panel就行了. using System; using System.Collections.Generic; usin ...

  9. java分享第二十天(build.xml的语法及写法)

    通常情况下,Ant构建文件build.xml应该在项目的基础目录.可以自由使用其他文件名或将构建文件中其他位置.在本练习中,创建一个名为build.xml 在电脑的任何地方的文件. <?xml ...

  10. JMF框架

    Java媒体框架(JMF)使你能够编写出功能强大的多媒体程序,却不用关心底层复杂的实现细节.JMF  API的使用相对比较简单,但是能够满足几乎所有多媒体编程的需求.在这篇文章中,我将向你介绍如何用很 ...