HTML最新规范HTML5总

形容以面前

   
HTML5下已经非常悠久了,然而由于自家不是标准将前端的,只知发生夫事物,具体概念有点模糊(其实就是是均等多元标准规范啦);因此去年(2015.11.09),专门对HTML5召开了单简单的下结论,今天恰好看到,整理一下置自己之博客,以免遗失。有错误请指正。

  另外,转载请注明链接http://www.cnblogs.com/chenpi/p/5578011.html,虽然情比较简单,但也是花费了重重日子整理的。

什么是HTML5

  简单地游说,HTML5不怕是一模一样雨后春笋用来制定现代富Web内容之有关技术的总称。

  HTML5 ≈ HTML5中坚标准 + CSS 3 + JavaScript; 
其中HTML5和CSS主要负责界面,JavaScript负责逻辑处理;

      发展历史 1

  目的:减少互联网富应用(RIA )对Flash、Silverlight、Java
Applet等之仗,并且提供更多会管用增强网络使用之API。

  如下图为突出的RIA(Rich Internet
Applications)网页,包含有图,视频,游戏等:

      发展历史 2

HTML5腾飞历史

  • 2004年,WHATWG(网页超文本技术工作小组)提出草案Web Applications
    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

HTML 5.0

候选版

征求评价

推荐标准

 

HTML 5.1

第一工作草案

 

最后召集

候选版

HTML 5.2

     

第一工作草案

Tips:

Q:什么是WHATWG?
A:Mozilla基金会和Opera软件公司给2004年6月为W3C提交了同一份立场文件被否决,
Mozilla、Opera和Apple便自立门户成立了WHATWG(网页超文本技术工作小组),同时为提出Web
Applications 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标签来贯彻音视频的播报,如下代码:

<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>

<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>

  如下,为视频和韵律的效能图:

    发展历史 3

Tips:
1、HTML5 <video> 、< audio
>元素拥有方法、属性和事件。可以据此js动态控制视频 &
音频播放暂停等动作;

2、Video 、audio元素允许多单 source
元素。source
元素可以链接不同的文书。浏览器将下第一只可辨识的格式

 

PS:YouTube默认就是采取HTML5播放器,可以登录该官网www.youtube.com翻开源码,如下:

发展历史 4

HTML5 Canvas & SVG

画布Canvas

  HTML5 的 canvas 元素使用 JavaScript
在网页上绘制图像,拥有多种制图路径、矩形、圆形、字符以及长图像的方法。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

  如下,为职能图:

  发展历史 5

可是伸缩矢量图形 (Scalable Vector Graphics)

<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>

发展历史 6

Canvas & SVG 的宽泛应用

行使canvas和SVG可以实现无数聊应用,特别是canvas,如下图例子:

发展历史 7

HTML5 可编制内容 & 拖放

Contenteditable全局属性

  Contenteditable可用于落实网页编辑器,当前众网页编辑器都用这特性实现,如下图:

  发展历史 8

Drag 和 drop

  HTML5
的拖放将会管同用户交互带为任何一个阶段,并以见面针对什么计划用户交互产生主要影响。

  主要的波函数:Ondragstart()、Ondragover()、Ondrop();

  如下为一个代码示例,将一个div拖放到其它一个div里:

<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>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

发展历史 9

HTML5 Web存储

  于讲HTML5 的Web存储之前,先来说说cookie劣势,主要发生以下三触及:

  1. Cookie会被增大在每个HTTP请求中,无形中多了流量。
  2. 出于当HTTP请求中之Cookie是当众传递的,所以安全性成问题。(除非用HTTPS)
  3. Cookie的大小限制以4KB左右。对于复杂的存储需求来说是不敷用之。

  再来探视HTML5 Web存储的优势:

  1. 从不额外的之恳求头部数
  2. 添加的道去装、读取、移除数据
  3. 默认5MB存储限制

  以HTML5吃,Web存储有一定量种植形式:localStorag、sessionStorage,如下:

  • localStorage 

     存储的数尚未工夫范围;

<script type="text/javascript">
localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);
</script>
  • sessionStorage

  当用户关闭浏览器窗口后,数据会为去除 

<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。

  优势:异步执行复杂计算,不影响页面的示

   如下为一个求和的代码示例:

<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
页面传回一截消息。

