告别div,可以代替div的几个标签
几个最常用的用来代替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的几个标签的更多相关文章
- 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。
实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...
- $('div a') 与$('div>a'),.div+.div2与.div~.div2
$('div a'):div标签下所有层次a元素的jquery对象 $('div>a'):div标签下子元素层次a元素的jquery对象 <body> <div class=' ...
- 小 div在大 div中左右上下居中
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content=& ...
- 高宽不定的div相对父div上下、左右居中
<div class="parent"> <div class="child">123</div> </div> ...
- $('div','li'),$('div , li'),$('div li')的区别
要搞清楚$('div','li') 和 $('div , li') 和 $('div li') 区别: $('div','li'):是$(子,父),是从父节点里找子,而不是找li外面的div $('d ...
- 【转】div居中代码 DIV水平居中显示CSS代码
原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- 如何设计点击点击一个div,其他div做出对应反应,以及获取一个节点下的子节点
<div id="show"> <div>1</div> <div>2</div> <div>3</d ...
- 小div在大div中垂直居中,以及div在页面垂直居中
<html> <head> <title>淘宝 2faner</title> <style type="text/css"&g ...
- div a 和 div > a 的区别———后者指作用到div下一级的 a 标签 ,仅一级
div a 和 div > a 的区别---后者指作用到div下一级的 a 标签 ,仅一级 如: <div> <a href="#">可以作用到< ...
随机推荐
- c# 闭包 小例
class Program { static void fnnn() { string[] k = new string[] { "x", "y", " ...
- Windows下绘制数学函数图像的方法
一.安装相关软件 在Windows中安装VirtualBox: 在VirtualBox中安装Ubuntu Server: 在Ubuntu Server中安装cifs-utils:sudo apt-ge ...
- 深入分析Java Web中的中文编码问题
要对Java Web项目进行编码原因: 1.在计算机中存储信息的最小单位是1个字节,即8个bit,所以能表示的字符范围是0~255个. 2.电脑需要表示的符号太多.无法用1个字节完全表示. 要解决这个 ...
- ON THE EVOLUTION OF MACHINE LEARNING: FROM LINEAR MODELS TO NEURAL NETWORKS
ON THE EVOLUTION OF MACHINE LEARNING: FROM LINEAR MODELS TO NEURAL NETWORKS We recently interviewed ...
- --hdu 2124 Repair the Wall(贪心)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2124 Ac code : #include<stdio.h> #include<st ...
- hdu 1202 The calculation of GPA
感觉本题没有什么好解释的,已知公式,直接编程即可. 1.统计所有 科目的学分 得到总学分 2.统计所有 成绩对应的绩点*对应的学分即可(如果成绩==-1直接continue,不进行统计),得到总绩点. ...
- Unity Shader Billboard
记录来源于ShaderLab开发实战详解 Shader "Tut/Project/Billboard_1" { Properties { _MainTex ("Base ...
- cmd+lcx+nc+sc提权工具总结
cmd:执行命令的载体cmdshell lcx:端口映射工具 1.在自己的host上的cmd下运行:lcx.exe -listen 51 3389 //意思是监听51端口并转发到3389端口 2.在服 ...
- 开启Mysql远程访问的所有方法
开启Mysql远程访问的所有方法 http://superyjcqw.blog.163.com/blog/static/16105830520117111040436/ Mysql默认是不可以通过远程 ...
- 超详细cordova环境配置(windows)及实例
摘要: 最近闲来无事就把以前做的cordova项目整理了下,发现网上很少有详细完整的配置教程,所以自己就总结了下分享给大家. 项目地址:https://github.com/baixuexiyang/ ...