html5中文学习网

您的位置: 首页 > html5教程 > 入门教程 » 正文

HTML最新标准HTML5总结(必看)_html5教程技巧

[ ] 已经帮助:人解决问题

HTML5出来已经很久了,然而由于本人不是搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦);因此去年,专门对HTML5做了个简单的小结,今天正好看到,整理一下放到我的博客,以免丢失。有错误请指正,我是前端菜鸟。SJhHTML5中文学习网 - HTML5先行者学习网

先来个目录,如下:SJhHTML5中文学习网 - HTML5先行者学习网

•什么是HTML5SJhHTML5中文学习网 - HTML5先行者学习网

•HTML5发展历史SJhHTML5中文学习网 - HTML5先行者学习网

•HTML5详细介绍 SJhHTML5中文学习网 - HTML5先行者学习网

•视频/音频 、画布 & SVG 、可编辑内容 & 拖放、Web存储、Web Worker 、服务器发送事件、表单增强功能、语义化标记、更多HTML5标准SJhHTML5中文学习网 - HTML5先行者学习网

•HTML5实例分析 SJhHTML5中文学习网 - HTML5先行者学习网

•飞翔的小鸟SJhHTML5中文学习网 - HTML5先行者学习网

•柱状图SJhHTML5中文学习网 - HTML5先行者学习网

•HTML5发展展望SJhHTML5中文学习网 - HTML5先行者学习网

•参考资源SJhHTML5中文学习网 - HTML5先行者学习网

什么是HTML5 SJhHTML5中文学习网 - HTML5先行者学习网

简单地说,HTML5就是一系列用来制定现代富Web内容的相关技术的总称。SJhHTML5中文学习网 - HTML5先行者学习网

HTML5 ≈ HTML5核心规范 + CSS 3 + JavaScript;  其中HTML5和CSS主要负责界面,JavaScript负责逻辑处理;SJhHTML5中文学习网 - HTML5先行者学习网

      SJhHTML5中文学习网 - HTML5先行者学习网

目的:减少互联网富应用(RIA )对Flash、Silverpght、Java Applet等的依赖,并且提供更多能有效增强网络应用的API。SJhHTML5中文学习网 - HTML5先行者学习网

如下图为典型的RIA(Rich Internet Apppcations)网页,包含一些图表,视频,游戏等:SJhHTML5中文学习网 - HTML5先行者学习网

      SJhHTML5中文学习网 - HTML5先行者学习网

HTML5发展历史 SJhHTML5中文学习网 - HTML5先行者学习网

2004年,WHATWG(网页超文本技术工作小组)提出草案Web Apppcations 1.0,即HTML5的前身; SJhHTML5中文学习网 - HTML5先行者学习网

2007年,W3C同意采纳HTML5作为标准,并成立了新的HTML工作团队; SJhHTML5中文学习网 - HTML5先行者学习网

2014年10月28日,W3C正式发布HTML5.0推荐标准; SJhHTML5中文学习网 - HTML5先行者学习网

2016年底前,计划发布HTML 5.1; SJhHTML5中文学习网 - HTML5先行者学习网

未来,待HTML5.1公布后,工作组会重复HTML5.1步骤再搞一个新的HTML5.2,继续完善、丰富功能。SJhHTML5中文学习网 - HTML5先行者学习网

如下表格为HTML 5标准演进历程:SJhHTML5中文学习网 - HTML5先行者学习网

2012 planSJhHTML5中文学习网 - HTML5先行者学习网

2012SJhHTML5中文学习网 - HTML5先行者学习网

2013SJhHTML5中文学习网 - HTML5先行者学习网

2014SJhHTML5中文学习网 - HTML5先行者学习网

2015SJhHTML5中文学习网 - HTML5先行者学习网

2016SJhHTML5中文学习网 - HTML5先行者学习网

HTML 5.0SJhHTML5中文学习网 - HTML5先行者学习网

候选版SJhHTML5中文学习网 - HTML5先行者学习网

征求评价SJhHTML5中文学习网 - HTML5先行者学习网

