几个最常用的用来代替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. 从ICLassFactory 为 CLSID的COM组建创建实例失败:c001f011

    在sqlserver创建计划任务的时候,保存时出现:“从ICLassFactory 为 CLSID的COM组建创建实例失败:c001f011”. 解决方法:在运行sqlserver时,使用“以管理员身 ...

  2. NOIP 2012 T5 借教室 [洛谷P1083]

    题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要 向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们自 ...

  3. NOIP2011 普及组 T3 洛谷P1309 瑞士轮

    今天题做太少,放道小题凑数233 题目背景 在双人对决的竞技性比赛,如乒乓球.羽毛球.国际象棋中,最常见的赛制是淘汰赛和循环赛.前者的特点是比赛场数少,每场都紧张刺激,但偶然性较高.后者的特点是较为公 ...

  4. DLUTOJ 1331 Maximum Sum

    传送门 Time Limit: 1 Sec  Memory Limit: 128 MB  Description You are given an array of size N and anothe ...

  5. .NET笔试面试题

    .NET 1.const和readonly的区别? 2.静态类和实例区别?什么时候使用? 3.接口和抽象类的区别?什么时候使用? 4.类和结构体的区别?什么时候使用? 5.文件操作 6.序列化 7.O ...

  6. java调用本地方法的时候报错 could not find the main class:xx.program will exit

    如图所示,当在java调用本地方法的时候报错 我的解决办法是把dll文件放到System.out.println(System.getProperty("java.library.path& ...

  7. Powerdesigner自定义DBMS(以derby数据库为例)

    Powerdesigner自定义DBMS Powerdesigner以下简称PD.PD默认支持的DBMS不够用时,我们就需要自己定义了.以apache derby数据库为例.1.DBMS的定义文件PD ...

  8. [整理]Code::Blocks使用遇到的问题

    在使用其编写C小程序的过程总会遇到些问题,特整理如下: 1.无法调试 注意的是项目所在的文件路径不能包含中文. 2.头文件接口函数申明引用无效 查看头文件是否处于可编译状态,左侧项目文件列表里是文件名 ...

  9. 抓包工具 wireshark

    http://fangxin.blog.51cto.com/1125131/735178

  10. thinkphp中field方法

    hinkPHP的CURD操作中有很多非常实用的方法,从这篇开始,我们会为大家一一介绍. 首先为大家介绍下field方法的用法.field属于模型的连贯操作方法之一,主要目的是标识要返回或者操作的字段, ...