项目3任务4ppt课件.pptx
项目3任务4项目3 对网页广告单页进行响应式改造任务3.4 测试及兼容性设置HTML5+CSS3网页布局学校名称：任课老师：联系电话：目录CONTENTS0102学习目标03任务描述04知识学习与课堂练习05任务实施06任务回顾任务拓展01 1、能描述各个浏览器对HTML5及CSS3的兼容情况； 2、能根据浏览器兼容性情况使用CSS3前缀解决兼容性问题； 3、能够使用W3C提供的验证工具对自己做的网页进行验证，并能根据验证结果修改不符合W3C规范的代码。02 完善上一任务的系部宣传网页，让该网页的兼容性更强。并使用W3C对该网页进行验证，确认是否符合W3C标准。学习 1、浏览器对HTML5及CSS3的兼容情况 2、CSS3前缀 3、W3C验证工具完成 1、增加了能根据浏览器情况自动添加CSS前缀的JS脚本 2、利用W3C验证工具对页面进行了HTML5和CSS3验证04知识学习与课堂练习 目前，支持CSS3和HTML5的浏览器变得越来越多，包括最新版的Microsoft Edge浏览器。但是，由于CSS3和HTML5的W3C规范在不断的完善，浏览器的兼容性也在不断的更新。 目前IE，Firefox，Opera，Chrome，Safari五大主流浏览器对 HTML5 和 CSS3 各种特性都有比较好的支持，HTML5正在成为开发的主流。1、五大浏览器对CSS3和HTML5兼容性比较04知识学习与课堂练习 图3.4-1 国内占98.09%市场份额浏览器各版本使用情况 注：第3、4、6列分别为Firefox、Chrome和Opera，数据来自http:/ 各浏览器版本对CSS3、HTML5、JS、JS API、Other、Security、SVG等的支持情况由于版本不断更新，请自行前往http:/ 浏览器一直都在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法存在波动时，它们提供针对浏览器的前缀。现在主要流行的浏览器内核主要有： （1）Trident内核：主要代表为IE浏览器； （2）Gecko内核：主要代表为Firefox； （3）Presto内核：主要代表为Opera； （4）Webkit内核：产要代表为Chrome和Safari。 针对这些不同内核的浏览器，CSS3部分属性需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性：2、CSS3前缀浏览器内核前缀IETrident-msFirefoxGecko-mozOperaPresto-oChrome、SafariWebkit-webkit04知识学习与课堂练习 比如，为了兼容各个浏览器，我们写一个圆角border-radius，需要这样写：.box -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;2、CSS3前缀04知识学习与课堂练习 但这样编写代码，无形之中给前端人员增加了不少工作量，那么如何在编写CSS时不需要添加浏览器的私有前缀，又能让浏览器识别呢？ 我们可以通过引用一个prefixfree脚本来解决这个问题。只需要在.html文件中插入一个prefixfree.js文件（建议把这个脚本文件放在样式表之后）。 添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。如上面的圆角border-radius，我们只需要这样写： .box border-radius: 6px; prefixfree脚本仅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支持。 但是对于开发人员来说，使用这个方法也是需要调试的。一旦客户端禁用了JavaScirpt，它的功能会失效。另外对于客户体验来说，也有一定影响。2、CSS3前缀04知识学习与课堂练习课堂练习3.4-1 制作如下图效果的图像html1css123456789div width:200px; height:100px; background: #80A060; background-image: linear-gradient(transparent, rgba(10,0,0,.3); /*线性渐变*/border-radius: 50%; box-shadow: 1em 2em 4em -2em black; /*阴影*/transform: rotate(15deg); js1204知识学习与课堂练习 在本教程的项目一中我们已经介绍过W3C标准了，知道我们在建设网站时应该要保证代码符合W3C规范。 那要如何验证我们编写的代码符合W3C标准呢？ W3C本身已经提供了该验证服务，可以为互联网用户检查HTML文件是否附合HTML或XHTML标准，并且向网页设计师提供快速检查网页错误的方法。 W3C html 验证地址： W3C css 验证地址：3、W3C验证04知识学习与课堂练习 （1）将课堂练习3.4-1的代码上传到网址，如果出现以下语句，则说明你的html已经通过验证。 （2）将课堂练习3.4-1的代码上传到http:/网址，如果出现以下语句，则说明你的css也已经通过验证。课堂练习3.4-2 验证课堂练习3.4-1是否符合W3C标准05任务实施 1、下载并引用prefixfree脚本，让网页兼容性更强。在样式表之后添加prefixfree.js文件。 2、将自己所写的系部宣传网页上传到和http网址，验证网页是否符合W3C标准。06任务回顾学习 1、浏览器对HTML5及CSS3的兼容情况 2、CSS3前缀 3、W3C验证工具完成 1、增加了能根据浏览器情况自动添加CSS前缀的JS脚本 2、利用W3C验证工具对页面进行了HTML5和CSS3验证07任务拓展 如何处理CSS3属性前缀？ 其它解决方案： 编辑器Autoprefixer插件 预处理器中的混合宏 使用Autoprefixer感谢聆听！THANK YOU!HTML5+CSS3网页布局学校名称：指导老师：联系电话：
