標籤：網頁遊戲 多媒體 apt 關閉 get load 視頻流 經曆 相容
一、HTML5概要1.1、為什麼需要HTML5概念：
HTML5 是繼 HTML4.01, XHTML 1.0 和 DOM 2 HTML 後的又一個重要版本，
旨在消除富 Internet 程式（RIA）對 Flash， Silverlight， JavaFX 一類瀏覽器外掛程式的依賴。
1991年HTML1.0標準出現
1997年HTML4.0發布，4.0標準下的瀏覽器局限性
Flash (安全與穩定堪憂、耗電、觸摸、不開放)
Silverlight
JavaApplet
2008年HTML5出現， W3C2014年10月29日，全球資訊網聯盟宣布，經過接近8年的艱苦努力，該標準規範終於制定完成。
HTML5增強了瀏覽器的原生功能，符合HTML5規範的瀏覽器功能將更加強大，減少了Web應用對外掛程式的依賴，
讓使用者體驗更好，讓開發更加方便，另外W3C從推出HTML4.0到5.0之間共經曆了17年，HTML的變化很小，這並不符合一個好產品的演化規則。
1.2、HTML5與HTMl的區別1)、在文件類型聲明上
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
html5:
<!doctype html>
2）、在文檔聲明上：
html有很長的一段代碼，並且很難記住這段代碼，而html5卻不同，只有簡簡單單的聲明，這也方便人們的記憶。
3）、在結構語義上
html: 沒有體現結構語義化的標籤，通常都是這樣來命名的<div id="header"></div>，這樣表示網站的頭部。
html5: 在語義上卻有很大的優勢。提供了一些新的標籤，比如:<header><article><footer>。
1.3、HTML5現狀及瀏覽器支援
支援Html5的瀏覽器包括Firefox（Firefox瀏覽器），IE9及其更高版本，Chrome（Google瀏覽器），Safari，Opera；
1.4、HTML5特性1、語義特性（Class：Semantic）
HTML5會賦予網頁更好的意義和結構。更加豐富的標籤將隨著對RDFa、微資料、微格式、等方面的支援，構建對程式、對使用者更有價值的資料驅動Web。
2、本機存放區特性（Class: OFFLINE & STORAGE）
基於HTML5開發的網頁APP擁有更短的啟動時間，更快的連網速度，這全得益於HTML5 APP Cache、本機存放區功能、Indexed DB（HTML5本機存放區最重要的技術之一）和API說明文檔。
3、裝置相容特性 (Class: DEVICE ACCESS)
從Geolocation功能的API文檔公開以來，HTML5為網頁應用開發人員提供了更多功能上的最佳化選擇，帶來了更多體驗功能。HTML5提供了前所未有的資料與應用接入開放介面。使外部應用可直接與瀏覽器內部的資料直接相連，譬如：視頻影音可直接與microphones及網路攝影機相聯。
4、串連特性（Class: CONNECTIVITY）
更有效串連效率，使得基於頁面的即時聊天，更快速的網頁遊戲體驗，更最佳化的線上交流得到實現。HTML5擁有更有效伺服器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特效能協助我們實現伺服器將資料“推送”到用戶端的功能。
5、網頁多媒體特性(Class: MULTIMEDIA)
支援網頁端的Audio、Video等多媒體功能，與網站內建的APPS、網路攝影機、影音功能相得益彰。
6、三維、圖形、特效特性（Class: 3D, Graphics & Effects）
基於SVG、Canvas、WebGL、CSS3的3D功能，使用者會驚歎於在瀏覽器中，所呈現的驚人視覺效果。
7、效能、整合特性（Class: Performance & Integration）
沒有使用者會永遠等待你的Loading——HTML5會通過XML Http Request 2等技術，解決以前的跨域問題，幫Web應用和網站在多樣化的環境中更快速工作。
8、CSS3特性(Class: CSS3)
在不犧牲效能和語義結構的前提下，CSS3中提供了更多的風格、更強的效果。此外，較以前的Web排版，Web的開放字型格式（WOFF）也提供了更高的靈活性和控制性。
1、提高可用性和改進使用者的友好體驗；
2、有幾個新標籤，有助於開發人員定義重要內容；
3、可給網站帶來更多多媒體元素(視頻和音頻)；
4、可很好的替代FLASH和Silverlight；
5、當涉及網站抓取和索引時，SEO很友好；
6、可大量應用於行動裝置 App程式和遊戲；
7、可移植性好。
1.5.2、缺點1.6、HTML5效果展示1.7、HTML5學習與開發工具二、HTML5新增標籤
2.1、廢棄的標籤
以下的 HTML 4.01 元素在HTML5中已經被刪除:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
2.2、新增的標籤
<article>標籤定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。
HTML5:<article></article>
HTML4:<div></div>
<aside>標籤定義：側邊 article 以外的內容。aside 的內容應該與 article 的內容相關。
HTML5:<aside>Aside 的內容是獨立的內容，但應與文檔內容相關。</aside>
HTML4:<div>Aside 的內容是獨立的內容，但應與文檔內容相關。</div>
<audio> 標籤定義聲音，比如音樂或其他音頻流。
HTML5:<audio src="someaudio.wav">您的瀏覽器不支援 audio 標籤。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>
<canvas> 標籤定義圖形，比表和其他映像。這個 HTML 元素是為了用戶端向量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給用戶端 JavaScript 以使指令碼能夠把想繪製的東西都繪製到一塊畫布上。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>
<command> 標籤定義命令按鈕，比如選項按鈕、複選框或按鈕。
HTML5: <command onclick=cut()" label="cut">
HTML4: none
<datalist> 標籤定義可選資料的列表。與 input 元素配合使用，就可以製作出輸入值的下拉式清單。
HTML5: <datalist></datalist>
HTML4: see combobox.
<details> 標籤定義元素的細節，使用者可進行查看，或通過點擊進行隱藏。與 <legend> 一起使用，來製作 detail 的標題。該標題對使用者是可見的，當在其上點擊時可開啟或關閉 detail。
HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl>
<embed> 標籤定義嵌入的內容，比如外掛程式。
HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object>
<figcaption> 標籤定義 figure 元素的標題。”figcaption” 元素應該被置於 “figure” 元素的第一個或最後一個子項目的位置。
HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none
<figure> 標籤用於對元素進行組合。使用 <figcaption> 元素為元素組添加標題。
HTML5: <figure><figcaption>PRC</figcaption><p>The People‘s Republic of China was born in 1949...</p></figure>
HTML4: <dl><h1>PRC</h1><p>The People‘s Republic of China was born in 1949...</p></dl>
<footer> 標籤定義 section 或 document 的頁尾。典型地，它會包含創作者的姓名、文檔的創作日期以及/或者聯絡資訊。
HTML5: <footer></footer>
HTML4: <div></div>
<header> 標籤定義 section 或 document 的頁首。
HTML5: <header></header>
HTML4: <div></div>
<hgroup> 標籤用於對網頁或區段（section）的標題進行組合。
HTML5: <hgroup></hgroup>
HTML4: <div></div>
<keygen> 標籤定義產生密鑰。
HTML5: <keygen>
HTML4: none
<mark>主要用來在視覺上向使用者呈現那些需要突出的文字。<mark>標籤的一個比較典型的應用就是在搜尋結果中向使用者高亮顯示搜尋關鍵詞。
HTML5: <mark></mark>
HTML4: <span></span>
<meter> 標籤定義度量衡。僅用於已知最大和最小值的度量。必須定義度量的範圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。
HTML5: <meter></meter>
HTML4: none
<nav> 標籤定義導航連結的部分。
HTML5: <nav></nav>
HTML4:<ul></ul>
<output> 標籤定義不同類型的輸出，比如指令碼的輸出。
HTML5: <output></output>
HTML4: <span></span>
<progress> 標籤運行中的進程。可以使用 <progress> 標籤來顯示 JavaScript 中耗費時間的函數的進程。
HTML5: <progress></progress>
HTML4: none
<rp> 標籤在 ruby 注釋中使用，以定義不支援 ruby 元素的瀏覽器所顯示的內容。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none
<rt> 標籤定義字元（中文注音或字元）的解釋或發音。
HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>
HTML4: none
<ruby> 標籤定義 ruby 注釋（中文注音或字元）。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none
<section> 標籤定義文檔中的節（section、區段）。比如章節、頁首、頁尾或文檔中的其他部分。
HTML5: <section></section>
HTML4: <div></div>
<source> 標籤為媒介元素（比如 <video> 和 <audio>）定義媒介資源。
HTML5: <source>
HTML4: <param>
<summary> 標籤包含 details 元素的標題，”details” 元素用於描述有關文檔或文檔片段的詳細資料。”summary” 元素應該是 “details” 元素的第一個子項目。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none
<time> 標籤定義日期或時間，或者兩者。
HTML5: <time></time>
HTML4: <span></span>
<video> 標籤定義視頻，比如電影片段或其他視頻流。
HTML5: <video src="movie.ogg" controls="controls">您的瀏覽器不支援 video 標籤。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>
HTML5學習總結——HTML5入門與新增標籤
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
