HTML最新標(biāo)準(zhǔn)HTML5總結(jié)(必看)

熱門標(biāo)簽：飛亞外呼系統(tǒng) 貸款電銷人工和機(jī)器人哪個好 百應(yīng)電銷機(jī)器人產(chǎn)業(yè) 電話機(jī)器人如何 西寧智能外呼系統(tǒng)加盟 電視購物電銷外呼系統(tǒng) 杭州營銷電銷機(jī)器人供應(yīng)商 高德地圖標(biāo)注賓館位置 聯(lián)通400電話申請

HTML5出來已經(jīng)很久了，然而由于本人不是搞前端的，只知道有這個東西，具體概念有點(diǎn)模糊（其實(shí)就是一系列標(biāo)準(zhǔn)規(guī)范啦）；因此去年，專門對HTML5做了個簡單的小結(jié)，今天正好看到，整理一下放到我的博客，以免丟失。有錯誤請指正，我是前端菜鳥。

先來個目錄，如下：

•什么是HTML5

•HTML5發(fā)展歷史

•HTML5詳細(xì)介紹

•視頻/音頻 、畫布 & SVG 、可編輯內(nèi)容 & 拖放、Web存儲、Web Worker 、服務(wù)器發(fā)送事件、表單增強(qiáng)功能、語義化標(biāo)記、更多HTML5標(biāo)準(zhǔn)

•HTML5實(shí)例分析

•飛翔的小鳥

•柱狀圖

•HTML5發(fā)展展望

•參考資源

什么是HTML5

簡單地說，HTML5就是一系列用來制定現(xiàn)代富Web內(nèi)容的相關(guān)技術(shù)的總稱。

HTML5 ≈ HTML5核心規(guī)范 + CSS 3 + JavaScript；  其中HTML5和CSS主要負(fù)責(zé)界面，JavaScript負(fù)責(zé)邏輯處理；

     

目的：減少互聯(lián)網(wǎng)富應(yīng)用（RIA )對Flash、Silverpght、Java Applet等的依賴，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的API。

如下圖為典型的RIA（Rich Internet Apppcations）網(wǎng)頁，包含一些圖表，視頻，游戲等：

     

HTML5發(fā)展歷史

2004年，WHATWG（網(wǎng)頁超文本技術(shù)工作小組）提出草案Web Apppcations 1.0，即HTML5的前身；

2007年，W3C同意采納HTML5作為標(biāo)準(zhǔn)，并成立了新的HTML工作團(tuán)隊(duì)；

2014年10月28日，W3C正式發(fā)布HTML5.0推薦標(biāo)準(zhǔn)；

2016年底前，計(jì)劃發(fā)布HTML 5.1；

未來，待HTML5.1公布后，工作組會重復(fù)HTML5.1步驟再搞一個新的HTML5.2，繼續(xù)完善、豐富功能。

如下表格為HTML 5標(biāo)準(zhǔn)演進(jìn)歷程：

2012 plan	2012	2013	2014	2015	2016
HTML 5.0	候選版	征求評價	推薦標(biāo)準(zhǔn)
HTML 5.1	第一工作草案		最后召集	候選版	推薦標(biāo)準(zhǔn)
HTML 5.2				第一工作草案

Tips：

Q：什么是WHATWG？

A：Mozilla基金會與Opera軟件公司于2004年6月向W3C提交了一份立場文件遭否決， Mozilla、Opera和Apple便自立門戶成立了WHATWG（網(wǎng)頁超文本技術(shù)工作小組），同時也提出Web Apppcations 1.0。

Q：HTML5.0與HTML5.1的區(qū)別？

A：5.1是5.0的超集，5.0中只包含了穩(wěn)定特性，5.1中包含了5.0中省略掉的不穩(wěn)定特性和其他新特性；目的：為了盡快及時完成HTML5，W3C舍棄一些不穩(wěn)定、有爭議的元素，等到后續(xù)的5.1版本再考慮。