推荐标准SJhHTML5中文学习网 - HTML5先行者学习网

   

HTML 5.1SJhHTML5中文学习网 - HTML5先行者学习网

第一工作草案SJhHTML5中文学习网 - HTML5先行者学习网

 

最后召集SJhHTML5中文学习网 - HTML5先行者学习网

候选版SJhHTML5中文学习网 - HTML5先行者学习网

推荐标准SJhHTML5中文学习网 - HTML5先行者学习网

HTML 5.2SJhHTML5中文学习网 - HTML5先行者学习网

     

第一工作草案SJhHTML5中文学习网 - HTML5先行者学习网

 

Tips:SJhHTML5中文学习网 - HTML5先行者学习网

Q:什么是WHATWG?SJhHTML5中文学习网 - HTML5先行者学习网

A:Mozilla基金会与Opera软件公司于2004年6月向W3C提交了一份立场文件遭否决, Mozilla、Opera和Apple便自立门户成立了WHATWG(网页超文本技术工作小组),同时也提出Web Apppcations 1.0。SJhHTML5中文学习网 - HTML5先行者学习网

Q:HTML5.0与HTML5.1的区别?SJhHTML5中文学习网 - HTML5先行者学习网

A:5.1是5.0的超集,5.0中只包含了稳定特性,5.1中包含了5.0中省略掉的不稳定特性和其他新特性;目的:为了尽快及时完成HTML5,W3C舍弃一些不稳定、有争议的元素,等到后续的5.1版本再考虑。SJhHTML5中文学习网 - HTML5先行者学习网
SJhHTML5中文学习网 - HTML5先行者学习网

HTML5详细介绍HTML5 视频 & 音频 SJhHTML5中文学习网 - HTML5先行者学习网

 直到现在,仍然不存在一项旨在网页上显示视频、音频的标准,大多数通过插件(比如 Flash)来显示的;SJhHTML5中文学习网 - HTML5先行者学习网

但是,有了HTML5,我们可以不依赖任何插件,简单的使用video和audio标签来实现音视频的播放,如下代码:SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

XML/HTML Code复制内容到剪贴板SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

<video width="320" height="240" controls="controls">  SJhHTML5中文学习网 - HTML5先行者学习网

  <source src="/i/movie.ogg" type="video/ogg">  SJhHTML5中文学习网 - HTML5先行者学习网

  <source src="/i/movie.mp4" type="video/mp4">  SJhHTML5中文学习网 - HTML5先行者学习网

  Your browser does not support the video tag.   SJhHTML5中文学习网 - HTML5先行者学习网

</video>  SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

XML/HTML Code复制内容到剪贴板SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

<audio controls="controls">  SJhHTML5中文学习网 - HTML5先行者学习网

  <source src="/i/song.ogg" type="audio/ogg">  SJhHTML5中文学习网 - HTML5先行者学习网

  <source src="/i/song.mp3" type="audio/mpeg">  SJhHTML5中文学习网 - HTML5先行者学习网

Your browser does not support the audio element.   SJhHTML5中文学习网 - HTML5先行者学习网

</audio>  SJhHTML5中文学习网 - HTML5先行者学习网

如下,为视频和音频的效果图:SJhHTML5中文学习网 - HTML5先行者学习网

    SJhHTML5中文学习网 - HTML5先行者学习网

Tips:SJhHTML5中文学习网 - HTML5先行者学习网
1、HTML5 <video> 、< audio >元素拥有方法、属性和事件。可以用js动态控制视频 & 音频播放暂停等动作;SJhHTML5中文学习网 - HTML5先行者学习网
2、Video 、audio元素允许多个 source 元素。source 元素可以链接不同的文件。浏览器将使用第一个可识别的格式
SJhHTML5中文学习网 - HTML5先行者学习网

 SJhHTML5中文学习网 - HTML5先行者学习网

PS:YouTube默认就是使用HTML5播放器,可以登录其官网www.youtube.com查看源码,如下:SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

HTML5 Canvas & SVG SJhHTML5中文学习网 - HTML5先行者学习网

