HTML5学习笔记

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

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

新的input 类型：

20160327104520.png

<aside>
<aside>标签定义article以外的内容，aside的内容应该与article的内容相关。<aside> 的内容可用作文章的侧栏。

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

HTML4转成HTML5：

HTML4转成HTML5

1、修改文档类型Doctype
<!DOCTYPE html>
2、修改编码方式
<meta charset="utf-8">
3、添加the shiv

4、为语义化标签添加CSS
5、修改<header>和<footer>
6、修改成<nav>
7、修改成<section>
8、修改成<article>

<article><section>和<div>之间的区别：
在HTML5标准里这几个标签间的区别有点模糊。
<element>定义为一块相关元素；<article>定义为一个完全的，独立的相关元素的块；<div>被定义为一块子元素。

Style Guide

1、使用小写标签名
2、关闭所有标签
3、关闭空的HTML标签
4、使用小写属性名
5、用引号包住属性值
6、为img添加alt属性和设置宽高（浏览器在图片加载进来之前会为图片预留空间，从而减少页面的闪烁）。
7、等号两边最好不要留空格
8、尽量一行代码不要写太长
9、不要随意的添加空行，出于阅读方便，在分开一长段逻辑代码块的时候可以使用空行；缩进时使用2个空格来代替tab。
10、在HTML5标准中，<html>（是文档的根）,<body>标签都是可以省略的，但不建议。省略可能对导致DOM和XML软件崩溃，并且在IE9以下，省略<body>会报错。
11、建议定义语言类型<html lang="en-US"> ，定义语言对于无障碍应用（accessibility applications）和搜索引擎来说十分重要。
12、<head>标签也是可以省略的，浏览器通常都会默认把<body>标签前得元素添加到一个默认的<head>标签中。通过省略<head>标签可以降低HTML的复杂性。
13、在逗号或引号后加空格是一种普遍的书写方式。
14、<script>和<link>中的type都可省略
15、最好使用小写的文件名
16、.htm和.html的区别：
实质上并没有差异，只是文化上的差异：.htm 更像早期后缀名限制扩展名在3个字符的DOS系统；.html就像没有限制的Unix操作系统。

Canvas
<canvas>元素只是图像的一个容器，需要使用脚本语言来画图。canvas有好几种方法来画路径，盒子，圆，文本和添加图片。
canvas 在HTML页面时一个矩形区域，默认是没有边框和内容的。
定义方式：
<canvas id="myCanvas" width="200" height="100"></canvas>
（记得要为canvas添加id属性，宽和高）

SVG（Scalable Vector Graphics可扩展矢量图形）
是W3C推荐的，用来为web定义图像的。
<svg>标签是用来放svg图像的容器。
（on the fly：无需退出当前流程来做某件事）
SVG和Canvas的区别：
SVG是XML里用来描述2D图像的语言；
Canvas实时用JS画2D图像。
SVG是基于XML的，这说明了每一个元素在SVG的DOM里都是可见的，并可以为元素绑定JS事件。在SVG里，每个画出来的形状都是被当做一个对象的，若一个SVG对象的属性被修改了，那么浏览器会自动渲染这个图形。
Canvas是被一个像素一个像素的渲染的，在Canvas里，当图形被画好了，浏览器就会把它忘记。如果要修改图形的位置，整个场景包括那些可能被这个图形覆盖的对象都要被重画。

Canvas SVG
Resolution dependent（依赖分辨率）
No support for event handlers（不支持事件处理）
Poor text rendering capabilities（文本渲染能力差）
You can save the resulting image as .png or .jpg（可以把产出图形保存为.png或.jpg）
Well suited for graphic-intensive games(适合图像密集型游戏)
Resolution independent
Support for event handlers
Best suited for applications with large rendering areas (Google Maps)（适合拥有大型渲染区域的应用）
Slow rendering if complex (anything that uses the DOM a lot will be slow)
Not suited for game applications
Multimedia

多媒体有很多不同的格式，可以是你能听到或看到的所有的东西。
第一代浏览器只支持文本并一种颜色里只有一种字体。之后的浏览器开始支持多色和多种字体甚至支持图片。对于声音，动画和视频的支持，不同浏览器有不同的做法。支持不一样类型和格式，并且一些格式需要额外的帮助插件才能工作。

只有MP4，WebM和Ogg视频才被最新的HTML5标准支持。
只有MP3，WAV和Ogg音频才被最新的HTML5标准支持。

在HTML5之前，没有标准用于在网页上展示视频，视频只能在像flash这样子的插件中播放。
<source>标签可以链接到不同的视频文件，浏览器会使用第一个识别的格式。
Autoplay属性（在像iPad和iPhone这样的移动设备上不支持）
<track>定义字幕
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

HTML5 位置定位
getCurrentPosition()方法是用来获取用户的位置的。

使用位置定位：
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude;
}
</script>

错误处理：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 = "<img src='"+img_url+"'>";

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

HTML5拖放

在HTML5中，所有元素都可以被拖动。
使用例子:
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

</body>
</html>

步骤：
1、把元素设置为可拖动
<img draggable="true">
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、减少服务器加载--浏览器只会从服务器下载更新了和改变了的资源

例子：

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

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 + "<br>";
};

服务器端代码例子

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

The EventSource Object

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

最后编辑于：2017.12.03 03:31:30

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,732评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,496评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,264评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,807评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,806评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,675评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,029评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,683评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,704评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,666评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,773评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,413评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,016评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,204评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,083评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,503评论 2赞 343