HTML5和css3

H5和CSS3新增內容 HTML5新增標籤及屬性 CSS3新增樣式 Web API 選用標籤的標準 若是要支持比較老的瀏覽器（一般是桌面版網頁）則不使用新標籤 手機平板等網頁開發可使用新標籤 無論什麼狀況下，都應該優先根據語義來選用標籤 根據搜索引擎優化的要求和建議選用標籤 佈局 流式佈局 定位 浮動/清除 Flex 佈局框架（如Bootstrap柵格） CSS單位與計算 px % rem/em vw/vh mm/cm calc() CSS半透明/透明 大部分標籤元素默認是背景透明的，但也有不透明的（如iframe、button、圖片等） transparent RGBA HSLA opacity 動畫 transition：transition能過渡大部分樣式（http://dwz.cn/3NvjUN）並且支持多樣式同時過渡，注意標籤元素上有多個樣式類時，與過渡樣式相關的最後2個樣式會造成過渡效果。 animation：注意使用animation-play-state:paused可使動畫就地暫停，animation-play-state: ‘’可使動畫在暫停的狀態繼續進行 jQuery動畫：jQuery動畫與CSS3動畫不一樣，jQuery動畫是js驅動的，jQuery動畫與CSS3動畫是互補關係（而非誰取代誰）。jQuery內置了一些動畫，如（fadeIn/slideUp等），也支持經過animate()方法自定義動畫。並且提供了強大的動畫控制API，如動畫延遲、鏈式動畫（上一個動畫結束後開始下一下動畫）、控制動畫中止、關閉動畫效果、動畫頻率調整、還能夠指定回調函數參與每個動畫的每一步等。jQuery中的動畫返回Deferred對象，所以支持Promise異步編程。jQuery默認不能過渡顏色，使用jQuery.Color插件能夠解決問題。 觸發動畫：CSS通常在頁面加載時會自動進行transition和animation，能夠在瀏覽器的查看器（動畫窗格）中觀察到標籤元素上的動畫幀並對動畫進行控制及設置不一樣的速度進行預覽。使用:hover、:active僞類能夠配合鼠標指針觸發動畫效果。經過js添加刪除標籤元素的樣式類時也會觸發相應的動畫。jQuery動畫的觸發和控制由jQuery動畫API控制。 動畫結束事件/回調：CSS3動畫支持DOM事件：animationstart（動畫開始時）、animationend（動畫結束時）、animationiteration（動畫重複執行時），能夠像普通click事件同樣使用它們。jQuery動畫經過回調函數獲取執行完成通知，形如：$(..).animate({css}<, duration><, easing><, callbakc>)，由於jQuery動畫返回Deferred對象，因此也可使用.then(success,fail)或.done(function)等方法獲得通知。 同時進行多個動畫：在關鍵幀定義中能夠定義多個樣式，animation-name也能夠指定多個關鍵幀動畫名稱。transition-property也能夠指定多個樣式。jQuery的animate方法中也能夠指定多個樣式。還能夠在同一個標籤元素上調屢次animate方法（分開調用，而不是鏈式調用） 順序進行多個動畫：能夠經過animation-delay、transition-delay延遲，安排出順序執行效果。還能夠經過監聽動畫事件在動畫結束後再觸發下一個動畫。jQuery中animate()的鏈式調用自己就是順序執行的。 requestAnimationFrame：會與瀏覽器呈現頁面同步配合執行，所以比使用setInterval要更加流暢。requestAnimationFrame是H5新增的方法，與setInterval相比，沒有提供頻率的控制方法，由於它的頻率與頁面呈現頻率是同步的，一般60次/s，至關於16.66667ms一次。 矩陣與圖形變換 貝塞爾曲線與時間函數 媒體查詢與響應式頁面 媒體查詢@media賦予CSS探測設備類型和設備屬性（如屏幕寬高等）的能力，以前媒體查詢主要用來控制頁面打印效果（即針對頁面上打印部分定義打印專用樣式）；在移動互聯網時代媒體查詢對於頁面適配各類大小的屏幕相當重要，能夠說媒體查詢是響應式頁面的核心技術。Bootstrap就是以媒體查詢技術爲基礎的響應式UI框架。 瀏覽器兼容性和Web App頁面 瀏覽器兼容性問題涉及的面比較廣，從HTML標籤、CSS樣式到JS都存在兼容性問題。兼容性問題給Web開發形成了額外的成本支出，在兼容性上要求越高，付出的代價越大。 瀏覽器的兼容性主要經過測試解決，最爲困難的是桌面網頁兼容IE6/7/8/等老瀏覽器（可使用IE Tester測試）！解決瀏覽器兼容性沒有什麼難度，繁鎖而已，若是要兼容老瀏覽器，則應放棄使用新功能或者對老瀏覽器顯示友好的提示信息（使開發測試時間增加、成本增長）。 直接使用框架能夠有效地避免兼容性問題，如各類UI框架和jQuery框架都會考慮兼容性。另外使用重置樣式表也能夠抹平各瀏覽器的差別。 在開發Web App時須要注意，移動設備，不管是iOS仍是Android都使用Webkit內核，尤爲是iOS，須要使用如下樣式： -webkit-appearance: none; 禁用瀏覽器特定外觀（如按扭等表單元素） -webkit-tap-highlight-color: rgba(0,0,0,0); 將觸摸時的高亮顏色設爲徹底透明 -webkit-touch-callout: none; 禁用頁面上的上下文菜單（上面有複製、粘貼等功能） -webkit-text-size-adjust: none; 禁用頁面自動調整文字大小 -webkit-user-select: none; 禁止用戶選擇頁面上的文字 回彈滾動 overflow: auto; /* auto | scroll */ -webkit-overflow-scrolling: touch; 另：有一些樣式還須要使用-webkit前綴，如： CSS濾鏡要寫成-webkit-filter 或者要兼容特別老的iOS或Android系統時CSS3樣式要加-webkit前綴 另：若是須要對某些標籤進行深度控制，則須要使用-webkit僞類，如： input[type=range]::-webkit-slider-runnable-track{ } input[type=range]::-webkit-slider-thumb{ } 能夠控制滑動條的樣式 progress::-webkit-progress-bar { } progress::-webkit-progress-value { } 能夠控制進度條的樣式 另：使用meta標籤能夠要求瀏覽器支持或關閉某些行爲 禁用手機號探測 禁用email探測 固定到手機桌面（桌面書籤） 關閉iOS鍵盤首字母自動大寫，自動修正 LESS/SASS/SCSS Less 是 CSS 預處理語言，在CSS中引入了變量、函數、混入等編程機制，從而使CSS得到更高的靈活性和可擴展性。Less可使用js直接在頁面上轉換成CSS，也可使用命令行工具Lessc完成從less文件到css文件的轉換，還有相應的自動化構建插件。注意Less中使用calc()或濾鏡等函數時須要使用 ~」」或e(」」)進行轉義，不然會被誤識別爲less函數，而less中並無這些函數。 Sass （Sass3時提供了兼容CSS的語法，被稱爲SCSS）是對 CSS 的擴展，除支持變量、函數、混入外還支持條件判斷和循環語句，Sass讓 CSS 語言更強大、更優雅。 值得一提的是，Less是基於Node.js和js的，而Sass/SCSS是基於Ruby的（也須要Node.js），Sass/SCSS不能直接在頁面上經過js轉換成CSS。