var i=0;

function timedCount()
{
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

Tips:
1.休能够跨域加载JS
2.worker内代码不克看DOM

HTML 5 服务器发送事件

  传统的网页都是浏览器为服务器“查询”数据,但是不少场所,最实惠的主意是服务器向浏览器“发送”数据。比如,每当收到新的电子邮件,服务器就朝浏览器发送一个“通知”,这如比浏览器按时向服务器询问(polling)更有效率。

  HTML5 服务器发送事件(server-sent
event)允许网页获得来自服务器的更新;

  举个例证,如下,其中服务器端使用Java的Struts
2框架,会为浏览器发送服务器时的时刻数额:

服务端代码:

public class SSE extends ActionSupport {
    private InputStream sseStream;
    public InputStream getSseStream() {
        return sseStream;
    }
    public 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;
    }
}

 <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>

客户端代码:

<p><output id="result">OUTPUT VALUE</output></p>
<script>
(function(global, window, document) {
  'use strict';
  function main() {
    window.addEventListener('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元素的意义图:

  发展历史 10

HTML5 的初的表单元素

  • –datalist
  • –keygen
  • –output

 

  下图为datalist的示例:

  发展历史 11

HTML5 的新的表单属性

–新的 form 属性:

•autocomplete

•Novalidate

–新的 input 属性:

•autocomplete

•autofocus

•form

•height 和 width

•list

•min, max 和 step

•multiple

•pattern (regexp)

•placeholder

•Required

•form overrides (formaction, formenctype, formmethod, formnovalidate,
formtarget)

 

  下表为顺序浏览器对表单属性的支持情况:

Input type

IE

Firefox

Opera

autocomplete

8.0

3.5

9.5

autofocus

No

No

10.0

form

No

No

9.5

form overrides

No

No

10.5

height and width

8.0

3.5

9.5

list

No

No

9.5

min, max and step

No

No

9.5

multiple

No

3.5

No

novalidate

No

No

No

pattern

No

No

9.5

placeholder

No

No

No

required

No

No

9.5

 

HTML5语义化标记

  HTML5
可以采用语义化的竹签代替大量之肤浅的div标签。这种语义化的特征不但荣升了网页的品质及语义,并且减少了先用于CSS或JS调用的class和id属性。

  发展历史 12

更多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函数(执行同样浅):

  1. 加载资源(背景、图片等资源)

Create函数(执行同样糟):

  1. 给鸟一个向下的重力,不深受控制的上自动降
  2. 增补加键盘空格事件,按下空格时转小鸟坐标
  3. 创办墙壁事件,每隔1.5s,出现一排墙壁于左移动(中间随机隔3块)

Update函数(每帧执行):

  1. 认清是否飞出边界
  2. 看清是否碰到墙壁

  效果图如下:

  发展历史 13

柱状图表

根本步骤:

  1. 用canvas画来图
  2. 概念鼠标点击事件(获取鼠标坐标来区别点击的目标),$(canvas).on(“click”,mouseClick); 
  3. 概念鼠标hover事件(获取鼠标坐标来区分hover的目标),$(canvas).on(“mousemove”,mouseMove);

效果图:

  发展历史 14

HTML5前行展望

  当前各大浏览器对HTML5支持情况(满分是555瓜分),http://html5test.com/

  一词话,无论是桌面还是手机浏览器,谷歌对HTML5的支撑不过全面。

  发展历史 15

  各大店行动

–谷歌,宣布活动转换Flash广告也HTML5版;chrome浏览器

–Youtube ,使用HTML 5的播放器;

–Amazon,宣布停用所有Flash广告;

–腾讯,微信朋友围小打、贺卡或邀请函; QQ空间H5游戏…

–百度,直达号;

–阿里,UC浏览器,手机淘宝H5逛戏…

发展历史 16

参考资料

维基百科

https://zh.wikipedia.org/wiki/HTML5

W3C官网,HTML5推介标准

http://www.w3.org/TR/html5/

测试浏览器对HTML5支持情况

http://html5test.com/

HTML5使与源码

http://www.html5tricks.com/

HTML5实例源码

http://html5demos.com

W3School

http://www.w3school.com.cn/

谷歌、百度

发表评论

电子邮件地址不会被公开。 必填项已用*标注