1. meta 标签 – 透彻理解 name 和 http-equiv 相关作用
首先说一下我对meta标签的理解，meta标签主要是用于SEO（搜索引擎优化）的，meta元素可提供有关页面的信息，比如针对搜索引擎和更新频度的内容提要和关键词。
然后name和http-quiv的侧重点不同，
- name属性
name属性主要用于描述网页，比如它的常用的值有Keywords,description,author,viewport等等,有多个值的话就引入多个meta标签，我主要就了解下面几个值
1.keywords为搜索引擎提供网站的关键字
<meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频">
视频,视频分享,视频搜索,视频播放,优酷视频都为关键字，这些关键词将帮助搜索引擎找到相应的网站
2.description为搜索引擎提供网站主要内容。
<meta name="description" content="视频,视频分享">
3.viewport,翻译过来是视图窗口，在移动端开发时经常用，用于移动端页面控制
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- http-equiv属性
这个属性的作用跟http协议头文件类似，主要的参数如下：
1.content-Type(显示字符集的设定)
说明：设定页面使用的字符集。
＜meta http-equiv="content-Type" content="text/html;charset=utf-8"＞
1.Expires(期限)
说明：设定网站的到期时间。一旦网页过期，必须到服务器上重新传输。
＜meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"＞
注意：必须使用GMT的时间格式。
2.Pragma(cache模式)
说明：禁止浏览器从本地计算机的缓存中访问页面内容。
＜meta http-equiv="Pragma" content="no-cache"＞
这样设定，访问者将无法脱机浏览。
3.Refresh(刷新)
说明：自动刷新并指向新页面。
＜meta http-equiv="Refresh" content="2; URL=http://www.root.net"＞
注意：其中的2是指停留2秒钟后自动刷新到URL网址。
4.Set-Cookie(cookie设定)
说明：设置cookie, 如果网页过期，那么存盘的cookie将被删除。
＜meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/"＞
注意：必须使用GMT的时间格式。
5.Window-target(显示窗口的设定)
说明：强制页面在当前窗口以独立页面显示。
＜meta http-equiv="Window-target" content="_top"＞
用来防止别人在框架里调用自己的页面。
最后，附上参考链接
参考链接
2. HTML5的新特性
关于html5的新特性，我了解到的有
- 标签语义化
h5新增的标签有header,footer,nav,article,section,aside标签等等，他们所使用的位置就和他们的语义一样，比方说nav用于导航栏，aside定义页面两侧的部分。
作用：这些标签提升了可访问性和SEO的优化，还增强了可读性，有利于后期维护，对于一些机器的解析也有很大优点。 - 增强型表单
h5对表单增加了一些新的类型（type），常用的有Number类型，Email类型，date类型，color类型等等，举例：
<input type="number" name="demoNumber" min="1" max="100" step="1"/>
这些标签有助于我们输入范围内的数据，有助于提升用户体验 - DOM扩展
我们常用的queselector选择器就是属于H5的新特性，直接上代码
1、document.getElementsByClassName ('class') 通过类名获取元素，以伪数组形式存在。
2、document.querySelector('selector') 通过CSS选择器获取元素，符合匹配条件的第1个元素。
3、document.querySelectorAll('selector') 通过CSS选择器获取元素，以伪数组形式存在。复制代码
还有对于class类名的操作
1、Node.classList.add('class') 添加class
2、Node.classList.remove('class') 移除class
3、Node.classList.toggle('class') 切换class，有则移除，无则添加
4、Node.classList.contains('class') 检测是否存在class复制代码
都是比较常用的API
还有一个是H5支持自定义属性其格式如下data-*=""，接触过微信小程序的同学可能有些熟悉，小程序可以通过这个传值
data-info="我是自定义属性"
然后通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值。
Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，Node.dataset则存储了所有的自定义属性的值。
举例：
假设某元素
var demo = document.querySelector(’#demo’);
1、读取 demo.dataset[‘name’] 或者 demo.dataset[‘age’]
2、设置demo.dataset[‘name’] = ‘web developer’
注：当我们如下格式设置时，则需要以驼峰格式才能正确获取
- 拖放事件API
被拖拽元素上触发的事件：
1.ondragstart - 用户开始拖动元素时触发
2.ondrag - 元素正在拖动时触发
3.ondragend - 用户完成元素拖动后触发
目标元素上触发的事件：
1.ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
2.ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
3.ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
4.ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
另外需要的知识点就是event对象中的preventDefault()，举例如下：
var trash = document.getElementById('trash');
trash.ondragover = function(event){
event.preventDefault();
alert("!");
}
- 媒体元素
音频(audio)和视频(video) （两个的属性是差不多的）
<video autoplay controls loop width = "100" height = "100">
<source src = "...mp4" type = "video/mp4">
<source src = "...ogg" type = "video/ogg">
您的浏览器不支持video，赶紧换一个吧
</video>
autoplay：自动播放 controls：显示/隐藏控件 loop：循环播放
元素全屏：ele.requestFullscreen(); （这里要兼容，要加前缀）
function toFullVideo(){
if(videoDom.requestFullscreen){
return videoDom.requestFullScreen();
}else if(videoDom.webkitRequestFullScreen){
return videoDom.webkitRequestFullScreen();
}else if(videoDom.mozRequestFullScreen){
return videoDom.mozRequestFullScreen();
}else{
return videoDom.msRequestFullscreen();
}
}
播放与暂停：ele.play(); ele.pause();
当前播放进度与总时长：ele.currentTime ele.duration （得到的是以秒为单位的小数，要转换成00:00:00格式）
oncanplay：可以播放视频/音频时触发
ontimeupdate：当前播放位置发生改变时触发该事件
onended：播放完时触发，播放停止
- Web Socket
(1)什么是WebSocket?
WebSocket是HTML5中的协议，支持持久连续，http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个
(2)WebSocket是什么样的协议，具体有什么优点？
HTTP的生命周期通过Request来界定，也就是Request一个Response，那么在Http1.0协议中，这次Http请求就结束了。在Http1.1中进行了改进，是的有一个connection：Keep-alive，也就是说，在一个Http连接中，可以发送多个Request，接收多个Response。但是必须记住，在Http中一个Request只能对应有一个Response，而且这个Response是被动的，不能主动发起。
WebSocket是基于Http协议的，或者说借用了Http协议来完成一部分握手，在握手阶段与Http是相同的。我们来看一个websocket握手协议的实现，基本是2个属性，upgrade，connection。
可以理解为http的握手+tcp的数据传输（长连接）
- Webwoker
webwoker是H5引出的工作线程的概念。众所周知，js是单线程，这是它作为一门脚本语言，为了实现用户和页面进行交互的固有特点（用户会操作DOM，如果同时出现修改和删除DOM的操作，js如果不是单线程怎么处理呢？）。 但是js也可能会有放在后台进行的操作（比方说一些计算操作啊，不影响用户对页面的响应）。
Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage（向主线程传递数据），onmessage（接受主线程传过来的数据）。
简而言之，就是允许JavaScript创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。
从而，可以用webWorker来处理一些比较耗时的计算。
<script type="text/javascript">
onload =function(){
var worker =new Worker('fibonacci.js');
worker.addEventListener('message', function(event) {
var timer2 = (new Date()).valueOf();
console.log( '结果：'+event.data, '时间:'+ timer2, '用时：'+ ( timer2 - timer ) );
}, false);
var timer = (new Date()).valueOf();
console.log('开始计算：40','时间:'+ timer );
setTimeout(function(){
console.log('定时器函数在计算数列时执行了', '时间:'+ (new Date()).valueOf() );
},1000);
worker.postMessage(40);
console.log('我在计算数列的时候执行了', '时间:'+ (new Date()).valueOf() );
}
</script>
- Web Storage
Web Storage又分为两种： sessionStorage 和localStorage ，即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地。
Web Storage的两个主要目标是：
1.提供一种在cookie之外存储会话数据的途径。
2.提供一种存储大量可以跨会话存在的数据的机制。其API提供的方法有以下几种：
localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。
sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。
他们的方法有如下几种
- setItem (key, value) —— 保存数据，以键值对的方式储存信息。
- getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
- removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
- clear () —— 删除所有的数据
- key (index) —— 获取某个索引的key
使用方法：
var storage = null;
if(window.localStorage){ //判断浏览器是否支持localStorage
storage = window.localStorage;
storage.setItem("name", "Rick"); //调用setItem方法，存储数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 Rick
storage.removeItem("name"); //调用removeItem方法，移除数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 null
}
sessionStorage 需要注意一下几点
（1）页面刷新不会消除数据;
（2）只有在当前页面打开的链接，才可以访sessionStorage的数据；
（3）使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据;
-
地理位置API
支持地理位置的API的浏览器会定义navigator.geolocation。此属性拥有三个方法的对象:navigator.geolocation.getCurrentPosition() 获取用户当前位置 navigator.geolocation.watchPosition() 获取并不断监视当前位置，一当有更改就会触发指定函数 navigator.geolocation.clearWatch() 停止监听用户位置上面的代码可以知道，如果用户设备支持地理定位，则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象，getCurrentPosition() 方法的第二个参数showError用于处理错误，它规定当获取用户位置失败时运行的函数。其实，除了前两个参数之外getCurrentPosition()还接受第三个参数，该参数为一个配置对象。该对象的属性指定是否需要高精度的位置信息，该位置的过期时间，以及系统在多长范围内获取位置信息。
-
canvas绘图
canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。Canvas元素就像一块画布，通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。
重点了解一下canvas和svg绘图的区别吧
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
