没有合适的资源?快使用搜索试试~ 我知道了~
五分钟学会HTML5!(二) - OPEN 开发经验库1
需积分: 0 0 下载量 135 浏览量
2022-08-04
12:14:55
上传
评论
收藏 542KB PDF 举报
温馨提示
试读
5页
(二)您的评价: 4.0收藏2收藏原文链接是http://www.codeproject.com/KB/solutioncenter/HTML5in5.a
资源详情
资源评论
资源推荐
2016/6/3 五分钟学会HTML5!(二)OPEN开发经验库
http://www.openopen.com/lib/view/open1326878383577.html 1/5
首页(http://www.openopen.com/)代码(http://www.openopen.com/code/)文档(http://www.openopen.com/doc/)问答
全部经验分类
(/lib/list/all)
Android(/lib/tag/Android) IOS(/lib/tag/IOS) JavaScript(/lib/tag/JavaScript)
所有分类(/lib/list/all)>开发语言与工具(/lib/list/36)>前端技术(/lib/list/55)>HTML5(/lib/list/181)
五分钟学会HTML5!(二)
HTML5(/lib/tag/HTML5) 2012011817:21:57发布
您的评价:4.0
收藏
2收藏
原文链接是http://www.codeproject.com/KB/solutioncenter/HTML5in5.aspx
(http://www.codeproject.com/KB/solutioncenter/HTML5in5.aspx).
HTML5开发与旧式浏览器的兼容
我们已经讨论了HTML5许多很酷的新功能,包括新的语义元素、为画图而生的canvas标签,以及音频与视频支持。
你可能会想:这些东西是很好,但当用户的浏览器不兼容HTML5时,可能就没法使用它们了。更不用说一些所谓
的“支持”HTML5的浏览器,实际上只支持它的一部分功能而已。并不是所有HTML5新功能都会被所有浏览器所支
持,而且许多HTML5特性在不同浏览器上也许使用了不同的实现方式。
不过,有一种方法可以使用新的特性,同时不影响旧版浏览器对你的站点的访问。你可以使用polyfill。
根据PaulIrish的说法,polyfill是模拟未来API的shim,它向旧版浏览器提供后备的功能。当旧版浏览器不支持站点中
的某项HTML5功能时,polyfill会补充其中的空隙。学会使用这些polyfill,你就不必为了使用HTML5而抛弃那些使用
旧版浏览器的用户。
获得polyfill支持的一种方法是使用JavaScript库——Modernizr(当然可用的不止这一种)。它会带来特性侦测能
力,这样你就能检查浏览器究竟是否支持某种功能(比如canvas元素)。如果不支持,就提供一个备用的选择。
让我们研究一个示例。还记得吗?在介绍语义元素与页面布局时,我们已经使用过这个例子了。
这段代码包含了一系列不被旧版浏览器支持的新HTML5元素。记住,在IE9中,它的效果如下图所示。
enterimagedescriptionhere
我们可以使用InternetExplorer开发工具观察它在旧版IE中的模样。在InternetExplorer界面下,按F12键打开
InternetExplorer开发工具。
enterimagedescriptionhere
注意,现在的BrowserMode(在页面上方的灰色菜单栏里)被设置为IE9。单击BrowserMode,在弹出的下拉列表
中选择“InternetExplorer8”(IE8不支持HTML5)。
enterimagedescriptionhere
修改完成,转到不兼容HTML5的浏览器之后,Web页面变得如下图所示。
enterimagedescriptionhere
这个效果看起来非常差劲,但实际上问题没那么严重。页面布局变得乱糟糟的原因,是IE8没能识别我所使用的那些
HTML5新元素,于是就没有把它们加到DOM,随之而来的就是我们不能使用CSS去设计页面。
尽管如此,增加一条对Modernizr的引用(不需要改动任何其他代码!),就会把这些元素强制放入DOM。从
http://www.modernizr.com/download/(http://www.modernizr.com/download/)下载完Modernizr后,在<head>区域
添加一条引用即可,代码如下所示。
有只风车子
- 粉丝: 31
- 资源: 329
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于MATLAB的图像分割源码+详细文档+全部数据(高分课程设计).zip
- 基于MATLAB的图像分割源码+详细文档+全部数据(高分课程设计).zip
- 基于MINST数据库的手写体数字识别CNN设计,MATLAB实现源码+全部资料.zip
- 基于MINST数据库的手写体数字识别CNN设计,MATLAB实现源码+全部资料(高分项目)
- stata 经纬度计算反距离矩阵的方法.docx
- ORACLE数据库面试题解答DBA数据库管理员JAVA程序员架构师必看.docx
- stata 经纬度计算反距离矩阵的方法.zip
- ORACLE数据库面试题解答DBA数据库管理员JAVA程序员架构师必看.zip
- 华为-华为od题库练习题之密码截取.zip
- 华为-华为od题库练习题之字符串加解密.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0