HTML5基礎

html5是目前html的最新標準，目的是爲了在移動設備上支持媒體，另html中需要注意viewport的使用
<mata name="viewport" content="width:device-width,initial-scale=1.0,maximum-scale=1.0",minimum-scale=1.0,user-scalable=no/>

屬性說明：

 width:device-width//設置寬度爲設備的寬度；
 initial-scale=1.0//設置初始加載時的比例
 maximum-scale=1.0//設置屏幕最大縮放比例
 minimum-scale=1.0//設置屏幕最小縮放比例
 user-scalable=no//設置屏幕是否允許縮放
 注意：
 	1.當 maximum-scale < initial-scale 以 maximum-scale爲準，同時
 	不管user-scale設置與否，均不可放大；
 	2.當設置user-scalable=no,屏幕不可縮放，初始比例受最大 maximum-scale 
 	最小 minimum-scale 縮放比例影響

html5在html中的變化

html5除了支持原html，另外引入了新的功能：

1. 新語義化標籤 (導航欄nav，頭部header，底部footer等)

2. 新增表單元素及屬性
   -form表單中新增表單元素：input的type(color，url，email，date，range，number，tel，placeholder等)；
   -新增屬性：novalidate(表單元素不做校驗)，autocomplete=“on/off”(表單是否自動提示)，autofocus(自動獲取焦點)，required(表單中是否爲必填項)
   ※ Tip: 當元素屬性名和屬性值相同時，可以省略

3. 多媒體標籤 新增audio(音頻MP3，ogg，wav)、video(視頻MP4，ogg，webM)

   <!-- 音頻  controls控制控件是否顯示 loop循環播放 autoplay自動播放-->
   <!--  <audio src="1.mp3" controls loop autoplay></audio> -->
   <!-- <video src="1.mp4" controls></video> -->
   <audio controls>
       <source src="1.mp3">
       <source src="1.wav">
       <source src="1.ogg">
        your bowswe doesn't support audio
   </audio>
   <video controls loop autoplay>
       <source src="1.mp4">
       <source src="1.ogg">
        your bowswe doesn't support video
    </video>   
   

4. html5新標籤兼容問題
   在ie8及以下版本，不支持html5新增元素及屬性（palceholder）：
   eg：IE8及IE8以下版本不支持nav,header,footer等
   處理方案：
   1.使用js創建標籤使瀏覽器可以使用；
   代碼：
   <!--[if lt IE 9]> <script> document.createElement("nav") </script> <![endif]-->
   lt IE 9表示ie版本小於IE 9

   2.引入html5shiv.js
   html5shiv 是一個針對 IE 瀏覽器的 HTML5 JavaScript 補丁，
   目的是讓 IE 識別並支持 HTML5 元素。
   具體參考：html5shive官網
   代碼如下：
   <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.js"></script> <![endif]-->
   placeholder是html5的新屬性，可想而知，僅支持html5的瀏覽器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。

    $(function() {
    // 如果不支持placeholder，用jQuery來完成
    if(!isSupportPlaceholder()) {
    // 遍歷所有input對象, 除了密碼框
    $('input').not("input[type='password']").each(
        function() {
          var self = $(this);
           var val = self.attr("placeholder");
           input(self, val);
         }
       ); 
   

html5在css中的變化 css3 2D 3D

1.2D主要有：
    transform:translate(100px,100px)//改變元素位置：水平方向、垂直方向
    transform:scale(1.2,1.2)//水平放大縮小、垂直放大縮小
    transform:rotate(360deg)//360度旋轉
    transform:skew(30deg,0deg)//傾斜30度
    transition:all 1s//設置過渡

效果可參考：MDN web docs

html5在js中的變化 如地理定位 web存儲 緩存 拖拽

具體內容，後續完善