画布Canvas SJhHTML5中文学习网 - HTML5先行者学习网

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。SJhHTML5中文学习网 - HTML5先行者学习网

XML/HTML Code复制内容到剪贴板SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

    <canvas id="myCanvas" width="200" height="100" style="border:1px sopd #c3c3c3;">  SJhHTML5中文学习网 - HTML5先行者学习网

    Your browser does not support the canvas element.   SJhHTML5中文学习网 - HTML5先行者学习网

    </canvas>  SJhHTML5中文学习网 - HTML5先行者学习网

    <script type="text/javascript">  SJhHTML5中文学习网 - HTML5先行者学习网

    var c=document.getElementById("myCanvas");   SJhHTML5中文学习网 - HTML5先行者学习网

    var ccxt=c.getContext("2d");   SJhHTML5中文学习网 - HTML5先行者学习网

    cxt.moveTo(10,10);   SJhHTML5中文学习网 - HTML5先行者学习网

    cxt.pneTo(150,50);   SJhHTML5中文学习网 - HTML5先行者学习网

    cxt.pneTo(10,50);   SJhHTML5中文学习网 - HTML5先行者学习网

    cxt.stroke();   SJhHTML5中文学习网 - HTML5先行者学习网

    </script>  SJhHTML5中文学习网 - HTML5先行者学习网

如下,为效果图:SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

可伸缩矢量图形 (Scalable Vector Graphics)SJhHTML5中文学习网 - HTML5先行者学习网

XML/HTML Code复制内容到剪贴板SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">  SJhHTML5中文学习网 - HTML5先行者学习网

       <polygon points="100,10 40,180 190,60 10,60 160,180"  SJhHTML5中文学习网 - HTML5先行者学习网

       style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />  SJhHTML5中文学习网 - HTML5先行者学习网

    </svg>  SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

Canvas & SVG 的常见应用SJhHTML5中文学习网 - HTML5先行者学习网

使用canvas和SVG可以实现很多小应用,特别是canvas,如下图例子:SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

HTML5 可编辑内容 & 拖放 SJhHTML5中文学习网 - HTML5先行者学习网

Contenteditable全局属性SJhHTML5中文学习网 - HTML5先行者学习网

Contenteditable可用于实现网页编辑器,当前很多网页编辑器都用这个属性实现,如下图:SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

Drag 和 dropSJhHTML5中文学习网 - HTML5先行者学习网

HTML5 的拖放将会把与用户交互带向另一个等级,并将会对如何设计用户交互产生重大影响。SJhHTML5中文学习网 - HTML5先行者学习网

主要的事件函数:Ondragstart()、Ondragover()、Ondrop();SJhHTML5中文学习网 - HTML5先行者学习网

如下为一个代码示例,将一个p拖放到另一个p里:SJhHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

    <script type="text/javascript">   SJhHTML5中文学习网 - HTML5先行者学习网

    function allowDrop(ev)   SJhHTML5中文学习网 - HTML5先行者学习网

    {   SJhHTML5中文学习网 - HTML5先行者学习网

        ev.preventDefault();   SJhHTML5中文学习网 - HTML5先行者学习网

    }   SJhHTML5中文学习网 - HTML5先行者学习网

    function drag(ev)   SJhHTML5中文学习网 - HTML5先行者学习网

    {   SJhHTML5中文学习网 - HTML5先行者学习网

        ev.dataTransfer.setData("Text",ev.target.id);   SJhHTML5中文学习网 - HTML5先行者学习网

    }   SJhHTML5中文学习网 - HTML5先行者学习网

    function drop(ev)   SJhHTML5中文学习网 - HTML5先行者学习网

    {   SJhHTML5中文学习网 - HTML5先行者学习网

        ev.preventDefault();   SJhHTML5中文学习网 - HTML5先行者学习网

        var data=ev.dataTransfer.getData("Text");   SJhHTML5中文学习网 - HTML5先行者学习网

        ev.target.appendChild(document.getElementById(data));   SJhHTML5中文学习网 - HTML5先行者学习网

    }   SJhHTML5中文学习网 - HTML5先行者学习网

    </script>   SJhHTML5中文学习网 - HTML5先行者学习网

    </head>   SJhHTML5中文学习网 - HTML5先行者学习网

    <body>   SJhHTML5中文学习网 - HTML5先行者学习网

        <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">   SJhHTML5中文学习网 - HTML5先行者学习网

            <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />   SJhHTML5中文学习网 - HTML5先行者学习网

        </p>   SJhHTML5中文学习网 - HTML5先行者学习网

        <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