HTML5詳細(xì)介紹HTML5 視頻 & 音頻

 直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁上顯示視頻、音頻的標(biāo)準(zhǔn)，大多數(shù)通過插件（比如 Flash）來顯示的；

但是，有了HTML5，我們可以不依賴任何插件，簡單的使用video和audio標(biāo)簽來實(shí)現(xiàn)音視頻的播放，如下代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<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復(fù)制內(nèi)容到剪貼板

<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 >元素?fù)碛蟹椒?、屬性和事件?？梢杂胘s動態(tài)控制視頻 & 音頻播放暫停等動作；
2、Video 、audio元素允許多個 source 元素。source 元素可以鏈接不同的文件。瀏覽器將使用第一個可識別的格式

 

PS：YouTube默認(rèn)就是使用HTML5播放器，可以登錄其官網(wǎng)www.youtube.com查看源碼，如下:

HTML5 Canvas & SVG

畫布Canvas

HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<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復(fù)制內(nèi)容到剪貼板

<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 的常見應(yīng)用

使用canvas和SVG可以實(shí)現(xiàn)很多小應(yīng)用，特別是canvas，如下圖例子：

HTML5 可編輯內(nèi)容 & 拖放

Contenteditable全局屬性

Contenteditable可用于實(shí)現(xiàn)網(wǎng)頁編輯器，當(dāng)前很多網(wǎng)頁編輯器都用這個屬性實(shí)現(xiàn)，如下圖：

Drag 和 drop

HTML5 的拖放將會把與用戶交互帶向另一個等級，并將會對如何設(shè)計(jì)用戶交互產(chǎn)生重大影響。

主要的事件函數(shù)：Ondragstart()、Ondragover()、Ondrop()；

如下為一個代碼示例，將一個p拖放到另一個p里：

JavaScript Code復(fù)制內(nèi)容到剪貼板

<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劣勢，主要有以下三點(diǎn)：

Cookie會被附加在每個HTTP請求中，無形中增加了流量。

由于在HTTP請求中的Cookie是明文傳遞的，所以安全性成問題。（除非用HTTPS）

Cookie的大小限制在4KB左右。對于復(fù)雜的存儲需求來說是不夠用的。

再來看看HTML5 Web存儲的優(yōu)勢：

沒有額外的的請求頭部數(shù)據(jù)

豐富的方法去設(shè)置、讀取、移除數(shù)據(jù)

默認(rèn)5MB存儲限制

在HTML5中，Web存儲有兩種形式：localStorag、sessionStorage，如下：

localStorage 

     存儲的數(shù)據(jù)沒有時間限制；

JavaScript Code復(fù)制內(nèi)容到剪貼板

<script type="text/javascript">   

localStorage.lastname="Smith";   

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

</script>  

sessionStorage

當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會被刪除 

JavaScript Code復(fù)制內(nèi)容到剪貼板

<script type="text/javascript">   

sessionStorage.lastname="Smith";   

document.write(sessionStorage.lastname);   

</script>  

Tips:
Cookie是不可或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生。

HTML5 Web Workers

web worker 是運(yùn)行在后臺的 JavaScript，獨(dú)立于其他腳本，不會影響頁面的性能（JS多線程工作解決方案）。

Web Worker的基本原理就是在當(dāng)前javascript的主線程中，使用Worker類加載一個javascript文件來開辟一個新的線程，起到互不阻塞執(zhí)行的效果，并且提供主線程和新線程之間數(shù)據(jù)交換的接口：postMessage，onmessage。

優(yōu)勢：異步執(zhí)行復(fù)雜計(jì)算，不影響頁面的展示

 如下為一個求和的代碼示例：

JavaScript Code復(fù)制內(nèi)容到剪貼板

<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 頁面?zhèn)骰匾欢蜗ⅰ?/p>

JavaScript Code復(fù)制內(nèi)容到剪貼板

var i=0;   

  

