HTML最新標準HTML5總結-H5教程-PHP中文網

首頁

web前端

H5教程

HTML最新標準HTML5總結

黄舟

Feb 24, 2017 pm 02:18 PM

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

先來個目錄，如下：

•什麼是HTML5

•HTML5發展歷史

•HTML5詳細介紹

•視訊/音訊、畫布& SVG 、可編輯內容& 拖曳、Web儲存、Web Worker 、伺服器傳送事件、表單增強功能、語意化標記、更多HTML5標準

#• HTML5實例分析

•飛翔的小鳥

•長條圖

#•HTML5發展展望

•參考資源

# #什麼是HTML5
簡單地說，HTML5就是一系列用來制定現代富Web內容的相關技術的總稱。

HTML5 ≈ HTML5核心規格+ CSS 3 + JavaScript; 其中HTML5和CSS主要負責介面，JavaScript負責邏輯處理；

HTML最新標準HTML5總結
目的：減少網路豐富應用（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標準演進歷程：

#2012 plan2015HTML 5.0##徵求評價推薦標準第一個工作草稿#最後召喚


		# 2012	2013	#2014
#2016			候選版
	HTML 5.1

######################################## ####候選版############推薦標準###################HTML 5.2########## #############################第一個工作草稿################# ##########

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>

如下，為視訊和音訊的效果圖：

HTML最新標準HTML5總結

Tips：
#1、HTML5 2、Video 、audio元素允許多個 source 元素。 source 元素可以連結不同的檔案。瀏覽器將使用第一個可識別的格式

PS：YouTube預設就是使用HTML5播放器，可以登入其官網www.youtube.com查看源碼，如下:

HTML最新標準HTML5總結

HTML5 Canvas & SVG

#畫布Canvas
HTML5 的canvas 元素使用JavaScript 在網頁上繪製圖像，擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。

XML/HTML Code複製內容到剪貼簿

   <canvas id="myCanvas" width="200"    style="max-width:90%" 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>

如下，為效果圖：

HTML最新標準HTML5總結

可伸縮向量圖(Scalable Vector Graphics)
XML/HTML Code複製內容到剪貼簿

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"    style="max-width:90%">  
       <polygon points="100,10 40,180 190,60 10,60 160,180"  
       style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />  
    </svg>

HTML最新標準HTML5總結

#Canvas & SVG 的常見應用
使用canvas和SVG可以實作很多小應用，特別是canvas，如下圖範例：

HTML5 可編輯內容& 拖放

Contenteditable全域屬性
Contenteditable可用來實作網頁編輯器，目前很多網頁編輯器都用這個屬性實現，如下圖：

HTML最新標準HTML5總結

Drag 與drop
#HTML5 的拖曳將會把與使用者互動帶往另一個等級，並將會對如何設計使用者互動產生重大影響。

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

如下為一個程式碼範例，將一個p拖放到另一個p裡：

JavaScript Code複製內容到剪貼簿

    <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="/static/imghwm/default1.png"  data-src="/i/w3school_logo_black.gif"  class="lazy"   draggable="true" ondragstart="drag(event)" id="drag1" / alt="HTML最新標準HTML5總結" >   
        </p>   
        <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>

HTML最新標準HTML5總結

#HTML5 Web儲存
在講HTML5 的Web儲存之前，先來說說cookie劣勢，主要有以下三點：

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

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

Cookie的大小限制在4KB左右。對於複雜的儲存需求來說是不夠用的。

再來看看HTML5 Web存儲的優點：

沒有額外的請求頭部資料
豐富的方法去設定、讀取、移除資料
預設5MB存儲限制
在HTML5中，Web儲存有兩種形式：localStorag、sessionStorage，如下：

localStorage
儲存的資料沒有時間限制；

JavaScript Code複製內容到剪貼簿

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

sessionStorage
當使用者關閉瀏覽器視窗後，資料會被刪除