HTML5 Web存储 SJhHTML5中文学习网 - HTML5先行者学习网

在讲HTML5 的Web存储之前,先来说说cookie劣势,主要有以下三点:SJhHTML5中文学习网 - HTML5先行者学习网

Cookie会被附加在每个HTTP请求中,无形中增加了流量。 SJhHTML5中文学习网 - HTML5先行者学习网

由于在HTTP请求中的Cookie是明文传递的,所以安全性成问题。(除非用HTTPS) SJhHTML5中文学习网 - HTML5先行者学习网

Cookie的大小限制在4KB左右。对于复杂的存储需求来说是不够用的。SJhHTML5中文学习网 - HTML5先行者学习网

再来看看HTML5 Web存储的优势:SJhHTML5中文学习网 - HTML5先行者学习网

没有额外的的请求头部数据 SJhHTML5中文学习网 - HTML5先行者学习网

丰富的方法去设置、读取、移除数据 SJhHTML5中文学习网 - HTML5先行者学习网

默认5MB存储限制SJhHTML5中文学习网 - HTML5先行者学习网

在HTML5中,Web存储有两种形式:localStorag、sessionStorage,如下:SJhHTML5中文学习网 - HTML5先行者学习网

localStorage SJhHTML5中文学习网 - HTML5先行者学习网

     存储的数据没有时间限制;SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

    <script type="text/javascript">   SJhHTML5中文学习网 - HTML5先行者学习网

    localStorage.lastname="Smith";   SJhHTML5中文学习网 - HTML5先行者学习网

    document.write("Last name: " + localStorage.lastname);   SJhHTML5中文学习网 - HTML5先行者学习网

    </script>  SJhHTML5中文学习网 - HTML5先行者学习网

sessionStorageSJhHTML5中文学习网 - HTML5先行者学习网

当用户关闭浏览器窗口后,数据会被删除 SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

    <script type="text/javascript">   SJhHTML5中文学习网 - HTML5先行者学习网

    sessionStorage.lastname="Smith";   SJhHTML5中文学习网 - HTML5先行者学习网

    document.write(sessionStorage.lastname);   SJhHTML5中文学习网 - HTML5先行者学习网

    </script>  SJhHTML5中文学习网 - HTML5先行者学习网

Tips:SJhHTML5中文学习网 - HTML5先行者学习网
Cookie是不可或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。
SJhHTML5中文学习网 - HTML5先行者学习网

HTML5 Web Workers SJhHTML5中文学习网 - HTML5先行者学习网

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能(JS多线程工作解决方案)。SJhHTML5中文学习网 - HTML5先行者学习网

Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage。SJhHTML5中文学习网 - HTML5先行者学习网

