HTML5学习笔记

http://www.w3schools.com/html/html5_intro.asp
HTML5的浏览器支持：
可通过为自定义标签设置样式，并通过JS的document.creatElement(" ");来创建这样子的元素。（为什么创建了元素之后就可以直接应用在标签上了）
IE8以前都不支持为未知标签写样式，可用the shiv：

以上兼容代码需要放置在中，因为浏览器需要再编译之前知道这些标签。

新的input 类型：

20160327104520.png

标签定义article以外的内容，aside的内容应该与article的内容相关。

的内容可用作文章的侧栏。

根据W3C的定义，一个语义化Web是，数据可以在不同应用，不同企业和团体中共享和复用。

HTML4转成HTML5：

HTML4转成HTML5

1、修改文档类型Doctype

2、修改编码方式

3、添加the shiv

4、为语义化标签添加CSS
5、修改

和

6、修改成

7、修改成

8、修改成

和

之间的区别：
在HTML5标准里这几个标签间的区别有点模糊。
定义为一块相关元素；

定义为一个完全的，独立的相关元素的块；

被定义为一块子元素。

Style Guide

1、使用小写标签名
2、关闭所有标签
3、关闭空的HTML标签
4、使用小写属性名
5、用引号包住属性值
6、为img添加alt属性和设置宽高（浏览器在图片加载进来之前会为图片预留空间，从而减少页面的闪烁）。
7、等号两边最好不要留空格
8、尽量一行代码不要写太长
9、不要随意的添加空行，出于阅读方便，在分开一长段逻辑代码块的时候可以使用空行；缩进时使用2个空格来代替tab。
10、在HTML5标准中，（是文档的根）,标签都是可以省略的，但不建议。省略可能对导致DOM和XML软件崩溃，并且在IE9以下，省略会报错。
11、建议定义语言类型 ，定义语言对于无障碍应用（accessibility applications）和搜索引擎来说十分重要。
12、标签也是可以省略的，浏览器通常都会默认把标签前得元素添加到一个默认的标签中。通过省略标签可以降低HTML的复杂性。
13、在逗号或引号后加空格是一种普遍的书写方式。
14、

错误处理：getCurrentPosition()方法的第二个参数是用来处理错误的。
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}

/还不太明白/

在地图上展示结果：
要在地图上展示结果需要使用一个向谷歌地图的地图服务。
静态图片：
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;

var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML = "";

}
动态：
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_map_script

HTML5拖放

在HTML5中，所有元素都可以被拖动。
使用例子:

ondragstart="drag(event)" width="336" height="69">

步骤：
1、把元素设置为可拖动

2、拖什么
ondragstart
指定当元素被拖动时会发生什么。dataTransfer.setData()方法设定数据类型和拖动数据的值。
3、放在哪里
ondragover 事件指定被拖动数据可以放在哪里。默认情况下，元素是不可以被放在其他元素里。必须阻止默认的元素事件才可以允许放，这个是通过在ondragover事件调用event.preventDefault()方法来实现的。
4、放 ondrop
当拖动的元素被放开，会触发drop事件。
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
1、调用preventDefault()阻止浏览器对data的默认处理（默认是在放的时候当做链接打开）
2、使用dataTransfer.getData() 方法来获取拖动的data，这个方法会返回在setData()方法中设置了相同类型的data。
3、拖动的data是被拖元素的id
4、把拖动的元素加在放的元素上。

HTML5本地存储
HTML本地存储比cookie更好。
本地存储是什么：有了本地存储，web应用可以在用户浏览器本地存储数据。
在HTML5之前，应用数据必须存储在每一个服务器请求的cookie里。本地存储更安全和在不受网页表现的影响下本地存储大量的数据。不像cookies，存储上限为5MB而且信息永远不会转换到服务器。本地存储是per origin(per domain and protocol)。全部页面来自同一个起点，可以存取一样的数据。

HTML本地存储对象：
HTML本地存储提供两个对象用来在客户端存储数据：
window.localStorage--存储没有终止时间的数据
window.sessionStorage--在一段时间内存储数据（当浏览器标签页关闭的时候数据就会丢失）
localStorage 对象：
当浏览器关闭的时候，数据不会被删除而且在下一天，下一周甚至是下一年都还存在。
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
也可以采用点取值法：
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

//从本地存储项目中移除lastname的语法是：
localStorage.removeItem("lastname");

Note：键值对通常都是被当做字符串来存储的，记得在需要的时候要转换成其它格式。

sessionStorage对象：
sessionStorage对象除了只在一个阶段存储数据之外，其它和localStorage对象是一样的。

HTML5应用缓存
有了应用缓存就可以通过创建一个缓存清单文件来很简单的制作一个web应用的离线版本。

应用缓存是什么：
HTML5对于应用缓存的介绍指的是，一个web应用可以被缓存，可以在离线情况下使用。

应用缓存为应用带来的3个优点：
1、离线浏览--用户可以在离线情况下使用这个应用
2、速度--缓存资源加载更快
3、减少服务器加载--浏览器只会从服务器下载更新了和改变了的资源

例子：

The content of the document......

HTML5 Web Workers

web worker是一个在后台运行不影响页面展示效果的JS。

Web Worker是什么

当HTML页面执行到脚本的时候，页面就会不可响应知道脚本被执行完毕。
web worker是一个在后台运行的，独立于其他脚本的，不影响页面展示效果的JS。你可以继续做其它你想做的事情，例如：点击，选择等等，而web worker就在后台运行。

创建一个Web Worker 文件

首先创建一个外部JS文件

demo_workers.js

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

其中上面最重要的部分是postMessage()方法，用来向HTML页面展示信息。

通常web worker是不会用在这么简单的脚本上，一般会更多用在CPU紧张的任务上

创建一个Web Worker对象

现在我们有了web worker文件了，我们需要在一个HTML页面上调用它。
下面的代码首先检查web worker是否已经存在了，如果不存在的话，他将会创建一个新的web worker对象并运行"demo_workers.js"的代码。

if(typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

之后我们就可以从web worker发收信息了。
给web worker增加一个"onmessage"事件监听。

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

当web worker发送一条信息时，监听器里的代码就会运行，web worker的数据会存储在event.data里。

终止web worker

当一个web worker对象被创建之后，它将会持续监听信息（即使在外部脚本已经执行完毕）直到它被终止。

重用web worker

如果你将web worker变量设为undefined，在它被终止之后，你可以重用这个代码。

Web Worker和DOM

因为web worker都在外部文件中，他们没有权限处理下面的js对象

• window对象
• document对象
• parent对象

HTML5 Server-Sent Events

Server-Sent Events--单向信息

一个服务器推送时间是一个网页自动从服务器获得更新。
这个在之前也是可能的，但是网页会问是否存在任何更新。有了Server-Sent Events，更新会自动进行。

例子：Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.

接受Server-Sent Event声明

EventSource 对象是用来接收Server-Sent Event声明的。

var source = new EventSource("demo_sse.php");//创建一个新的EventSource对象，声明页面发送更新的URL
source.onmessage = function(event) {//每当接收到一个更新时，onmessage事件会触发
    document.getElementById("result").innerHTML += event.data + "
";
};

服务器端代码例子

The EventSource Object

事件	描述
onopen	当与服务器的连接被打开时
onmessage	当信息被接收时
onerror	当错误发生时