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腳本，讓網頁兼容性更強。在樣式表之后添