优势:异步执行复杂计算,不影响页面的展示SJhHTML5中文学习网 - HTML5先行者学习网

 如下为一个求和的代码示例:SJhHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

    <script>   SJhHTML5中文学习网 - HTML5先行者学习网

    var w;   SJhHTML5中文学习网 - HTML5先行者学习网

      SJhHTML5中文学习网 - HTML5先行者学习网

    function startWorker() {   SJhHTML5中文学习网 - HTML5先行者学习网

        if (typeof (Worker) !== "undefined") {   SJhHTML5中文学习网 - HTML5先行者学习网

            if (typeof (w) == "undefined") {   SJhHTML5中文学习网 - HTML5先行者学习网

               w = new Worker("rs/demo_workers.js");   SJhHTML5中文学习网 - HTML5先行者学习网

            }   SJhHTML5中文学习网 - HTML5先行者学习网

            w.onmessage = function(event) {   SJhHTML5中文学习网 - HTML5先行者学习网

               document.getElementById("result").innerHTML = event.data;   SJhHTML5中文学习网 - HTML5先行者学习网

            };   SJhHTML5中文学习网 - HTML5先行者学习网

        } else {   SJhHTML5中文学习网 - HTML5先行者学习网

            document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";   SJhHTML5中文学习网 - HTML5先行者学习网

        }   SJhHTML5中文学习网 - HTML5先行者学习网

    }   SJhHTML5中文学习网 - HTML5先行者学习网

      SJhHTML5中文学习网 - HTML5先行者学习网

    function stopWorker() {   SJhHTML5中文学习网 - HTML5先行者学习网

        w.terminate();   SJhHTML5中文学习网 - HTML5先行者学习网

    }   SJhHTML5中文学习网 - HTML5先行者学习网

    </script>  SJhHTML5中文学习网 - HTML5先行者学习网

demo_workers.js文件,其中的postMessage() 方法 ,用于向 HTML 页面传回一段消息。SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

    var i=0;   SJhHTML5中文学习网 - HTML5先行者学习网

      SJhHTML5中文学习网 - HTML5先行者学习网

    function timedCount()   SJhHTML5中文学习网 - HTML5先行者学习网

    {   SJhHTML5中文学习网 - HTML5先行者学习网

        i=i+1;   SJhHTML5中文学习网 - HTML5先行者学习网

        postMessage(i);   SJhHTML5中文学习网 - HTML5先行者学习网

        setTimeout("timedCount()",500);   SJhHTML5中文学习网 - HTML5先行者学习网

    }   SJhHTML5中文学习网 - HTML5先行者学习网

      SJhHTML5中文学习网 - HTML5先行者学习网

    timedCount();  SJhHTML5中文学习网 - HTML5先行者学习网

Tips:SJhHTML5中文学习网 - HTML5先行者学习网

1.不能跨域加载JSSJhHTML5中文学习网 - HTML5先行者学习网

2.worker内代码不能访问DOMSJhHTML5中文学习网 - HTML5先行者学习网

HTML 5 服务器发送事件SJhHTML5中文学习网 - HTML5先行者学习网

传统的网页都是浏览器向服务器“查询”数据,但是很多场合,最有效的方式是服务器向浏览器“发送”数据。比如,每当收到新的电子邮件,服务器就向浏览器发送一个“通知”,这要比浏览器按时向服务器查询(polpng)更有效率。SJhHTML5中文学习网 - HTML5先行者学习网

HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新;SJhHTML5中文学习网 - HTML5先行者学习网

举个例子,如下,其中服务器端使用Java的Struts 2框架,会向浏览器发送服务器最新的时间数据:SJhHTML5中文学习网 - HTML5先行者学习网

服务端代码:SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

    pubpc class SSE extends ActionSupport {   SJhHTML5中文学习网 - HTML5先行者学习网

        private InputStream sseStream;   SJhHTML5中文学习网 - HTML5先行者学习网

        pubpc InputStream getSseStream() {   SJhHTML5中文学习网 - HTML5先行者学习网

            return sseStream;   SJhHTML5中文学习网 - HTML5先行者学习网

        }   SJhHTML5中文学习网 - HTML5先行者学习网

        pubpc String handleSSE() {   SJhHTML5中文学习网 - HTML5先行者学习网

            System.out.println("Inside handleSSE() ");   SJhHTML5中文学习网 - HTML5先行者学习网

            String result = "data: "+new Date().toString() + "/n/n";   SJhHTML5中文学习网 - HTML5先行者学习网

            sseStream = new ByteArrayInputStream(result.getBytes() );   SJhHTML5中文学习网 - HTML5先行者学习网

            System.out.println("Exiting handleSSE() ");   SJhHTML5中文学习网 - HTML5先行者学习网

            return SUCCESS;   SJhHTML5中文学习网 - HTML5先行者学习网

        }   SJhHTML5中文学习网 - HTML5先行者学习网

    }  SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

    <action name="handleSSE" class="pichen.java.html5.test.SSE" method="handleSSE">   SJhHTML5中文学习网 - HTML5先行者学习网

                <result name="success" type="stream">   SJhHTML5中文学习网 - HTML5先行者学习网

                    <param name="contentType">text/event-stream</param>   SJhHTML5中文学习网 - HTML5先行者学习网

                    <param name="inputName">sseStream</param>   SJhHTML5中文学习网 - HTML5先行者学习网

                </result>   SJhHTML5中文学习网 - HTML5先行者学习网

    </action>  SJhHTML5中文学习网 - HTML5先行者学习网

