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存储 缓存 拖拽

具体内容，后续完善