几个最常用的用来代替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哦!
引:http://www.cnblogs.com/2050/archive/2012/04/26/2471637.html
几个最常用的用来代替Div的HTML5元素的更多相关文章
- Selenium常用API的使用java语言之5-selenium元素定位
1.selenium定位方法 Selenium提供了8种定位方式. id name class name tag name link text partial link text xpath css ...
- php中的常用数组函数(二)(数组元素过滤 array_filter())
array_filter($arr, 'filter_func'); //参数1,要过滤的数组 //参数2,过滤的函数,返回false时,不添加这个元素,返回true添加这个元素. 示例代码: /** ...
- HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器
1,公共样式,在公共的 CSS 文件中加入以下内容 /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...
- 常用技巧之JS判断数组中某元素出现次数
先上代码:function arrCheck(arr){ var newArr = []; for(var i=0;i<arr.length;i++){ var temp=arr[i] ...
- 分治思想 特别常用 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 ...
- 【JS 常用操作】全选、给后来元素增加事件
11 //全选 $("#allCheckbox").click(function () { var checkedStatus = this.checked; //alert(ch ...
- 吴裕雄--天生自然java开发常用类库学习笔记:排序及重复元素说明
import java.util.Set ; import java.util.HashSet ; class Person{ private String name ; private int ag ...
- 告别div,可以代替div的几个标签
几个最常用的用来代替DIV的HTML5元素 虽说html5中大多数功能性的元素如<video><canvas><audio>等还得不到当前主流浏览器的支持(主要就是 ...
- Java常用的几种集合, Map集合,Set集合,List集合
Java中 Object是所有类的根 Java集合常用的集合List集合.Set集合.Map集合 Map接口常用的一些方法 size() 获取集合中名值对的数量 put(key k, value v ...
随机推荐
- python 爬虫(五)
下载媒体文件 I 使用urllib.request.urlretrieve方法可以下载文件存为指定文件 from urllib.request import urlretrieve from urll ...
- 一个神奇的POS -扫描 现场销售 开单打印票据 安卓物联网POS机 手持开单终端机 省时省力 高效准确!!
5寸高清彩屏,高端大气上档次,小巧轻便,独特的包胶防护,坚固耐用,外形精细,美观!与软件灵活对接,解决企业手工盘点,手工输单,库存管理等困难,提高准确率,提高工作效率!! 应用领域:适用于仓库.超市. ...
- sprint3
Sprint 3计划会议: 团队: 郭志豪:http://www.cnblogs.com/gzh13692021053/ 杨子健:http://www.cnblogs.com/yzj666/ 刘森松: ...
- fragment 重叠问题
项目中用到了Android Fragment 在程序异常的时候 fragment 点击会造成fragment 重叠 在fragmentActivity中加入一下方法 @Override public ...
- css 大话盒子模型
什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...
- 关于H5框架之Bootstrap的小知识
浏览器支持 旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究 我们不是在head里面引入了下面这些文件么 &l ...
- 爬虫笔记(四)------关于BeautifulSoup4解析器与编码
前言:本机环境配置:ubuntu 14.10,python 2.7,BeautifulSoup4 一.解析器概述 如同前几章笔记,当我们输入: soup=BeautifulSoup(response. ...
- 站内全文检索服务来了,Xungle提供免费全文检索服务
免费站内全文检索服务来了,是的,你没听错.全文检索相信大家已经不太陌生,主流检索服务有sphinx.xunsearch等,但这些都受服务器限制,对于中小站长尤其是没有服务器实现就困难了,随着数据量的增 ...
- js中的navigator对象
Navigator 对象包含有关浏览器的信息.所有浏览器都支持该对象 在控制台中输出相关信息的代码 <script> console.log(navigator); </script ...
- setView的AlertDialog在受到二次点击后出错
错误报告: 10-21 13:11:16.009: E/AndroidRuntime(27937): FATAL EXCEPTION: main10-21 13:11:16.009: E/Androi ...