客户端代码:SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

    <p><output id="result">OUTPUT VALUE</output></p>   SJhHTML5中文学习网 - HTML5先行者学习网

    <script>   SJhHTML5中文学习网 - HTML5先行者学习网

    (function(global, window, document) {   SJhHTML5中文学习网 - HTML5先行者学习网

      'use strict';   SJhHTML5中文学习网 - HTML5先行者学习网

      function main() {   SJhHTML5中文学习网 - HTML5先行者学习网

        window.addEventpstener('DOMContentLoaded', contentLoaded);   SJhHTML5中文学习网 - HTML5先行者学习网

      }   SJhHTML5中文学习网 - HTML5先行者学习网

      function contentLoaded() {   SJhHTML5中文学习网 - HTML5先行者学习网

        var result = document.getElementById('result');   SJhHTML5中文学习网 - HTML5先行者学习网

        var stream = new EventSource('handleSSE.action');   SJhHTML5中文学习网 - HTML5先行者学习网

        stream.onmessage=function(event){   SJhHTML5中文学习网 - HTML5先行者学习网

            var data = event.data+" by onmessage";   SJhHTML5中文学习网 - HTML5先行者学习网

            result.value = data;   SJhHTML5中文学习网 - HTML5先行者学习网

        }   SJhHTML5中文学习网 - HTML5先行者学习网

      }   SJhHTML5中文学习网 - HTML5先行者学习网

      main();   SJhHTML5中文学习网 - HTML5先行者学习网

    })(this, window, window.document);   SJhHTML5中文学习网 - HTML5先行者学习网

    </script>  SJhHTML5中文学习网 - HTML5先行者学习网

HTML 5 表单增强功能SJhHTML5中文学习网 - HTML5先行者学习网

新的 Input 类型SJhHTML5中文学习网 - HTML5先行者学习网

•–emailSJhHTML5中文学习网 - HTML5先行者学习网
•–urlSJhHTML5中文学习网 - HTML5先行者学习网
•–numberSJhHTML5中文学习网 - HTML5先行者学习网
•–rangeSJhHTML5中文学习网 - HTML5先行者学习网
•–Date pickers (date, month, week, time, datetime, datetime-local)SJhHTML5中文学习网 - HTML5先行者学习网
•–searchSJhHTML5中文学习网 - HTML5先行者学习网
•–colorSJhHTML5中文学习网 - HTML5先行者学习网

下图为各个input元素的效果图:SJhHTML5中文学习网 - HTML5先行者学习网

下图为各个input元素的效果图:SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

HTML5 的新的表单元素SJhHTML5中文学习网 - HTML5先行者学习网

–datapst SJhHTML5中文学习网 - HTML5先行者学习网

–keygen SJhHTML5中文学习网 - HTML5先行者学习网

–outputSJhHTML5中文学习网 - HTML5先行者学习网

下图为datapst的示例:SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

HTML5 的新的表单属性SJhHTML5中文学习网 - HTML5先行者学习网

–新的 form 属性:SJhHTML5中文学习网 - HTML5先行者学习网

•autocompleteSJhHTML5中文学习网 - HTML5先行者学习网

•NovapdateSJhHTML5中文学习网 - HTML5先行者学习网

–新的 input 属性:SJhHTML5中文学习网 - HTML5先行者学习网

