HTML5学习笔记
http://www.w3schools.com/html/html5_intro.aspHTML5的浏览器支持：可通过为自定义标签设置样式，并通过JS的document.creatElement(" ");来创建这样子的元素。（为什么创建了元素之后就可以直接应用在标签上了）IE8以前都不支持为未知标签写样式，可用the shiv：
以上兼容代码需要放置在<head>中，因为浏览器需要再编译之前知道这些标签。
新的input 类型：
20160327104520.png<aside><aside>标签定义article以外的内容，aside的内容应该与article的内容相关。<aside> 的内容可用作文章的侧栏。
根据W3C的定义，一个语义化Web是，数据可以在不同应用，不同企业和团体中共享和复用。
HTML4转成HTML5：
HTML4转成HTML51、修改文档类型Doctype<!DOCTYPE html>2、修改编码方式<meta charset="utf-8">3、添加the shiv
4、为语义化标签添加CSS5、修改<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 SVGResolution 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 independentSupport for event handlersBest 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 applicationsMultimedia
多媒体有很多不同的格式，可以是你能听到或看到的所有的东西。第一代浏览器只支持文本并一种颜色里只有一种字体。之后的浏览器开始支持多色和多种字体甚至支持图片。对于声音，动画和视频的支持，不同浏览器有不同的做法。支持不一样类型和格式，并且一些格式需要额外的帮助插件才能工作。
只有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>
<object>标签定义了一个嵌入在HTML文档中的对象，用来在网页嵌入像Java applets，pdf reader，flash players这样子的插件。<embed>标签同样定义了一个嵌入在HTML文档中的对象。<embed width="400" height="50" src="bookmark.swf">需要注意的是<emded>标签没有结束符号，他不能包括可替换的文本。
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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"ondragstart="drag(event)" width="336" height="69">
</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是被拖元素的id4、把拖动的元素加在放的元素上。
HTML5本地存储HTML本地存储比cookie更好。本地存储是什么：有了本地存储，web应用可以在用户浏览器本地存储数据。在HTML5之前，应用数据必须存储在每一个服务器请求的cookie里。本地存储更安全和在不受网页表现的影响下本地存储大量的数据。不像cookies，存储上限为5MB而且信息永远不会转换到服务器。本地存储是per origin(per domain and protocol)。全部页面来自同一个起点，可以存取一样的数据。
HTML本地存储对象：HTML本地存储提供两个对象用来在客户端存储数据：window.localStorage--存储没有终止时间的数据window.sessionStorage--在一段时间内存储数据（当浏览器标签页关闭的时候数据就会丢失）localStorage 对象：当浏览器关闭的时候，数据不会被删除而且在下一天，下一周甚至是下一年都还存在。// StorelocalStorage.setItem("lastname", "Smith");// Retrievedocument.getElementById("result").innerHTML=localStorage.getItem("lastname");也可以采用点取值法：// StorelocalStorage.lastname="Smith";// Retrievedocument.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>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对象通常web worker是不会用在这么简单的脚本上，一般会更多用在CPU紧张的任务上
现在我们有了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 EventsServer-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对象，声明页面发送更新的URLsource.onmessage=function(event) {//每当接收到一个更新时，onmessage事件会触发 document.getElementById("result").innerHTML +=event.data + "<br>";};<?phpheader('Content-Type: text/event-stream');header('Cache-Control: no-cache');$time=date('r');echo "data: The server time is: {$time}\n\n";flush();?>前言
在刚接触HTML的时候，你是否被它众多的标签所惊讶？尤其是HTNL5的标签，新增了不少，很多HTML4的标签跨版本之后就用不了了，如此多的标签，要记是不可能记完的，我们只需要一些常用的标签就差不多了，剩下的可以等到用到时再去查询也是可以的。
但有时候收藏的技术网页经常会404，去百度虽然可以，但得逐行查找。于是我这种懒人总想着一劳永逸，以前就把一些我工作中可能会用到的东西自己整理成文档笔记，上传到自己的网盘以及GitHub。
今天我把以前整理好的HTML5标签大全笔记分享给大家，同时提供源文档，需要的时候Ctrl+F 查找关键字就可以了，顺便还可以做上自己的备注。
话不多说，直接上货！
一、媒体相关标签
二、全局属性相关标签
三、Windows相关标签
四、键盘和鼠标相关标签
五、表单相关标签
六、其他常用标签
七、HTML4/HTML5通用标签
八、源文件
上面的图片只是为了在文章中更好地展示，真正比较好用的我觉得还是md源文件，放不了链接就不放了，需要的话可以找我。
最后祝你们在工作和学习中都有所收获，如果文章对你有用，还望不吝三连，感激不尽！
发表评论