HTML5知识点小结
HTML5知识点
一. HTML5标记方式
html5的文档类型声明
<! DOCTYPE html>html5文档编码格式的指定
<meta charset="utf–8">二. HTML5文档结构
html5新增的内容性标签
<header>标签：用于定义页眉信息。
2. <nav>标签：定义导航栏。
3. <article>标签：用于页面中可以独自被外部引用的内容，可以是一篇文章、一个评论等。
4. <aside>标签：专门用于定义当前页面或文章的附属信息，包括相关引用、侧边栏、广告、导航等。
5. <footer>标签：用于定义脚注部分，比如版权。
6. ......
三. Canvas绘图
基本步骤：
1. canvas标签的定义：
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000">
</canvas>2. 使用JS获取该canvas对象：
var canvas = document.getElementById("myCanvas");
3. 获取2D图形上下文对象：
var context = canvas.getContext("2d");
4. 使用context对象的属性方法进行绘制：
context.fillStyle="#FF0000";
context.fillRect(30,30,100,100);
四. video/audio标签
基本使用方法：
<video src="video.mp4" width="100%" height="100%" autoplay controls></video>
<audio src="我只在乎你.mp3" autoplay controls></audio>五. 拖放API
通过拖放API可以使页面中任意元素变成可拖动的，这样有利于设计出更友好的交互界面。
要使一个元素能够被拖动，需要为这个元素设置属性draggable="true"，但这样仅仅是表示该元素允许被拖放，但在拖放时并不携带数据，用户看不到拖放的效果。这时还需要为该元素绑定事件监听器ondragstart="drag(event)"，并在事件处理函数中设置所需携带的数据。
ps : <img>标签和带有 href 属性的<a>标签默认是可以拖动的。
基本语法：
html:
<div id="mydiv" draggable="true" ondragstart="drag(event)"
style="width:100px;height:50px;background-color:#eee;">测试</div>js:
var mydiv = document.getElementById("mydiv");
function drag(e){
//text为IE兼容写法；dataTransfer对象提供属性和方法
e.dataTransfer.setData("text","要携带的数据");
}
六. Web存储
在HTML4中存储数据使用Cookie来实现，但是Cookie的大小被限制在4KB以下，并且Cookie会随着HTTP请求一起向服务器发送，可能会造成带宽的浪费。
所以HTML5提供了Web Storage。
Web Storage有两种存储形式：Session Storage 和 Local Storage。
Session Storage：用于保存用户浏览网站这段时间内所需要保存的数据，当网站被关闭时，保存的数据也随之丢失。即临时的存储，网站关闭，数据丢失。
Local Storage：将数据保存在客户端的硬件设备中，当浏览器关闭后，数据任然存在。（永久存储，不删除，数据不丢失）
特性总结：
localStorage 的优势
- 1、localStorage 拓展了 cookie 的 4K 限制。
- 2、localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。
localStorage 的局限
- 1、浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
- 2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
- 3、localStorage在浏览器的隐私模式下面是不可读取的。
- 4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
- 5、localStorage不能被爬虫抓取到。
localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。
首先在使用 localStorage 的时候，我们需要判断浏览器是否支持 localStorage 这个属性：
if(! window.localStorage){ alert("浏览器不支持localstorage"); return false; }else{ //主逻辑业务 }localStorage 的写入有三种方法:
if(！window.localStorage){
alert("浏览器不支持localstorage");
return false;
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.b=1;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}
重点介绍Local Storage（可以用来实现记住密码功能）：
存数据：
localStorage.setItem(键 , 值);即localStorage.setItem(key,value)
取数据：
var data = localStorage.getItem(键);
其他属性和方法：
localStorage.length;//返回键值对的数量
localStorage.key(index);//返回第index个数据的key(键)
localStorage.removeItem(key);//删除对应的数据
localStorage.clear();//清空所有
七. 本地数据库
HTML4中数据库存放在服务器端，只能通过服务器来访问数据库，而在HTML5中内置了两种本地数据库：SQLite 和 IndexedDB（轻量级NOSQL数据库）。
现在W3C已暂停对SQLite规范进行更新，继而把重点放在Web Storage 和 IndexedDB。
八. Web Worker
创建Worker对象（后台进程）多用于这些场合：抓取数据缓存本地、后台I/O处理、大数据分析或计算处理、Canvas绘图中的图形数据运算及生成处理、本地数据库中的数据存取及计算处理、计算量非常大（例如循环求1~100亿的和等等）。