•autocompleteSJhHTML5中文学习网 - HTML5先行者学习网

•autofocusSJhHTML5中文学习网 - HTML5先行者学习网

•formSJhHTML5中文学习网 - HTML5先行者学习网

•height 和 widthSJhHTML5中文学习网 - HTML5先行者学习网

•pstSJhHTML5中文学习网 - HTML5先行者学习网

•min, max 和 stepSJhHTML5中文学习网 - HTML5先行者学习网

•multipleSJhHTML5中文学习网 - HTML5先行者学习网

•pattern (regexp)SJhHTML5中文学习网 - HTML5先行者学习网

•placeholderSJhHTML5中文学习网 - HTML5先行者学习网

•RequiredSJhHTML5中文学习网 - HTML5先行者学习网

•form overrides (formaction, formenctype, formmethod, formnovapdate, formtarget)SJhHTML5中文学习网 - HTML5先行者学习网

下表为各个浏览器对表单属性的支持情况:SJhHTML5中文学习网 - HTML5先行者学习网

Input typeSJhHTML5中文学习网 - HTML5先行者学习网

IESJhHTML5中文学习网 - HTML5先行者学习网

FirefoxSJhHTML5中文学习网 - HTML5先行者学习网

OperaSJhHTML5中文学习网 - HTML5先行者学习网

ChromeSJhHTML5中文学习网 - HTML5先行者学习网

SafariSJhHTML5中文学习网 - HTML5先行者学习网

autocompleteSJhHTML5中文学习网 - HTML5先行者学习网

8.0SJhHTML5中文学习网 - HTML5先行者学习网

3.5SJhHTML5中文学习网 - HTML5先行者学习网

9.5SJhHTML5中文学习网 - HTML5先行者学习网

3.0SJhHTML5中文学习网 - HTML5先行者学习网

4.0SJhHTML5中文学习网 - HTML5先行者学习网

autofocusSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

10.0SJhHTML5中文学习网 - HTML5先行者学习网

3.0SJhHTML5中文学习网 - HTML5先行者学习网

4.0SJhHTML5中文学习网 - HTML5先行者学习网

formSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

9.5SJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

form overridesSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

10.5SJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

height and widthSJhHTML5中文学习网 - HTML5先行者学习网

8.0SJhHTML5中文学习网 - HTML5先行者学习网

3.5SJhHTML5中文学习网 - HTML5先行者学习网

9.5SJhHTML5中文学习网 - HTML5先行者学习网

3.0SJhHTML5中文学习网 - HTML5先行者学习网

4.0SJhHTML5中文学习网 - HTML5先行者学习网

pstSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

9.5SJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

min, max and stepSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

9.5SJhHTML5中文学习网 - HTML5先行者学习网

3.0SJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

multipleSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

3.5SJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

3.0SJhHTML5中文学习网 - HTML5先行者学习网

4.0SJhHTML5中文学习网 - HTML5先行者学习网

novapdateSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

patternSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

9.5SJhHTML5中文学习网 - HTML5先行者学习网

3.0SJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

placeholderSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

3.0SJhHTML5中文学习网 - HTML5先行者学习网

3.0SJhHTML5中文学习网 - HTML5先行者学习网

requiredSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

9.5SJhHTML5中文学习网 - HTML5先行者学习网

3.0SJhHTML5中文学习网 - HTML5先行者学习网

NoSJhHTML5中文学习网 - HTML5先行者学习网

HTML5语义化标记 SJhHTML5中文学习网 - HTML5先行者学习网

HTML5 可以使用语义化的标签代替大量的无意义的p标签。这种语义化的特性不仅提升了网页的质量和语义,并且减少了以前用于CSS或JS调用的class和id属性。SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

更多HTML 5标准 SJhHTML5中文学习网 - HTML5先行者学习网

HTML5推荐标准(W3C官网推荐标准)SJhHTML5中文学习网 - HTML5先行者学习网

–http://www.w3.org/TR/html5/SJhHTML5中文学习网 - HTML5先行者学习网

