HTML5知识点总结

一. HTML5标记方式

• html5的文档类型声明
  

1. <! DOCTYPE html>

复制代码

• html5文档编码格式的指定
  

1. <meta charset=&#34;utf–8&#34;>

复制代码

二. HTML5文档结构




html5新增的内容性标签

• <header>标签：用于定义页眉信息。
  

2. <nav>标签：定义导航栏。
3. <article>标签：用于页面中可以独自被外部引用的内容，可以是一篇文章、一个评论等。
4. <aside>标签：专门用于定义当前页面或文章的附属信息，包括相关引用、侧边栏、广告、导航等。
5. <footer>标签：用于定义脚注部分，比如版权。
6. ......

三. Canvas绘图

基本步骤：
1. canvas标签的定义：

1. <canvas id=&#34;myCanvas&#34; width=&#34;200&#34; height=&#34;200&#34; style=&#34;border:1px solid #000&#34;>
2. </canvas>

复制代码

2. 使用JS获取该canvas对象：

1. var canvas = document.getElementById(&#34;myCanvas&#34;);

复制代码

3. 获取2D图形上下文对象：

1. var context = canvas.getContext(&#34;2d&#34;);

复制代码

4. 使用context对象的属性方法进行绘制：

1. context.fillStyle=&#34;#FF0000&#34;;
2. context.fillRect(30,30,100,100);

复制代码

四. video/audio标签

基本使用方法：

1. <video src=&#34;video.mp4&#34; width=&#34;100%&#34; height=&#34;100%&#34; autoplay controls></video>
2. <audio src=&#34;我只在乎你.mp3&#34; autoplay controls></audio>

复制代码

五. 拖放API

通过拖放API可以使页面中任意元素变成可拖动的，这样有利于设计出更友好的交互界面。
要使一个元素能够被拖动，需要为这个元素设置属性draggable=&#34;true&#34;，但这样仅仅是表示该元素允许被拖放，但在拖放时并不携带数据，用户看不到拖放的效果。这时还需要为该元素绑定事件监听器ondragstart=&#34;drag(event)&#34;，并在事件处理函数中设置所需携带的数据。
ps : <img>标签和带有 href 属性的<a>标签默认是可以拖动的。
基本语法：
html:

1. <div id=&#34;mydiv&#34; draggable=&#34;true&#34; ondragstart=&#34;drag(event)&#34;
2.   style=&#34;width:100px;height:50px;background-color:#eee;&#34;>测试</div>

复制代码

js:

1. var mydiv = document.getElementById(&#34;mydiv&#34;);
2. function drag(e){
3.    //text为IE兼容写法；dataTransfer对象提供属性和方法
4.    e.dataTransfer.setData(&#34;text&#34;,&#34;要携带的数据&#34;);
5. }

复制代码

六. Web存储

在HTML4中存储数据使用Cookie来实现，但是Cookie的大小被限制在4KB以下，并且Cookie可能会随着HTTP请求一起向服务器发送，可能会造成带宽的浪费。
所以HTML5提供了Web Storage。
Web Storage有两种存储形式：Session Storage 和 Local Storage。

Session Storage：用于保存用户浏览网站这段时间内所需要保存的数据，当网站被关闭时，保存的数据也随之丢失。
Local Storage：将数据保存在客户端的硬件设备中，当浏览器关闭后，数据任然存在。

• 重点介绍Local Storage（可以用来实现记住密码功能）：
  

存数据：

1. localStorage.setItem(键 , 值);

复制代码

取数据：

1. var data = localStorage.getItem(键);

复制代码

其他属性和方法：

1. localStorage.length;//返回键值对的数量
2. localStorage.key(index);//返回第index个数据的key(键)
3. localStorage.removeItem(key);//删除对应的数据
4. localStorage.clear();//清空所有

复制代码

七. 本地数据库

HTML4中数据库存放在服务器端，只能通过服务器来访问数据库，而在HTML5中内置了两种本地数据库：SQLite 和 IndexedDB（轻量级NOSQL数据库）。
现在W3C已暂停对SQLite规范进行更新，继而把重点放在Web Storage 和 IndexedDB。
八. Web Worker

创建Worker对象（后台进程）多用于这些场合：抓取数据缓存本地、后台I/O处理、大数据分析或计算处理、Canvas绘图中的图形数据运算及生成处理、本地数据库中的数据存取及计算处理、计算量非常大（例如循环求1~100亿的和）。

大海啊! 你全是水......