HTML5

新增功能

1. HTML5新标准中直接添加了拥有具体含义的HTML标签比如：<article>、<footer>、<header>、<nav>、<section>、<video>, <progress>（进度条）、<meter>（容量占用条）、<time>（不显示效果）, <aside>（文章侧栏）, <canvas>

同时取消了一些标签，如<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <isindex>, <noframes>, <strike>,<tt>

2. HTML5的标准中直接添加了智能表单，让这一切都变得那么的简单，比如 calendar、date、time、email、url、search

3. 在HTML5标准中原生的就支持音频、视频、画布等技术。让WEB程序更加独立，更好的适应多种形式的客户端。

4. HTML5 提供了两种在客户端存储数据的新方法

5. HTML5 的canvas元素使用 JavaScript 在网页上绘制图像。并拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

6. 在不影响UI update及浏览器与用户交互的情况下, 前端做大规模运算，只能通过 setTimeout 之类的去模拟多线程。而新的标准中，JS新增的HTML5 Web Worker对象原生的就支持多线程。

7. WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。WebSocket是html5规范新引入的功能，用于解决浏览器与后台服务器双向通讯的问题，使用WebSocket技术，后台可以随时向前端推送消息，以保证前后台状态统一，在传统的无状态HTTP协议中，这是“无法做到”的。

8. HTML5(text/html)浏览器将在错误语法的处理上更加灵活。HTML5在设计时保证旧的浏览器能够安全地忽略掉新的HTML5代码。与HTML4.01相比，HTML5给出了解析的完整规则，让不同的浏览器即使在发生语法错误时也能返回完全相同的结果。

9. 由于项目中经常遇到用Web应用中控制操作本地文件，而之前都是使用一些富客户端技术比如flash，ActiveX，Silverlight等技术。在HTML5的新的提供的 HTML5 File API 让JS可以轻松上阵了。

10. HTML5仅有一种类型，<!DOCTYPE html>

页面布局变化

HTML5:

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>my page</title>
 5     </head>
 6     <body>
 7         <header>header</header>
 8         <nav>nav</nav>
 9         <article>
10             <section>section</section>
11         </article>
12         <aside>aside</aside>
13         <footer>footer</footer>
14     </body>
15 </html>

标签具体解释

<section>定义文档中的节。它用来表现普通的文档内容或应用区块，但section元素标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。

<article>特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块。当我们描述一件具体的事物的时候，通常鼓励使用article来代替section。article会有标题部分（通常包含在header内），也可以包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。

<nav>可以作为页面导航的链接组，其中的导航元素链接到其它页面或者当前页面的其它部分，使html代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。

<aside>标签用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告，成组的链接，侧边栏等等。

<header>标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。通常header标签至少包含一个标题标记（h1-h6），还可以包括hgroup标签，还可以包括表格内容、标识、搜索表单、nav导航等。

<footer>标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。它和header标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该区段的页脚了。

<hgroup>标签是对网页或区段section的标题元素（h1-h6）进行组合。例如，在一区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。

<figure>用于对元素进行组合。多用于图片与图片描述组合。

<input>新增类型

1. number类型

1 <input type="number" name="demoNumber" min="1" max="100" step="1"/>

控制输入数据的范围。name: 标识表单提交时的key值，min: 标识当前输入框输入的最小值， max: 标识当前输入框输入的最大值，step: 标识点击增大/减小的时候，增加/减小的步长，value:规定默认值

2. Email类型

1 <input type="email" name="email" placeholder="请输入注册邮箱"/>

系统自动检测是否为邮箱格式

3. URL类型

1 <input type="url" placeholder="请输入网址" name="url"/>

系统自动检测是否为网址格式

4. range类型

1 <form oninput="output.value=parseInt(range.value)">
2     <input type="range" min="0" max="100" step="5" name="range" value="0"/>
3     <output name="output">0<output/>
4 </form>

range是滑动条效果，可以和<output>标签一起使用显示滑动条代表的数值（form标签加上oninput="output.value=parseInt(range.value)"）

5. 日期类型

datetime类型谷歌浏览器不支持

6. color类型

1 <input type="color" name="colordemo"/>

7. 表单自动提示

1 <input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
2 <datalist id="autoNames">
3   <option  value="实验楼" ></option>
4   <option  value="HTML5" ></option>
5   <option  value="input标签" ></option>
6 </datalist>

表单新增属性

1.input标签新增属性

2.form新增属性

文件操作API

主要是FileList、Blob、File、FileReader几个JS对象：

FileList：它是File对象的一个集合，在HTML4标准中文件上传控件只接受一个文件，而在新标准中，只需要设置multiple，就支持多文件上传，所以从此标签中获取的files属性就是FileList对象实例。

Blob: 其实就是一个原始数据对象，它提供了slice方法可以读取原始数据中的某块数据。另外有两个属性：size（数据的大小），type（数据的MIME类型);

