html后续

1、语义化

1、为了更好的让网络爬虫捕获你页面上的信息，更为高效的增加你网址的收录，加速搜索引擎的优化。
2、见名知意，让程序员自己看见自己的标签名就等知道该段代码的作用。

2、传统事件和现代事件的区别

1、传统事件：优点：各种浏览器都兼容。缺点：不能一次添加多个事件，不能设置事件捕获。element.onclick=function(){}
2、现代事件优点：可以一次添加多个事件，DOM浏览器可以设置事件捕获和事件冒泡，缺点：不兼容。
  DOM浏览器：element.addEventListener("click",function(){},true);
  IE浏览器：element.attachEvent("onclick",function(){});

3、拖拽问题

1、浏览器支持:IE9，firefox,Opera12、Chrome,Safari5 ,在 Safari 5.1.2 中不支持拖放。
2、设置元素为可拖放
    为了使元素可拖动，把 draggable 属性设置为 true 
    例子：
    <img draggable="true" />
3、拖动开始 - ondragstart 和 setData()
    ONDRAGSTART 属性调用了一个函数，DRAG(EVENT)，它规定了被拖动的数据。
    DATATRANSFER.SETDATA() 方法设置被拖数据的数据类型和值：
    例子：FUNCTION DRAG(EV){
    EV.DATATRANSFER.SETDATA("TEXT",EV.TARGET.ID);
    }
4、放到何处 - ondragover
    ondragover 事件规定在何处放置被拖动的数据。
    该属性再默认事件中是无法将数据/元素放置到其他元素中，所以我们在使用时应该阻止其默认事件的发生。
    阻止事件冒泡的函数：
       //阻止浏览器默认 事件
    function stopDefault(eventObject){
    var eventObject = eventObject || getEventObject();
    if(eventObject.preventDefault){
    eventObject.preventDefault();
    }else{
    eventObject.returnValue = false;
    }
    };
5、拖放过程函数     
     addEvent(moveBlock,"dragstart",function(){
    console.log("开始拖拽");
    });
    addEvent(moveBlock,"drag",function(){
          console.log("拖拽中");
     });
      addEvent(moveBlock,"dragend",function(){
         console.log("拖拽结束");
    });
        addEvent(dropBlock,"dragenter",function(){
            console.log("进入投放区");
        });
    addEvent(dropBlock,"dragover",function(e){

      console.log("投放何处");
    });
     addEvent(dropBlock,"dragleave",function(){
           console.log("离开投放区");
      });
    addEvent(dropBlock,"drop",function(e){
        e = getEventObject(e);
        var endPoint = getPointerPositionInDocument(e);
        setStyle(moveBlock,{
            left:moveBlockPosintion.left + (endPoint.x - startPoint.x)+"px",
            top:moveBlockPosintion.top + (endPoint.y - startPoint.y)+"px"
        });
        console.log("算出投放区的位置")，
    });

})();

4、地理定位

1、使用 getCurrentPosition() 方法来获得用户的位置。
实例
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>
例子解释：
检测是否支持地理定位 
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。 
如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象 
showPosition() 函数获得并显示经度和纬度 

2、处理错误和拒绝
    function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用户不允许地理定位"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="无法获取当前位置"
      break;
    case error.TIMEOUT:
      x.innerHTML="请求超时"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知错误"
      break;
    }
  }
    错误代码：       
    Permission denied - 用户不允许地理定位 
    Position unavailable - 无法获取当前位置 
    Timeout - 操作超时 

3、getCurrentPosition() 方法 - 返回数据
    若成功，则 getCurrentPosition() 方法返回对象
            属性                  描述 
        coords.latitude         十进制数的纬度 
        coords.longitude        十进制数的经度 
        coords.accuracy         位置精度 
        coords.altitude         海拔，海平面以上以米计 
        coords.altitudeAccuracy 位置的海拔精度 
        coords.heading          方向，从正北开始以度计 
        coords.speed            速度，以米/每秒计 
        timestamp               响应的日期/时间 

5、html5存储

1、cookie
存放在客服端，解决http协议中的弊端——无状态。
用户体验，为客户做定制广告,
存储内存较小4kb，安全系数不高，不宜保存隐私信息,
默认存储时间是浏览器关闭之后，存储信息自动销毁
2、sessionStorage
    session:是存储服务器，每一个session对象都会有一个sessionId
    默认存储时间是浏览器关闭之后，存储信息自动销毁
3、localStorage
    存储时间不会受浏览器改变
4、webSQL