function timedCount()   

{   

    i=i+1;   

    postMessage(i);   

    setTimeout("timedCount()",500);   

}   

  

timedCount();  

Tips:

1.不能跨域加載JS

2.worker內(nèi)代碼不能訪問DOM

HTML 5 服務(wù)器發(fā)送事件

傳統(tǒng)的網(wǎng)頁都是瀏覽器向服務(wù)器“查詢”數(shù)據(jù)，但是很多場合，最有效的方式是服務(wù)器向?yàn)g覽器“發(fā)送”數(shù)據(jù)。比如，每當(dāng)收到新的電子郵件，服務(wù)器就向?yàn)g覽器發(fā)送一個“通知”，這要比瀏覽器按時向服務(wù)器查詢（polpng）更有效率。

HTML5 服務(wù)器發(fā)送事件（server-sent event）允許網(wǎng)頁獲得來自服務(wù)器的更新；

舉個例子，如下，其中服務(wù)器端使用Java的Struts 2框架，會向?yàn)g覽器發(fā)送服務(wù)器最新的時間數(shù)據(jù)：

服務(wù)端代碼：

JavaScript Code復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

<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復(fù)制內(nèi)容到剪貼板

<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 表單增強(qiáng)功能

新的 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語義化標(biāo)記

HTML5 可以使用語義化的標(biāo)簽代替大量的無意義的p標(biāo)簽。這種語義化的特性不僅提升了網(wǎng)頁的質(zhì)量和語義，并且減少了以前用于CSS或JS調(diào)用的class和id屬性。

更多HTML 5標(biāo)準(zhǔn)

HTML5推薦標(biāo)準(zhǔn)（W3C官網(wǎng)推薦標(biāo)準(zhǔn)）

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

或者參考w3school

HTML5 完整的新標(biāo)簽

–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實(shí)例分析飛翔的小鳥

基于Phaser（開源的HTML5 2D游戲開發(fā)框架），主要需要編寫以下三個函數(shù)：

Preload函數(shù)（執(zhí)行一次）：

加載資源（背景、圖片等資源）

Create函數(shù)（執(zhí)行一次）：

給鳥一個向下的重力，不受控制的時候自動下落

添加鍵盤空格事件，按下空格時改變小鳥坐標(biāo)

創(chuàng)建墻壁事件，每隔1.5s，出現(xiàn)一排墻壁往左移動（中間隨機(jī)隔3塊）

Update函數(shù)（每幀執(zhí)行）：

判斷是否飛出邊界

判斷是否碰到墻壁

效果圖如下：

柱狀圖表

主要步驟：

利用canvas畫出圖形

定義鼠標(biāo)點(diǎn)擊事件（獲取鼠標(biāo)坐標(biāo)來區(qū)分點(diǎn)擊的目標(biāo)），$(canvas).on("cpck",mouseCpck); 

定義鼠標(biāo)hover事件（獲取鼠標(biāo)坐標(biāo)來區(qū)分hover的目標(biāo)），$(canvas).on("mousemove",mouseMove);

效果圖：

HTML5發(fā)展展望

當(dāng)前各大瀏覽器對HTML5支持情況(滿分是555分)，http://html5test.com/

一句話，無論是桌面還是手機(jī)瀏覽器，谷歌對HTML5的支持最全面。

各大公司行動

–谷歌，宣布自動轉(zhuǎn)換Flash廣告為HTML5版本；chrome瀏覽器

–Youtube ，使用HTML 5的播放器；

–Amazon，宣布停用所有Flash廣告；

–騰訊，微信朋友圈小游戲、賀卡或邀請函； QQ空間H5游戲&helpp;

–百度，直達(dá)號；

–阿里，UC瀏覽器，手機(jī)淘寶H5游戲&helpp;

以上這篇HTML最新標(biāo)準(zhǔn)HTML5總結(jié)(必看)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/chenpi/archive/2016/06/12/5578011.html