几个最常用的用来代替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. POJ1002 487-3279

    Description 企业喜欢用容易被记住的电话号码.让电话号码容易被记住的一个办法是将它写成一个容易记住的单词或者短语.例如,你需要给滑铁卢大学打电话时,可以拨打TUT-GLOP.有时,只将电话号 ...

  2. nopCommerce 安装失败: 引发类型为“System.OutOfMemoryException”的异常。

    如果你在安装nopCommerce 3.00版本的时候报如上异常,解决方案: 1.在服务器上检查内存是否已经满了,因为nopCommerce 在安装的时候需要很多内存. 2.关闭占用内存大的进程,保证 ...

  3. PowerDesigner反向数据库时遇到[Microsoft][ODBC SQL Server Driver][SQL Server]无法预定义语句。SQLSTATE = 37错误解决方法

    逆向工程中,有时会出现如下错误 ... [Microsoft][ODBC SQL Server Driver][SQL Server]无法预定义语句 SQLSTATE = 37000 解决方案: 1. ...

  4. python库requests登录zhihu

    废了很大劲,开始搞错了登录post信息的网址,后来没找到xsrf信息,看了很多文章才搞定. 大概过程如下: 打开登录页面,同时打开fldder,输入信息去监控过程. 查看post了哪些信息,哪些是自己 ...

  5. _stdcall与_cdecl(了解)

    调用约定(Calling Convention)是指在程序设计语言中为了实现函数调用而建立的一种协议.这种协议规定了该语言的函数中的参数传送方式.参数是否可变和由谁来处理堆栈等问题.不同的语言定义了不 ...

  6. How much training data do you need?

    How much training data do you need?   //@樵夫上校: 0. 经验上,10X规则(训练数据是模型参数量的10倍)适用与大多数模型,包括shallow networ ...

  7. Matplotlib中文设置

    1.中文设置方法,代码前加入语句 from pylab import mpl mpl.rcParams['font.sans-serif'] = ['SimHei'] 2.例子 # -*- codin ...

  8. iOS Application Life Cycle 应用程序生命周期

    应用程序的状态 IOS的应用程序一共有5种状态. Not running(未运行):程序未启动 Inactive(未激活):其他两个状态切换时出现的短暂状态.唯一在此状态停留时间比较长的情况是:当用户 ...

  9. memcache内存分配机制

    memcached的内存分配没有用到c语言中自带的malloc函数,因为这个函数分配内存的时候效率很低,对于这种要求快速响应,对效率要求非常高的缓存软件来说非常不合适. memcached用的是自己的 ...

  10. goquery

    使用goquery 会用jquery的,goquery基本可以1分钟上手,下面是goquery文档 http://godoc.org/github.com/PuerkitoBio/goquery 1. ...