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
