HTML最新标准HTML5总结(必看)html5绘制可控制坡度的骑自行车动画特效源码html css 控制div或者table等固定在指定位置的实现方法HTML5 新标签全部总汇(推荐)Html与css基础(必看篇)html5实现的点击按钮出现卷帘动画打开画板特效源码HTML5通用接口详解HTML5实现的手机验证抽奖领券效果源码HTML学习笔记--HTML的语法详解(必看)

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标准演进历程：

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
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复制内容到剪贴板

"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));   

}   

  

  

  

    "p1" ondrop="drop(event)" ondragover="allowDrop(event)">   

        "/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />   

    

  

    "p2" ondrop="drop(event)" ondragover="allowDrop(event)">

  

HTML5 Web存储

在讲HTML5 的Web存储之前，先来说说cookie劣势，主要有以下三点：

Cookie会被附加在每个HTTP请求中，无形中增加了流量。

由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题。（除非用HTTPS）

Cookie的大小限制在4KB左右。对于复杂的存储需求来说是不够用的。

再来看看HTML5 Web存储的优势：

没有额外的的请求头部数据

丰富的方法去设置、读取、移除数据

默认5MB存储限制

在HTML5中，Web存储有两种形式：localStorag、sessionStorage，如下：

localStorage 

     存储的数据没有时间限制；

JavaScript Code复制内容到剪贴板

"text/javascript">   

localStorage.lastname="Smith";   

document.write("Last name: " + localStorage.lastname);   

  

sessionStorage

当用户关闭浏览器窗口后，数据会被删除 

JavaScript Code复制内容到剪贴板

"text/javascript">   提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：HTML5通用接口详解html5绘制可控制坡度的骑自行车动画特效源码html css 控制div或者table等固定在指定位置的实现方法HTML5 新标签全部总汇(推荐)HTML最新标准HTML5总结(必看)Html与css基础(必看篇)html5实现的点击按钮出现卷帘动画打开画板特效源码HTML5实现的手机验证抽奖领券效果源码HTML学习笔记--HTML的语法详解(必看)

下一篇：HTML5 新标签全部总汇(推荐)Html5新增标签有哪些HTML5标签大全HTML5的video标签的浏览器兼容性增强方案分享HTML5标签嵌套规则详解【必看】HTML5文档结构标签