HTML最新標準HTML5小結

時間  2019-11-05
標籤 html 最新 標準 html5 小結 欄目 HTML 简体版
原文   原文鏈接

寫在前面

    HTML5出來已經好久了，然而因爲本人不是專業搞前端的，只知道有這個東西，具體概念有點模糊（其實就是一系列標準規範啦）；所以去年（2015.11.09），專門對HTML5作了個簡單的小結，今天正好看到，整理一下放到個人博客，以避免丟失。有錯誤請指正。javascript

　　另外，轉載請註明連接http://www.cnblogs.com/chenpi/p/5578011.html，雖然內容比較簡單，但也是花了很多時間整理的。html

什麼是HTML5

　　簡單地說，HTML5就是一系列用來制定現代富Web內容的相關技術的總稱。
　　HTML5 ≈ HTML5核心規範 + CSS 3 + JavaScript；  其中HTML5和CSS主要負責界面，JavaScript負責邏輯處理；
     
　　目的：減小互聯網富應用（RIA )對Flash、Silverlight、Java Applet等的依賴，而且提供更多能有效加強網絡應用的API。
　　以下圖爲典型的RIA（Rich Internet Applications）網頁，包含一些圖表，視頻，遊戲等：
     

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 planhtml5

2012java

2013web

2014chrome

2015canvas

2016跨域

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>

　　以下，爲視頻和音頻的效果圖:

   

Tips：
一、HTML5 <video> 、< audio >元素擁有方法、屬性和事件。能夠用js動態控制視頻 & 音頻播放暫停等動做；
二、Video 、audio元素容許多個 source 元素。source 元素能夠連接不一樣的文件。瀏覽器將使用第一個可識別的格式
 
PS：YouTube默認就是使用HTML5播放器，能夠登陸其官網 www.youtube.com查看源碼，以下:

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>

　　以下，爲效果圖：

　　

可伸縮矢量圖形 (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>

Canvas & SVG 的常見應用

使用canvas和SVG能夠實現不少小應用，特別是canvas，以下圖例子：

HTML5 可編輯內容 & 拖放

Contenteditable全局屬性
　　Contenteditable可用於實現網頁編輯器，當前不少網頁編輯器都用這個屬性實現，以下圖：
　　
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>

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元素的效果圖：

　　
HTML5 的新的表單元素
  • –datalist
  • –keygen
  • –output
 
　　下圖爲datalist的示例：
　　
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

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

list

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

novalidate

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 可使用語義化的標籤代替大量的無心義的div標籤。這種語義化的特性不只提高了網頁的質量和語義，而且減小了之前用於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函數（執行一次）：

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

Create函數（執行一次）：

  1. 給鳥一個向下的重力，不受控制的時候自動下落
  2. 添加鍵盤空格事件，按下空格時改變小鳥座標
  3. 建立牆壁事件，每隔1.5s，出現一排牆壁往左移動（中間隨機隔3塊）

Update函數（每幀執行）：

  1. 判斷是否飛出邊界
  2. 判斷是否碰到牆壁

　　效果圖以下：

　　

柱狀圖表

主要步驟：

  1. 利用canvas畫出圖形
  2. 定義鼠標點擊事件（獲取鼠標座標來區分點擊的目標），$(canvas).on("click",mouseClick); 
  3. 定義鼠標hover事件（獲取鼠標座標來區分hover的目標），$(canvas).on("mousemove",mouseMove);

效果圖：

　　

HTML5發展展望

　　當前各大瀏覽器對HTML5支持狀況(滿分是555分)， http://html5test.com/
　　一句話，不管是桌面仍是手機瀏覽器，谷歌對HTML5的支持最全面。
　　
　　各大公司行動
–谷歌，宣佈自動轉換Flash廣告爲HTML5版本；chrome瀏覽器
–Youtube ，使用HTML 5的播放器；
–Amazon，宣佈停用全部Flash廣告；
–騰訊，微信朋友圈小遊戲、賀卡或邀請函； QQ空間H5遊戲…
–百度，直達號；
–阿里，UC瀏覽器，手機淘寶H5遊戲…

參考資料

維基百科

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/

谷歌、百度

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程