############################################################################################################################################################################################################# #JavaScript Code複製內容到剪貼簿###### ###

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

优势：异步执行复杂计算，不影响页面的展示

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

JavaScript Code复制内容到剪贴板

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

JavaScript Code复制内容到剪贴板

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

Tips:

1.不能跨域加载JS

2.worker内代码不能访问DOM

HTML 5 服务器发送事件

传统的网页都是浏览器向服务器“查询”数据，但是很多场合，最有效的方式是服务器向浏览器“发送”数据。比如，每当收到新的电子邮件，服务器就向浏览器发送一个“通知”，这要比浏览器按时向服务器查询（polpng）更有效率。

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新；

举个例子，如下，其中服务器端使用Java的Struts 2框架，会向浏览器发送服务器最新的时间数据：

服务端代码：

JavaScript Code复制内容到剪贴板

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

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

 <p><output id="result">OUTPUT VALUE</output></p>   
    <script>   
    (function(global, window, document) {   
      &#39;use strict&#39;;   
      function main() {   
        window.addEventpstener(&#39;DOMContentLoaded&#39;, contentLoaded);   
      }   
      function contentLoaded() {   
        var result = document.getElementById(&#39;result&#39;);   
        var stream = new EventSource(&#39;handleSSE.action&#39;);   
        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元素的效果图：

下图为各个input元素的效果图：

HTML最新標準HTML5總結

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)

下表为各个浏览器对表单属性的支持情况：

##否否10.0#3.0形式##9.5否#4.0novapdate佔位符#否

輸入類型	IE	#Firefox	#Opera	Chrome	#Safari
自動完成	8.0	3.5	9.5	3.0	4.0
#自動對焦				##4.0
否
			##表格覆寫	否	否
10.5	否	否	#高度與寬度	8.0	3.5
#9.5	3.0	# #4.0	pst		#否
9.5	##最小、最大和步長	否	##9.5	3.0
#多	否	3.5	#否		# 3.0
	#novapdate			＃＃不不不不＃＃＃	#模式
	##否	9.5	#3.0
					##'

###3.0### ##########3.0################# #必填############否######## ####否#############9.5######### ####3.0############否###### #############

HTML5語意化標記

HTML5 可以使用語意化的標籤來取代大量的無意義的p標籤。這種語意化的特性不僅提升了網頁的品質和語意，也減少了先前用於CSS或JS呼叫的class和id屬性。

HTML最新標準HTML5總結

更多HTML 5標準

HTML5推薦標準（W3C官網推薦標準）

–http: //www.php.cn/

或參考w3school

HTML5 完整的新標籤

–http://www.php.cn /

HTML 全域屬性

–http://www.php.cn/

全域事件屬性

–http://www.php.cn/

HTML5實例分析飛翔的小鳥

基於Phaser（開源的HTML5 2D遊戲開發框架），主要需要編寫以下三個函數：

Preload函數（執行一次）：

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

Create函數（執行一次）：

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

#新增鍵盤空格事件，按下空格時改變小鳥座標

建立牆壁事件，每隔1.5s，出現一排牆壁往左移動（中間隨機隔3塊）

#Update函數（每幀執行）：

判斷是否飛出邊界

判斷是否碰到牆壁

效果圖如下：

HTML最新標準HTML5總結

#主要步驟：
利用canvas畫出圖形

定義滑鼠點擊事件（取得滑鼠座標來區分點擊的目標），$(canvas).on("cpck",mouseCpck);

定義滑鼠hover事件（取得滑鼠座標來區分hover的目標），$(canvas).on("mousemove",mouseMove);

######

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼示例：實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能，極大地增強了前端開發的能力。 1.多媒體支持：通過和元素嵌入媒體，無需插件。 2.畫布（Canvas）：使用元素動態渲染2D圖形和動畫。 3.本地存儲：通過localStorage和sessionStorage實現數據持久化存儲，提升用戶體驗。

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。