或者参考w3schoolSJhHTML5中文学习网 - HTML5先行者学习网

HTML5 完整的新标签SJhHTML5中文学习网 - HTML5先行者学习网

–http://www.w3school.com.cn/tags/index.aspSJhHTML5中文学习网 - HTML5先行者学习网

HTML 全局属性SJhHTML5中文学习网 - HTML5先行者学习网

–http://www.w3school.com.cn/tags/html_ref_standardattributes.aspSJhHTML5中文学习网 - HTML5先行者学习网

全局事件属性SJhHTML5中文学习网 - HTML5先行者学习网

–http://www.w3school.com.cn/tags/html_ref_eventattributes.aspSJhHTML5中文学习网 - HTML5先行者学习网

HTML5实例分析飞翔的小鸟 SJhHTML5中文学习网 - HTML5先行者学习网

基于Phaser(开源的HTML5 2D游戏开发框架),主要需要编写以下三个函数:SJhHTML5中文学习网 - HTML5先行者学习网

Preload函数(执行一次):SJhHTML5中文学习网 - HTML5先行者学习网

加载资源(背景、图片等资源)SJhHTML5中文学习网 - HTML5先行者学习网

Create函数(执行一次):SJhHTML5中文学习网 - HTML5先行者学习网

给鸟一个向下的重力,不受控制的时候自动下落 SJhHTML5中文学习网 - HTML5先行者学习网

添加键盘空格事件,按下空格时改变小鸟坐标 SJhHTML5中文学习网 - HTML5先行者学习网

创建墙壁事件,每隔1.5s,出现一排墙壁往左移动(中间随机隔3块)SJhHTML5中文学习网 - HTML5先行者学习网

Update函数(每帧执行):SJhHTML5中文学习网 - HTML5先行者学习网

判断是否飞出边界 SJhHTML5中文学习网 - HTML5先行者学习网

判断是否碰到墙壁SJhHTML5中文学习网 - HTML5先行者学习网

效果图如下:SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

柱状图表 SJhHTML5中文学习网 - HTML5先行者学习网

主要步骤:SJhHTML5中文学习网 - HTML5先行者学习网

利用canvas画出图形 SJhHTML5中文学习网 - HTML5先行者学习网

定义鼠标点击事件(获取鼠标坐标来区分点击的目标),$(canvas).on("cpck",mouseCpck);  SJhHTML5中文学习网 - HTML5先行者学习网

定义鼠标hover事件(获取鼠标坐标来区分hover的目标),$(canvas).on("mousemove",mouseMove);SJhHTML5中文学习网 - HTML5先行者学习网

效果图:SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

HTML5发展展望 SJhHTML5中文学习网 - HTML5先行者学习网

当前各大浏览器对HTML5支持情况(满分是555分),http://html5test.com/SJhHTML5中文学习网 - HTML5先行者学习网

一句话,无论是桌面还是手机浏览器,谷歌对HTML5的支持最全面。SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

各大公司行动SJhHTML5中文学习网 - HTML5先行者学习网

–谷歌,宣布自动转换Flash广告为HTML5版本;chrome浏览器SJhHTML5中文学习网 - HTML5先行者学习网

–Youtube ,使用HTML 5的播放器;SJhHTML5中文学习网 - HTML5先行者学习网

–Amazon,宣布停用所有Flash广告;SJhHTML5中文学习网 - HTML5先行者学习网

–腾讯,微信朋友圈小游戏、贺卡或邀请函; QQ空间H5游戏&helpp;SJhHTML5中文学习网 - HTML5先行者学习网

–百度,直达号;SJhHTML5中文学习网 - HTML5先行者学习网

–阿里,UC浏览器,手机淘宝H5游戏&helpp;SJhHTML5中文学习网 - HTML5先行者学习网

SJhHTML5中文学习网 - HTML5先行者学习网

以上这篇HTML最新标准HTML5总结(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。SJhHTML5中文学习网 - HTML5先行者学习网

原文地址:http://www.cnblogs.com/chenpi/archive/2016/06/12/5578011.htmlSJhHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助