File: 继承自Blob对象，指向一个具体的文件，它还有两个属性：name（文件名）,lastModifiedDate（最后修改时间）;

FileReader: 设计用来读取文件里面的数据，提供三个常用的读取文件数据的方法，另外读取文件数据使用了异步的方式，非常高效。

实例1：获取上传文件的文件名（需要jQuery）

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $("#btnGetFile").click(function (e) {
 9                 var fileList = document.getElementById("fileDemo").files;
10                 for (var i = 0; i < fileList.length; i++) {
11                     if (!(/image/w+/.test(fileList[i].type))) {
12                          $("#result").append("<span>type:"+fileList[i].type+"--******非图片类型*****--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span><br />");
13                     }
14                     else {
15                         $("#result").append("<span>type:"+fileList[i].type+"--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span><br />");
16                     }
17                 }
18             });
19         });
20     </script>
21 </head>
22 <body>
23     <form action="/home/index" method="POST" novalidate="true">
24         <input type="file" multiple="multiple" name="fileDemo" id="fileDemo" /><br/>
25         <input type="button" value="获取文件的名字" id="btnGetFile"/>
26         <div id="result"></div>
27     </form>
28     <hr/>
29 </body>
30 </html>

实例二：读取上传文件内容，然后将文件内容直接读取到浏览器上（注：需要引入jQuery）

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         if(typeof FileReader == "undified") {
 8             alert("您老的浏览器不行了！");
 9         }
10 
11         function showDataByURL() {
12             var resultFile = document.getElementById("fileDemo").files[0];
13             if (resultFile) {
14                 var reader = new FileReader();
15                 reader.readAsDataURL(resultFile);
16                 reader.onload = function (e) {
17                     var urlData = this.result;
18                     document.getElementById("result").innerHTML += "<img src='" + urlData + "' alt='" + resultFile.name + "' />";
19                 }; 
20             }
21         } 
22 
23         function showDataByBinaryString() {
24             var resultFile = document.getElementById("fileDemo").files[0];
25             if (resultFile) {
26                 var reader = new FileReader();
27                 //异步方式，不会影响主线程
28                 reader.readAsBinaryString(resultFile);
29                 reader.onload = function(e) {
30                     var urlData = this.result;
31                     document.getElementById("result").innerHTML += urlData;
32                 };
33             }
34         }
35 
36         function showDataByText() {
37             var resultFile = document.getElementById("fileDemo").files[0];
38             if (resultFile) {
39                 var reader = new FileReader();
40                 reader.readAsText(resultFile,'gb2312');
41                 reader.onload = function (e) {
42                     var urlData = this.result;
43                     document.getElementById("result").innerHTML += urlData;
44                 };
45             }
46         }
47 
48     </script>
49 </head>
50 <body>
51     <input type="file" name="fileDemo" id="fileDemo" multep/>
52     <input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/>
53     <input type="button" value="readAsBinaryString"  id="readAsBinaryString" onclick="showDataByBinaryString();"/>
54     <input type="button" value="readAsText"  id="readAsText" onclick="showDataByText();"/>
55     <div id="result">
56     </div>
57 </body>
58 </html>

Canvas

获取canvas元素 var canvasDom = document.getElementById("demoCanvas");

获取上下文 var context = canvasDom.getContext('2d');

画只有线条的矩形框：

1 context.strokeStyle = "red";
2 context.strokeRect(10, 10, 190, 100);

画填充矩形：

1 context.fillStyle = "blue";
2 context.fillRect(110,110,100,100);

画线条：

1 context.beginPath(); // 开始路径绘制
2 context.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
3 context.lineTo(200, 200); // 绘制一条到(200,20)的直线
4 context.lineTo(400, 20);
5 context.closePath();//自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法
6 context.lineWidth = 2.0; // 设置线宽
7 context.strokeStyle = "#CC0000"; // 设置线的颜色 
8 context.stroke(); // 进行线的着色，这时整条线才变得可见

画文本：

fillText(string, x, y)方法是用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式（写法类似与CSS的font属性）。与此类似的还有strokeText方法，用来添加空心字。另外注意一点：fillText方法不支持文本断行，即所有文本出现在一行内。所以，如果要生成多行文本，只有调用多次fillText方法。

context.font = "Bold 50px Arial";// 设置字体
context.textAlign = "left";// 设置对齐方式
context.fillStyle = "#005600";// 设置填充颜色
context.fillText("老马!", 10, 50);// 设置字体内容，以及在画布上的位置
context.strokeText("blog.itjeek.com!", 10, 100);// 绘制空心字

画圆：

arc（x,y,radius,startAngle,endAngle,anticlockwise）方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。

1 context.beginPath();//开始绘制路径
2 context.arc(60, 60, 50, 0, Math.PI * 2, true); //绘制以 （60,60）为圆心，50为半径长度，从0度到360度（PI是180度），最后一个参数代表顺时针旋转。
3 context.lineWidth = 2.0;//线的宽度
4 context.strokeStyle = "#000";//线的样式
5 context.stroke();//绘制空心的，当然如果使用fill那就是填充了。

