几个最常用的用来代替DIV的HTML5元素

虽说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哦!

告别div,可以代替div的几个标签的更多相关文章

  1. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  2. $('div a') 与$('div>a'),.div+.div2与.div~.div2

    $('div a'):div标签下所有层次a元素的jquery对象 $('div>a'):div标签下子元素层次a元素的jquery对象 <body> <div class=' ...

  3. 小 div在大 div中左右上下居中

    <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content=& ...

  4. 高宽不定的div相对父div上下、左右居中

    <div class="parent"> <div class="child">123</div> </div> ...

  5. $('div','li'),$('div , li'),$('div li')的区别

    要搞清楚$('div','li') 和 $('div , li') 和 $('div li') 区别: $('div','li'):是$(子,父),是从父节点里找子,而不是找li外面的div $('d ...

  6. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  7. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  8. 如何设计点击点击一个div,其他div做出对应反应,以及获取一个节点下的子节点

    <div id="show"> <div>1</div> <div>2</div> <div>3</d ...

  9. 小div在大div中垂直居中,以及div在页面垂直居中

    <html> <head> <title>淘宝 2faner</title> <style type="text/css"&g ...

  10. div a 和 div > a 的区别———后者指作用到div下一级的 a 标签 ,仅一级

    div a 和 div > a 的区别---后者指作用到div下一级的 a 标签 ,仅一级 如: <div> <a href="#">可以作用到< ...

随机推荐

  1. Windows Server 2008 显示桌面图标

    相信有朋友们有安装使用过windows 2008 server服务器,刚安装好的时候,桌面上只有一个回收站的图标,它没有像windows 7或windows 8一样可以直接通过右击鼠标的菜单来设置,要 ...

  2. Java NIO、NIO.2学习笔记

    相关学习资料 http://www.molotang.com/articles/903.html http://www.ibm.com/developerworks/cn/education/java ...

  3. 自动打包iOS项目

    基于Lexrus的博文iOS-makefile,本文对自动打包涉及到的操作步骤以及理论基础进行了适当的补充.     请在阅读本文前先阅读<iOS makefile>.文章地址:http: ...

  4. Hibernate配置问题

    Hibernate是对持久化对象操作,生成SQL语句达到操作数据库目的. 1.Hibernate可以通过两种方式来配置 (1).hibernate.cfg.xml,在此文件里hibernate-con ...

  5. thinkphp空控制器的处理

    <?php namespace Admin\Controller; use Think\Controller; class DengLuController extends Controller ...

  6. 禁止掉非法IP登陆服务器

    今天查看线上服务器日志/var/log/secure发现有很多国外的ip尝试登陆服务器,以前一直没太注意这方面,作为系统管理员真是失职啊,虽然服务器已经设置了强密码,但是看到有人想搞你还是很不爽的.一 ...

  7. web图片使用

    1. jpg.png.gif 适用场景 jpg 色彩丰富.大的图片例如 写实的图像,商品图片,人像,实物素材的广告banner等 png 色彩较少,有透明,或 具备较大亮度差异及强烈对比的图像,例如 ...

  8. 用开源Look&Feel (Substance)写 漂亮的Swing应用程序

    今天用Swing 做了一个模仿QQ2009的登录界面,用到了开源的Look&Feel (Substance),在使用的过程中遇到了一些问题,也学到了一些技巧.Substance (https: ...

  9. ETHERNET数据包格式( IP & UDP & ICMP & ARP )

    ETHERNET数据包格式( IP & UDP & ICMP & ARP ) ETHERNET数据包格式 一.ETHERNET 数据包的协议类型 TYPE 的值为 0x0800 ...

  10. git windows中文目录乱码问题解决

    转自:http://blog.chinaunix.net/uid-9789774-id-3080448.html Git的Windows版本Msysgit对中文的支持不够好 当使用时,会出现以下三种情 ...