html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加。
绘画canvas元素;
用于媒介回放的video和audio元素;
本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失,sessionStorage的数据在浏览器关闭后自动删除;
语意化更好的内容元素,比如article、footer、header、nav、section;
表单控件,calendar、date、time、email、url、search;
新的技术webworker,websockt和Geolocation。
(2)CSS3新特性:
- 实现圆角(border-radius),阴影(box-shadow),边框图片(border-image);
- 对文字加特效(text-shadow),强制文本换行(word-wrap),线性渐变(linear-gradient);
- 实现旋转transform:rotate(90deg),缩放scale(0.85,0.90),translate(0px,-30px)定位,倾斜skew(-9deg,0deg);
- 增加了更多的CSS选择器、多背景、rgba();
- 唯一引入的伪元素是::selection ;
- 实现媒体查询(@media),多栏布局(flex)。
(3)移除的元素
- 纯表现的元素:basefont,big,center,font,s,strike,tt,u;
- 对可用性产生负面影响的元素:frame,frameset,noframes;
(4)HTML5新标签的浏览器兼容问题是浏览器不能识别HTML5新标签而不能使用,解决办法有两种:
- 方法1:实现标签被识别
通过document.createElement(tagName)方法即可让浏览器识别新标签,浏览器支持新标签后,还可以为新标签添加CSS样式。
- 方法2:JavaScript解决方案
A)使用html5shim:
在<head>中调用以下代码:
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
当然也可以直接把这个文件下载到自己的网站上,但这个文件必须在head标签中调用。
B)使用kill IE6
在</body>之前调用以下代码:
<!--if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->
(5)区分HTML和HTML5:
- DOCTYPE声明
- 新增的元素
html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?的更多相关文章
- atitit.Servlet2.5 Servlet 3.0 新特性 jsp2.0 jsp2.1 jsp2.2新特性
atitit.Servlet2.5 Servlet 3.0 新特性 jsp2.0 jsp2.1 jsp2.2新特性 1.1. Servlet和JSP规范版本对应关系:1 1.2. Servlet2 ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
- HTML5 的新特性以及新标签的浏览器兼容问题
新特性: HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 1) 拖拽释放(Drag and drop) API 2) 语义化更好的内容标签(heade ...
- html5有哪些新特性?如何处理html5新标签的浏览器兼容问题?如何区分html和html5?
h5新特性: 语义化标签:<hrader></header> .<footer></footer>.<nav></nav>.&l ...
- 【HTML5】如何处理HTML5新标签的浏览器兼容版问题
HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...
- 【ArcGIS 10.2新特性】ArcGIS 10.2 for Desktop 新特性(二)
4 三维 4.1 共享三维场景 用户能够将ArcScene文档导出为3D web场景,能够被加载到ArcGIS Online.Portal或本地Web服务器上并进行分享.这样,用户可以 ...
- db2 v9.7 新特性cur_commit 能够实现未提交读新特性cur_commit 能够实现未提交读
db2 get db cfg|find "CUR_COMMIT" 当前已落实 (CUR_COMMIT) = ON ...
- [Android 新特性] 改进明显 Android 4.4系统新特性解析
Android 4.3发布半年之后,Android 4.4随着新一代Nexus5一起出现在了用户的面前,命名为从之前的Jelly Bean(果冻豆)换成了KitKat(奇巧).这个新系统究竟都有怎样的 ...
- 如何处理HTML5新标签的浏览器兼容问题?
方法一 : 1.使用静态资源的html5shiv包 <!--[if lt IE9]> <script src="http://cdn.static.runoob.com/l ...
随机推荐
- Linux安装phpMywind
1.安装MySQL http://www.cnblogs.com/wangshuyi/p/6091244.html 2.安装apache.php.及其扩展 yum install -y httpd p ...
- PHPStorm操作小技巧
1.围绕选中字符输入引号或者括号 2.设置服务器部署 3.隐藏Project快捷键 Shift + Esc 4.IDE内窗口切换 Ctrl + TAB 5.关闭当前项目 File -> Clos ...
- 将静态网页部署到git上访问
1.将已有的项目放在github上 http://www.cnblogs.com/zqunor/p/6583182.html 2.出现错误解决方案 提交错误 http://blog.csdn.net/ ...
- First Android application
In eclipse ADT : 1.创建一个新工程 File -> New -> Android Application Project 2.三个主要的文件 /src/MainActiv ...
- Cassandra概念学习系列之Windows里下载且安装配置Cassandra(最新的3.11.1版本)(图文详解)
不多说,直接上干货! 最近我开始在windows环境中使用Cassandra,虽然在Cassandra站点的安装命令非常清楚和精简,我仍然在环境配置上遇到一些问题.所以我想为后来者分享下我的经验. ...
- 2-4 js基础-事件对象小结
var e=ev||event; e.cancelBubble=true; document.documentElement html document.body ...
- C++实现二叉排序树
1.定义 二叉排序树(Binary Sort Tree),又称二叉查找树(Binary Search Tree),亦称二叉搜索树. 二叉排序树或者是一棵空树,或者是具有下列性质的二叉树: (1)若左子 ...
- CC2530zigbee技术-简介协议栈
前言 说实话,我喜欢自己的原创,虽然我写得可能简单了,但我觉得自己在写博客的路途上,一点一点地积累知识,我也借鉴别人的东西,特别是在写这篇文章时所使用的是markdownpad2写的,原来我根本就不知 ...
- Ruby(3):基本语法中
字符串分割成数组: 可以使用先scan再join的方法,当然其实有更好的 split方法,专门用来分割字符串 # 在Ruby中,如果不使用inspect,直接使用puts输出数组,那么每个元素会占用一 ...
- 【AngularJs】---JSONP跨域访问数据传输(JSON_CALLBACK)
大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...