HTML5+CSS3网页设计与制作课件：测试及兼容性设置

HTML5+CSS3网页设计与制作制作响应式网页能描述各个浏览器对HTML5及CSS3的兼容情况；能根据浏览器兼容性情况使用CSS3前缀解决兼容性问题；能够使用W3C提供的验证工具对D清单页面进行验证，并能根据验证结果修改不符合W3C规范的代码。任务目标测试及兼容性设置1、完善上一任务的D清单网页，让该网页的兼容性更强。2、使用W3C对D清单页面HTML和CSS代码进行验证，确认是否符合W3C标准。W3CCSS验证测试页面如图1-23所示。任务描述图1-23W3CHTML和CSS验证测试页面测试及兼容性设置完成对D清单页面进行兼容性测试和W3C验证测试，需要：学习常见的浏览器及其对H5的兼容性；学习并为D清单页面添加CSS3浏览器前缀；对D清单页面代码进行W3C认证测试。任务分析测试及兼容性设置知识与技能准备目前，支持CSS3和HTML5的浏览器变得越来越多，包括最新版的MicrosoftEdge浏览器。但是，由于CSS3和HTML5的W3C规范在不断的完善，浏览器的兼容性也在不断的更新。目前IE，Firefox，Opera，Chrome，Safari五大主流浏览器对HTML5和CSS3各种特性都有比较好的支持，HTML5正在成为开发的主流。1、五大浏览器对CSS3和HTML5兼容性比较知识与技能准备1.1CSS3属性目前我国用户浏览器使用情况如下图：注：第3、4、6列分别为Firefox、Chrome和Opera，数据来自

。各浏览器版本对CSS3、HTML5、JS、JSAPI、Other、Security、SVG等的支持情况由于版本不断更新，请自行前往

了解。1、五大浏览器对CSS3和HTML5兼容性比较图1-23-1国内占98.09%市场份额浏览器各版本使用情况知识与技能准备浏览器一直都在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法存在波动时，它们提供针对浏览器的前缀。现在主要流行的浏览器内核主要有：（1）Trident内核：主要代表为IE浏览器；（2）Gecko内核：主要代表为Firefox；（3）Presto内核：主要代表为Opera；（4）Webkit内核：产要代表为Chrome和Safari。针对这些不同内核的浏览器，CSS3部分属性需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性。2、CSS3前缀知识与技能准备2、CSS3前缀表1-23-2CSS3前缀这样编写代码，无形之中给前端人员增加了不少工作量，那么如何在编写CSS时不需要添加浏览器的私有前缀，又能让浏览器识别呢？我们可以通过引用一个prefixfree脚本来解决这个问题。只需要在.html文件中插入一个prefixfree.js文件（建议把这个脚本文件放在样式表之后）。添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。prefixfree脚本仅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支持。但是对于开发人员来说，使用这个方法也是需要调试的。一旦客户端禁用了JavaScirpt，它的功能会失效。另外对于客户体验来说，也有一定影响。打开VisualStudioCode，输入如下标签：课堂练习1-23-1制作如下图效果的图像html1<div></div>css123456789div{width:200px;height:100px;background:#80A060;background-image:linear-gradient(transparent,rgba(10,0,0,.3));/*线性渐变*/border-radius:50%;box-shadow:1em2em4em-2emblack;/*阴影*/transform:rotate(15deg);}js12<scriptsrc="prefixfree.min.js"type="text/javascript"></script>图1-23-2图像知识与技能准备在本教程的中我们已经介绍过W3C标准了，知道我们在建设网站时应该要保证代码符合W3C规范。那要如何验证我们编写的代码符合W3C标准呢？W3C本身已经提供了该验证服务，可以为互联网用户检查HTML文件是否附合HTML或XHTML标准，并且向网页设计师提供快速检查网页错误的方法。W3Chtml验证地址：

W3Ccss验证地址：

3、W3C验证（1）将课堂练习1-23-1的代码上传到

网址，如果出现以下语句，则说明你的html已经通过验证。（2）将课堂练习1-23-1的代码上传到

网址，如果出现以下语句，则说明你的css也已经通过验证。课堂练习1-23-2验证课堂练习1-23-1是否符合W3C标准图1-23-3CSS验证通过结果截图任务实施1、下载并引用prefixfree脚本，让网页兼容性更强。在样式表之后添