将图片放上画布：

1 var image = new Image();//创建一张图片
2 image.src = "Images/a.png";//设置图片的路径
3 context.drawImage(image, 100, 100);//将图片放上画布，设置坐标

还有渐变、阴影等，待查。

本地存储

永久性的本地存储：localStorage：

1 <script type="text/javascript">
2     localStorage.setItem("demokey", "http://www.shiyanlou.com");//添加key-value 数据到 sessionStorage
3     localStorage.getItem("demokey"); //通过key来获取value 
4     removeItem("demokey")//通过key删除本地数据。 
5     localStorage.clear();//清空所有的key-value数据。
6 </script>

会话级别的本地存储：sessionStorage(它跟浏览器当前会话相关，当会话结束后，数据会自动清除):

1 <script type="text/javascript">
2     sessionStorage.setItem("demokey", "http://blog.itjeek.com"); //添加key-value 数据到 sessionStorage
3     sessionStorage.getItem("demokey"); //通过key来获取value
4     removeItem(key)//通过key删除本地数据。
5     sessionStorage.clear(); //清空所有的key-value数据。
6 </script>

数据库存储

基本步骤为：

openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库。

1 var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function(){});

几个参数意义分别是：

transaction方法用于控制事务处理，执行提交操作或回滚操作。executeSql方法执行查询

1 db.transaction(  function(tx) {           
2       tx.executeSQL(sqlQuery,[value1,value2..],dataHandler,errorHandler)    
3   });

参数说明：

实例：用“审查元素”的“resource”查看

 1 <!DOCTYPE HTML>
 2 <html>
 3 <meta charset="UTF-8">
 4 <head>
 5     <title></title>
 6     <script src="jquery-1.5.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         $(function () {//页面加载完成后绑定页面按钮的点击事件
 9             initDatabase();
10             $("#btnSave").click(function () {
11                 var txtName = $("#txtName").val();
12                 var txtTitle = $("#txtTitle").val();
13                 var txtWords = $("#txtWords").val();
14                 var db = getCurrentDb();
15                 //执行sql脚本，插入数据
16                 db.transaction(function (trans) {
17                     trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data){}, function (ts, message) {
18                         alert(message);
19                     });
20                 });
21                 //showAllTheData();
22             });
23         });
24         
25         //创建数据库
26         function initDatabase() {
27             var db = getCurrentDb();//初始化数据库
28             if(!db) {alert("您的浏览器不支持HTML5本地数据库");return;}
29             db.transaction(function (trans) {//启动一个事务，并设置回调函数
30             //执行创建表的Sql脚本
31                 trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
32                 }, function (trans, message) {//消息的回调函数alert(message);});
33                 });
34             });
35         }
36         
37         function getCurrentDb() {
38             //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
39             //如果数据库不存在那么创建之
40             var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); 
41             return db;
42         }
43         
44         //显示所有数据库中的数据到页面上去
45         function showAllTheData() {
46             $("#tblData").empty();
47             var db = getCurrentDb();
48             db.transaction(function (trans) {
49                 trans.executeSql("select * from Demo ", [], function (ts, data) {
50                     if (data) {
51                         for (var i = 0; i < data.rows.length; i++) {
52                             appendDataToTable(data.rows.item(i));//获取某行数据的json对象
53                         }
54                     }
55                 }, function (ts, message) {alert(message);var tst = message;});
56             });
57         }
58         
59         //将数据展示到表格里面
60         function appendDataToTable(data) {
61             //uName,title,words
62             var txtName = data.uName;
63             var txtTitle = data.title;
64             var words = data.words;
65             var strHtml = "";
66             strHtml += "<tr>";
67             strHtml += "<td>"+txtName+"</td>";
68             strHtml += "<td>" + txtTitle + "</td>";
69             strHtml += "<td>" + words + "</td>";
70             strHtml += "</tr>";
71             $("#tblData").append(strHtml);
72         }
73     </script>
74 </head>
75 <body>
76 <table>
77             <tr>
78                 <td>用户名：</td>
79                 <td><input type="text" name="txtName" id="txtName" required/></td>
80             </tr>
81                <tr>
82                 <td>标题：</td>
83                 <td><input type="text" name="txtTitle" id="txtTitle" required/></td>
84             </tr>
85             <tr>
86                 <td>留言：</td>
87                 <td><input type="text" name="txtWords" id="txtWords" required/></td>
88             </tr>
89         </table>
90         <input type="button" value="保存" id="btnSave"/>
91         <hr/>
92         <input type="button" value="展示所哟数据" onclick="showAllTheData();"/>
93         <table id="tblData">
94         </table>
95 
96 </body>
97 </html>

HTML5

新增功能

页面布局变化

标签具体解释

<input>新增类型

表单新增属性

文件操作API

Canvas

本地存储

数据库存储