前端学习进程（1）

1. HTML5 新特性

1. 语义化标签。

语义化页面章节内容。之前使用DIV描述整个页面，但是DIV是无实际意义的。H5的语义标签为为无实际意义的标签赋予其属性，通过使用语义化标签可以更清楚的描绘整个页面的具体内容，用最恰当的HTML元素描绘所标记的内容。从而增加页面的可阅读性，同时结构清晰，便于维护。还可以提升搜索引擎优化的效果。
常见的语义化标签有<header> 、<nav>、<footer>、<aside>、<article>、<figure>、等。

2. 增强型表单。

新增了多个表单的输入类型，可以进行输入控制和验证。新的输入类型包括：email,url,number,range,Date pickers,search,color等。
新的表单元素有datalist，kengen，output等。

3. 视频<video>和音频<audio>标签。

4. Canvas绘图。

canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

5. SVG绘图。

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

6. 地理定位。

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
使用 getCurrentPosition() 方法来获得用户的位置，该方法获取两个参数，第一个参数为成功时执行的函数，第二个为获取失败时执行的函数。

7. 拖放API。

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

为了使元素可拖动，设置draggable属性为true。

8. Web Worker。

web worker 是运行在后台的 JavaScript，不会影响页面的性能。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
Web Worker 有以下几个使用注意点。

（1）同源限制

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）DOM 限制

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document 、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

（3）通信联系

Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

（4）脚本限制

Worker 线程不能执行==alert()方法和confirm()==方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

（5）文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

9. 数据存储。

HTML5 提供了两种在客户端存储数据的新方法：
　localStorage - 没有时间限制的数据存储
　sessionStorage - 针对一个 session 的数据存储
　
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage方法存储的数据没有时间限制，sessionStorage针对一个session进行数据存储，当用户关闭浏览器窗口，数据会被删除。

10.WebSocket。