HTML最新标准HTML5总结(必看)
html5出来已经很久了，然而由于本人不是搞前端的，只知道有这个东西，具体概念有点模糊（其实就是一系列标准规范啦）；因此去年，专门对html5做了个简单的小结，今天正好看到，整理一下放到我的博客，以免丢失。有错误请指正，我是前端菜鸟。
先来个目录，如下：
•什么是html5
•html5发展历史
•html5详细介绍
•视频/音频 、画布 & svg 、可编辑内容 & 拖放、web存储、web worker 、服务器发送事件、表单增强功能、语义化标记、更多html5标准
•html5实例分析
•飞翔的小鸟
•柱状图
•html5发展展望
•参考资源
什么是html5
简单地说，html5就是一系列用来制定现代富web内容的相关技术的总称。
html5 ≈ html5核心规范 + css 3 + javascript； 其中html5和css主要负责界面，javascript负责逻辑处理；
目的：减少互联网富应用（ria )对flash、silverpght、java applet等的依赖，并且提供更多能有效增强网络应用的api。
如下图为典型的ria（rich internet apppcations）网页，包含一些图表，视频，游戏等：
html5发展历史
2004年，whatwg（网页超文本技术工作小组）提出草案web apppcations 1.0，即html5的前身；
2007年，w3c同意采纳html5作为标准，并成立了新的html工作团队；
2014年10月28日，w3c正式发布html5.0推荐标准；
2016年底前，计划发布html 5.1；
未来，待html5.1公布后，工作组会重复html5.1步骤再搞一个新的html5.2，继续完善、丰富功能。
如下表格为html 5标准演进历程：
|
2012 plan |
2012 |
2013 |
2014 |
2015 |
2016 |
|
html 5.0 |
候选版 |
征求评价 |
推荐标准 |
||
|
html 5.1 |
第一工作草案 |
最后召集 |
候选版 |
推荐标准 |
|
|
html 5.2 |
第一工作草案 |
tips：
q：什么是whatwg？
a：mozilla基金会与opera软件公司于2004年6月向w3c提交了一份立场文件遭否决， mozilla、opera和apple便自立门户成立了whatwg（网页超文本技术工作小组），同时也提出web apppcations 1.0。
q：html5.0与html5.1的区别？
a：5.1是5.0的超集，5.0中只包含了稳定特性，5.1中包含了5.0中省略掉的不稳定特性和其他新特性；目的：为了尽快及时完成html5，w3c舍弃一些不稳定、有争议的元素，等到后续的5.1版本再考虑。
html5详细介绍html5 视频 & 音频
直到现在，仍然不存在一项旨在网页上显示视频、音频的标准，大多数通过插件（比如 flash）来显示的；
但是，有了html5，我们可以不依赖任何插件，简单的使用video和audio标签来实现音视频的播放，如下代码：
xml/html code复制内容到剪贴板
<video width="320" height="240" controls="controls">
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie.mp4" type="video/mp4">
your browser does not support the video tag.
</video>
xml/html code复制内容到剪贴板
<audio controls="controls">
<source src="/i/song.ogg" type="audio/ogg">
<source src="/i/song.mp3" type="audio/mpeg">
your browser does not support the audio element.
</audio>
如下，为视频和音频的效果图:
tips：
1、html5 <video> 、< audio >元素拥有方法、属性和事件。可以用js动态控制视频 & 音频播放暂停等动作；
2、video 、audio元素允许多个 source 元素。source 元素可以链接不同的文件。浏览器将使用第一个可识别的格式
ps：youtube默认就是使用html5播放器，可以登录其官网www.youtube.com查看源码，如下:
html5 canvas & svg
画布canvas
html5 的 canvas 元素使用 javascript 在网页上绘制图像，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
xml/html code复制内容到剪贴板
<canvas id="mycanvas" width="200" height="100" style="border:1px sopd #c3c3c3;">
your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getelementbyid("mycanvas");
var ccxt=c.getcontext("2d");
cxt.moveto(10,10);
cxt.pneto(150,50);
cxt.pneto(10,50);
cxt.stroke();
</script>
如下，为效果图：
可伸缩矢量图形 (scalable vector graphics)
xml/html code复制内容到剪贴板
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
canvas & svg 的常见应用
使用canvas和svg可以实现很多小应用，特别是canvas，如下图例子：
html5 可编辑内容 & 拖放
contenteditable全局属性
contenteditable可用于实现网页编辑器，当前很多网页编辑器都用这个属性实现，如下图：
drag 和 drop
html5 的拖放将会把与用户交互带向另一个等级，并将会对如何设计用户交互产生重大影响。
主要的事件函数：ondragstart()、ondragover()、ondrop()；
如下为一个代码示例，将一个p拖放到另一个p里：
javascript code复制内容到剪贴板
<script type="text/javascript">
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>
<p id="p1" ondrop="drop(event)" ondragover="allowdrop(event)">
<img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</p>
<p id="p2" ondrop="drop(event)" ondragover="allowdrop(event)"></p>
html5 web存储
在讲html5 的web存储之前，先来说说cookie劣势，主要有以下三点：
cookie会被附加在每个http请求中，无形中增加了流量。
由于在http请求中的cookie是明文传递的，所以安全性成问题。（除非用https）
cookie的大小限制在4kb左右。对于复杂的存储需求来说是不够用的。
再来看看html5 web存储的优势：
没有额外的的请求头部数据
丰富的方法去设置、读取、移除数据
默认5mb存储限制
在html5中，web存储有两种形式：localstorag、sessionstorage，如下：
localstorage
存储的数据没有时间限制；
javascript code复制内容到剪贴板
<script type="text/javascript">
localstorage.lastname="smith";
document.write("last name: " + localstorage.lastname);
</script>
sessionstorage
当用户关闭浏览器窗口后，数据会被删除
javascript code复制内容到剪贴板
<script type="text/javascript">
sessionstorage.lastname="smith";
document.write(sessionstorage.lastname);
</script>
tips:
cookie是不可或缺的：cookie的作用是与服务器进行交互，作为http规范的一部分而存在 ，而web storage仅仅是为了在本地“存储”数据而生。
html5 web workers
web worker 是运行在后台的 javascript，独立于其他脚本，不会影响页面的性能（js多线程工作解决方案）。
web worker的基本原理就是在当前javascript的主线程中，使用worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postmessage，onmessage。
优势：异步执行复杂计算，不影响页面的展示
如下为一个求和的代码示例：
javascript code复制内容到剪贴板
<script>
var w;
function startworker() {
if (typeof (worker) !== "undefined") {
if (typeof (w) == "undefined") {
w = new worker("rs/demo_workers.js");
}
w.onmessage = function(event) {
document.getelementbyid("result").innerhtml = event.data;
};
} else {
document.getelementbyid("result").innerhtml = "sorry, your browser does not support web workers...";
}
}
function stopworker() {
w.terminate();
}
</script>
demo_workers.js文件，其中的postmessage() 方法 ，用于向 html 页面传回一段消息。
javascript code复制内容到剪贴板
var i=0;
function timedcount()
{
i=i+1;
postmessage(i);
settimeout("timedcount()",500);
}
timedcount();
tips:
1.不能跨域加载js
2.worker内代码不能访问dom
html 5 服务器发送事件
传统的网页都是浏览器向服务器“查询”数据，但是很多场合，最有效的方式是服务器向浏览器“发送”数据。比如，每当收到新的电子邮件，服务器就向浏览器发送一个“通知”，这要比浏览器按时向服务器查询（polpng）更有效率。
html5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新；
举个例子，如下，其中服务器端使用java的struts 2框架，会向浏览器发送服务器最新的时间数据：
服务端代码：
javascript code复制内容到剪贴板
pubpc class sse extends actionsupport {
private inputstream ssestream;
pubpc inputstream getssestream() {
return ssestream;
}
pubpc string handlesse() {
system.out.println("inside handlesse() ");
string result = "data: "+new date().tostring() + "\n\n";
ssestream = new bytearrayinputstream(result.getbytes() );
system.out.println("exiting handlesse() ");
return success;
}
}
javascript code复制内容到剪贴板
<action name="handlesse" class="pichen.java.html5.test.sse" method="handlesse">
<result name="success" type="stream">
<param name="contenttype">text/event-stream</param>
<param name="inputname">ssestream</param>
</result>
</action>
客户端代码：
javascript code复制内容到剪贴板
<p><output id="result">output value</output></p>
<script>
(function(global, window, document) {
'use strict';
function main() {
window.addeventpstener('domcontentloaded', contentloaded);
}
function contentloaded() {
var result = document.getelementbyid('result');
var stream = new eventsource('handlesse.action');
stream.onmessage=function(event){
var data = event.data+" by onmessage";
result.value = data;
}
}
main();
})(this, window, window.document);
</script>
html 5 表单增强功能
新的 input 类型
•–email
•–url
•–number
•–range
•–date pickers (date, month, week, time, datetime, datetime-local)
•–search
•–color
下图为各个input元素的效果图：
下图为各个input元素的效果图：
html5 的新的表单元素
–datapst
–keygen
–output
下图为datapst的示例：
html5 的新的表单属性
–新的 form 属性：
•autocomplete
•novapdate
–新的 input 属性：
•autocomplete
•autofocus
•form
•height 和 width
•pst
•min, max 和 step
•multiple
•pattern (regexp)
•placeholder
•required
•form overrides (formaction, formenctype, formmethod, formnovapdate, formtarget)
下表为各个浏览器对表单属性的支持情况：
|
input type |
ie |
firefox |
opera |
chrome |
safari |
|
autocomplete |
8.0 |
3.5 |
9.5 |
3.0 |
4.0 |
|
autofocus |
no |
no |
10.0 |
3.0 |
4.0 |
|
form |
no |
no |
9.5 |
no |
no |
|
form overrides |
no |
no |
10.5 |
no |
no |
|
height and width |
8.0 |
3.5 |
9.5 |
3.0 |
4.0 |
|
pst |
no |
no |
9.5 |
no |
no |
|
min, max and step |
no |
no |
9.5 |
3.0 |
no |
|
multiple |
no |
3.5 |
no |
3.0 |
4.0 |
|
novapdate |
no |
no |
no |
no |
no |
|
pattern |
no |
no |
9.5 |
3.0 |
no |
|
placeholder |
no |
no |
no |
3.0 |
3.0 |
|
required |
no |
no |
9.5 |
3.0 |
no |
html5语义化标记
html5 可以使用语义化的标签代替大量的无意义的p标签。这种语义化的特性不仅提升了网页的质量和语义，并且减少了以前用于css或js调用的class和id属性。
更多html 5标准
html5推荐标准（w3c官网推荐标准）
–http://www.w3.org/tr/html5/
或者参考w3school
html5 完整的新标签
–http://www.w3school.com.cn/tags/index.asp
html 全局属性
–http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
全局事件属性
–http://www.w3school.com.cn/tags/html_ref_eventattributes.asp
html5实例分析飞翔的小鸟
基于phaser（开源的html5 2d游戏开发框架），主要需要编写以下三个函数：
preload函数（执行一次）：
加载资源（背景、图片等资源）
create函数（执行一次）：
给鸟一个向下的重力，不受控制的时候自动下落
添加键盘空格事件，按下空格时改变小鸟坐标
创建墙壁事件，每隔1.5s，出现一排墙壁往左移动（中间随机隔3块）
update函数（每帧执行）：
判断是否飞出边界
判断是否碰到墙壁
效果图如下：
柱状图表
主要步骤：
利用canvas画出图形
定义鼠标点击事件（获取鼠标坐标来区分点击的目标），$(canvas).on("cpck",mousecpck);
定义鼠标hover事件（获取鼠标坐标来区分hover的目标），$(canvas).on("mousemove",mousemove);
效果图：
html5发展展望
当前各大浏览器对html5支持情况(满分是555分)，http://html5test.com/
一句话，无论是桌面还是手机浏览器，谷歌对html5的支持最全面。
各大公司行动
–谷歌，宣布自动转换flash广告为html5版本；chrome浏览器
–youtube ，使用html 5的播放器；
–amazon，宣布停用所有flash广告；
–腾讯，微信朋友圈小游戏、贺卡或邀请函； qq空间h5游戏&helpp;
–百度，直达号；
–阿里，uc浏览器，手机淘宝h5游戏&helpp;
以上这篇html最新标准html5总结(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址：