總聽到很多人說H5,現在H5很火,到底H5是什么,以下發表個人對H5的理解。
HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標准。
HTML 的上一個版本誕生於 1999 年。自從那以后,Web 世界已經經歷了巨變。
HTML5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 HTML5 支持。
設計目的
HTML5的設計目的是為了在移動設備上支持多媒體。新的語法特征被引進以支持這一點,如video、audio和canvas 標記。
HTML5還引進了新的功能,可以真正改變用戶與文檔的交互方式,包括:
- · 新的解析規則增強了靈活性
- · 新屬性
- · 淘汰過時的或冗余的屬性
- · 一個HTML5文檔到另一個文檔間的拖放功能
- · 離線編輯
- · 信息傳遞的增強
- · 詳細的解析規則
- · 多用途互聯網郵件擴展(MIME)和協議處理程序注冊
- · 在SQL數據庫中存儲數據的通用標准(Web SQL)
HTML5在2007年被萬維網聯盟(W3C)新的工作組采用。這個工作組在2008年1月發布了HTML 5的首個公開草案。眼下,HTML5處於“呼吁審查”狀態,W3C預期它將在2014年年底達到其最終狀態。
特性:
語義特性(Class:Semantic)
本地存儲特性(Class: OFFLINE & STORAGE)
基於HTML5開發的網頁
APP擁有更短的啟動時間,更快的聯網速度,這些全得益於HTML5 APP Cache,以及本地存儲功能。Indexed DB(html5本地存儲最重要的技術之一)和
API說明文檔。
設備兼容特性 (Class: DEVICE ACCESS)
從
Geolocation功能的API文檔公開以來,HTML5為網頁應用開發者們提供了更多功能上的優化選擇,帶來了更多體驗功能的優勢。HTML5提供了前所未有的數據與
應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連,例如視頻影音可直接與microphones及攝像頭相聯。
連接特性(Class: CONNECTIVITY)
更有效的連接工作效率,使得基於頁面的實時聊天,更快速的網頁游戲體驗,更優化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術,Server-Sent Event和WebSockets就是其中的兩個特性,這兩個特性能夠幫助我們實現服務器將數據“推送”到客戶端的功能。
網頁多媒體特性(Class: MULTIMEDIA)
支持網頁端的Audio、Video等多媒體功能, 與網站自帶的APPS,攝像頭,影音功能相得益彰。
三維、圖形及特效特性(Class: 3D, Graphics & Effects)
基於SVG、Canvas、WebGL及CSS3的3D功能,用戶會驚嘆於在瀏覽器中,所呈現的驚人視覺效果。
性能與集成特性(Class: Performance & Integration)
沒有用戶會永遠等待你的Loading——HTML5會通過
XMLHttpRequest2等技術,解決以前的跨域等問題,幫助您的Web應用和網站在多樣化的環境中更快速的工作。
CSS3特性(Class: CSS3)
新元素
為了更好地處理今天的互聯網應用,HTML5添加了很多新元素及功能,比如: 圖形的繪制,多媒體內容,更好的頁面結構,更好的形式 處理,和幾個api拖放元素,定位,包括網頁 應用程序緩存,存儲,網絡工作者,等。
canvas
標簽
|
描述
|
---|---|
<canvas>
|
標簽定義圖形,比如圖表和其他圖像。該標簽基於 JavaScript 的繪圖 API
|
多媒體
標簽
|
描述
|
---|---|
<audio>
|
定義音頻內容
|
<video>
|
定義視頻(video 或者 movie)
|
<source>
|
定義多媒體資源 <video> 和 <audio>
|
<embed>
|
定義嵌入的內容,比如插件。
|
<track>
|
為諸如 <video> 和 <audio> 元素之類的媒介規定外部文本軌道。
|
表單
標簽
|
描述
|
---|---|
<datalist>
|
定義選項列表。請與 input 元素配合使用該元素,來定義 input 可能的值。
|
<keygen>
|
規定用於表單的密鑰對生成器字段。
|
<output>
|
定義不同類型的輸出,比如腳本的輸出。
|
語義和結構
HTML5提供了新的元素來創建更好的頁面結構:
標簽
|
描述
|
---|---|
<article>
|
定義頁面的側邊欄內容
|
<aside>
|
定義頁面內容之外的內容。
|
<bdi>
|
允許您設置一段文本,使其脫離其父元素的文本方向設置。
|
<command>
|
定義命令按鈕,比如單選按鈕、復選框或按鈕
|
<details>
|
用於描述文檔或文檔某個部分的細節
|
<dialog>
|
定義對話框,比如提示框
|
<summary>
|
標簽包含 details 元素的標題
|
<figure>
|
規定獨立的流內容(圖像、圖表、照片、代碼等等)。
|
<figcaption>
|
定義 <figure> 元素的標題
|
<footer>
|
定義 section 或 document 的頁腳。
|
<header>
|
定義了文檔的頭部區域
|
<mark>
|
定義帶有記號的文本。
|
<meter>
|
定義度量衡。僅用於已知最大和最小值的度量。
|
<nav>
|
定義運行中的進度(進程)。
|
<progress>
|
定義任何類型的任務的進度。
|
<ruby>
|
定義 ruby 注釋(中文注音或字符)。
|
<rt>
|
定義字符(中文注音或字符)的解釋或發音。
|
<rp>
|
在 ruby 注釋中使用,定義不支持 ruby 元素的瀏覽器所顯示的內容。
|
<section>
|
定義文檔中的節(section、區段)。
|
<time>
|
定義日期或時間。
|
<wbr>
|
規定在文本中的何處適合添加換行符。
|
已移除元素
以下的 HTML 4.01 元素在HTML5中已經被刪除:
-
<acronym>
-
<applet>
-
<basefont>
-
<big>
-
<center>
-
<dir>
-
<font>
-
<frame>
-
<frameset>
-
<noframes>
-
<strike>
重要標記
<video>標記
定義和用法:
</video> 標簽定義視頻,比如電影片段或其他
視頻流。
<audio> 標記
定義和用法
</audio> 標簽定義聲音,比如音樂或其他
音頻流。
實例:
一段簡單的HTML5 音頻
<audio src="">
您的瀏覽器不支持 audio 標簽。
</audio>
<canvas> 標記
定義和用法:
<canvas> 標簽定義圖形,比如圖表和其他圖像。
HTML5 的 canvas 元素使用JavaScript 在網頁上繪制圖像。
畫布是一個矩形區域,您可以控制其每一像素。
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
實例:
通過 canvas 元素來顯示一個紅色的矩形:
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
程序接口
1. 用於即時2D繪圖的
Canvas標簽
2. 定時媒體回放
3. 離線數據庫存儲
4.
文檔編輯
5. 拖拽控制
6. 瀏覽歷史管理
元素變化
新的解析順序新的元素:section, video, progress, nav, meter, time, aside, canvasinput
元素的新屬性:日期和時間,email, url。
新的通用屬性:ping, charset, async
全域屬性:id, tabindex, repeat。
移除元素:center, font, strike。
控件
就是Html標注的屬性里加上runat="server"所構成的控件,至於Html標注和Html控件之間的區別很明顯,Html控件是運行於服務器端,Html標注是運行於客戶端。
基本Html控件有:HtmlTexArea\HtmlTable\HtmlImage\HtmlButton\HtmlSelect\HtmlForm\HtmlInput。
自定義的Html控件是根據自己的需求定義。當自主開發效率低,可以從技術社區、源碼網站下載需要的控件。比如,需要插入table, image, links 等標簽。不必自己開發,可以使用:ComponentOne Wijmo Editor等。
免費HTML5圖表庫——.Net圖表控件Chart FX,深受大家喜愛,相信大家已經非常熟悉了。而且還從Chart FX的開發商SoftwareFX獲得一個激動人心的消息:該公司已推出一套為HTML5,jQuery和JavaScript開發者設計的圖表庫——jChartFX,而且jChartFX是免費的!
圖表庫
.Net圖表控件Chart FX相信大家已經非常熟悉了。Chart FX的開發商SoftwareFX推出的一套為HTML5、jQuery和JavaScript開發者設計的免費HTML5圖表庫——jChartFX!
jChartFX亮點:
-
jChartFX充分利用了HTML5,CSS和SVG,讓您能夠在瀏覽器提供美觀優越的圖表和更豐富的最終用戶體驗。
-
jChartFX擁有很多令人振奮的功能,它在無插件純JavaScript的瀏覽器上運行,這意味着在提高了網站安全性和速度的同時,最大程度的減少了網站服務器的負荷。
-
jChartFX還能夠自動整合到jQuery UI ThemeRoller,自動讀取並解釋jQuery的主題和CSS文件,能夠快速適應您的頁面布局和設計,無需一行代碼。
-
jChartFX支持JSON,JSON能夠幫助您實現,任何數據源中的數據都可以展現到圖表中。
-
jChartFX還支持超過40種的2D、3D圖表類型,免費的圖表控件中支持如此之多的圖表展示類型實屬難得。
標簽
注:在下面表格中4: 指在HTML 4.01 中定義了該元素 5: 指在HTML 5 中定義了該元素
標簽
|
描述
|
||
---|---|---|---|
<!--...-->
|
定義注釋
|
4
|
5
|
<
!DOCTYPE>
|
定義文檔類型
|
4
|
5
|
<a>
|
定義超鏈接
|
4
|
5
|
<abbr>
|
定義縮寫
|
4
|
5
|
<
acronym>
|
HTML 5 中不支持
|
4
|
|
<address>
|
定義地址元素
|
4
|
5
|
<applet>
|
定義 applet(HTML 5 中不支持)
|
4
|
|
<area>
|
定義圖像映射中的區域
|
4
|
5
|
<article>
|
定義 article
|
5
|
|
<aside>
|
定義頁面內容之外的內容
|
5
|
|
<audio>
|
定義聲音內容
|
5
|
|
<b>
|
定義粗體文本
|
4
|
5
|
<base>
|
定義頁面中所有鏈接的基准URL
|
4
|
5
|
<
basefont>
|
HTML 5 中不支持,請使用CSS 代替
|
4
|
|
<bdo>
|
定義文本顯示的方向
|
4
|
5
|
<big>
|
定義大號文本(HTML 5 中不支持)
|
4
|
|
<blockquote>
|
定義長的引用
|
4
|
5
|
<body>
|
定義 body 元素
|
4
|
5
|
<br>
|
插入換行符
|
4
|
5
|
<button>
|
定義按鈕
|
4
|
5
|
<canvas>
|
定義圖形
|
5
|
|
<caption>
|
定義表格標題
|
4
|
5
|
<center>
|
定義居中的文本(HTML 5 中不支持)
|
4
|
|
<cite>
|
定義引用
|
4
|
5
|
<code>
|
定義計算機代碼文本
|
4
|
5
|
<col>
|
定義表格列的屬性
|
4
|
5
|
<colgroup>
|
定義表格列的分組
|
4
|
5
|
<command>
|
定義命令按鈕
|
5
|
|
<datalist>
|
定義下拉列表
|
5
|
|
<dd>
|
定義定義的描述
|
4
|
5
|
<del>
|
定義刪除文本
|
4
|
5
|
<details>
|
定義元素的細節
|
5
|
|
<dfn>
|
定義定義項目
|
4
|
5
|
<dir>
|
定義目錄列表(HTML 5 中不支持)
|
4
|
|
<div>
|
定義文檔中的一個部分
|
4
|
5
|
<dl>
|
定義定義列表
|
4
|
5
|
<dt>
|
定義定義的項目
|
4
|
5
|
<em>
|
定義強調文本
|
4
|
5
|
<embed>
|
定義外部交互內容或插件
|
5
|
|
<fieldset>
|
定義 fieldset
|
4
|
5
|
<figcaption>
|
定義 figure 元素的標題
|
5
|
|
<figure>
|
定義媒介內容的分組,以及它們的標題
|
5
|
|
<font>
|
HTML 5 中不支持
|
4
|
|
<footer>
|
定義 section 或 page 的頁腳
|
5
|
|
<form>
|
定義表單
|
4
|
5
|
<frame>
|
定義子窗口(框架)(HTML 5 中不支持)
|
4
|
|
<frameset>
|
定義框架的集(HTML 5 中不支持)
|
4
|
|
<h1> to <h6>
|
定義標題1 到標題6
|
4
|
5
|
<head>
|
定義關於文檔的信息
|
4
|
5
|
<header>
|
定義 section 或 page 的頁眉
|
5
|
|
<hgroup>
|
定義有關文檔中的 section 的信息
|
4
|
5
|
<html>
|
定義 html 文檔
|
4
|
5
|
<i>
|
定義斜體文本
|
4
|
5
|
<iframe>
|
定義行內的子窗口(框架)
|
4
|
5
|
<img>
|
定義圖像
|
4
|
5
|
<input>
|
定義輸入域
|
4
|
5
|
<ins>
|
定義插入文本
|
4
|
5
|
<keygen>
|
定義生成密鑰
|
5
|
|
<isindex>
|
定義單行的輸入域(HTML 5 中不支持)
|
4
|
|
<kbd>
|
定義鍵盤文本
|
4
|
5
|
<label>
|
定義表單控件的標注
|
4
|
5
|
<legend>
|
定義 fieldset 中的標題
|
4
|
5
|
<li>
|
定義列表的項目
|
4
|
5
|
<link>
|
定義資源引用
|
4
|
5
|
<map>
|
定義圖像映射
|
4
|
5
|
<mark>
|
定義有記號的文本
|
4
|
5
|
<menu>
|
定義菜單列表
|
4
|
5
|
<meta>
|
定義元信息
|
4
|
5
|
<meter>
|
定義預定義范圍內的度量
|
5
|
|
<nav>
|
定義導航鏈接
|
5
|
|
<noframes>
|
定義 noframe 部分(HTML 5 中不支持)
|
4
|
|
<noscript>
|
定義 noscript 部分
|
4
|
5
|
<object>
|
定義嵌入對象
|
4
|
5
|
<ol>
|
定義有序列表
|
4
|
5
|
<optgroup>
|
定義選項組
|
4
|
5
|
<option>
|
定義下拉列表中的選項
|
4
|
5
|
<output>
|
定義輸出的一些類型
|
5
|
|
<p>
|
定義段落
|
4
|
5
|
<param>
|
為對象定義參數
|
4
|
5
|
<pre>
|
定義預格式化文本
|
4
|
5
|
<progress>
|
定義任何類型的任務的進度
|
5
|
|
<q>
|
定義短的引用
|
4
|
5
|
<rp>
|
定義若瀏覽器不支持 ruby 元素顯示的內容
|
5
|
|
<rt>
|
定義 ruby 注釋的解釋
|
5
|
|
<ruby>
|
定義 ruby 注釋
|
5
|
|
<s>
|
定義加刪除線的文本(HTML 5 中不支持)
|
4
|
|
<samp>
|
定義樣本計算機代碼
|
4
|
5
|
<script>
|
定義腳本
|
4
|
5
|
<section>
|
定義 section
|
4
|
5
|
<select>
|
定義可選列表
|
4
|
5
|
<small>
|
定義小號文本
|
4
|
5
|
<source>
|
定義媒介源
|
4
|
5
|
<span>
|
定義文檔中的 section
|
4
|
5
|
<strike>
|
定義加刪除線的文本(HTML 5 中不支持)
|
4
|
|
<strong>
|
定義強調文本
|
4
|
5
|
<style>
|
定義樣式定義
|
4
|
5
|
<sub>
|
定義下標文本
|
4
|
5
|
<summary>
|
定義 details 元素的標題
|
5
|
|
<sup>
|
定義上標文本
|
4
|
5
|
標簽
|
描述
|
4: 指在HTML 4.01 中定義了該元素
5: 指在HTML 5 中定義了該元素
|
|
---|---|---|---|
<table>
|
定義表格
|
4
|
5
|
<tbody>
|
定義表格的主體
|
4
|
5
|
<td>
|
定義表格單元
|
4
|
5
|
<textarea>
|
定義 textarea
|
4
|
5
|
<tfoot>
|
定義表格的腳注
|
4
|
5
|
<th>
|
定義表頭
|
4
|
5
|
<thead>
|
定義表頭
|
4
|
5
|
<time>
|
定義日期/時間
|
5
|
|
<title>
|
定義文檔的標題
|
4
|
5
|
<tr>
|
定義表格行
|
4
|
5
|
<tt>
|
定義打字機文本
|
4
|
5 |
<u>
|
定義下划線文本(HTML 5 中不支持)
|
4
|
|
<ul>
|
定義無序列表
|
4
|
5
|
<var>
|
定義變量
|
4
|
5
|
<video>
|
定義視頻
|
5
|
|
<xmp>
|
定義預格式文本(HTML 5 中不支持)
|
4
|
事件屬性
HTML 5 元素可擁有事件屬性,這些屬性在瀏覽器中觸發行為,比如當用戶單擊一個HTML 5元素時啟動一段 JavaScript。下面列出的事件屬性,可以把它們插入 HTML 標簽來定義事件行為。
HTML 5 中的新事件屬性:onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
4: 指在HTML 4.01 中定義了該元素。
5: 指在HTML 5 中定義了該元素。
HTML 5不再支持的 HTML 4.01 屬性:onreset。
屬性
|
值
|
描述
|
4
|
5
|
---|---|---|---|---|
onabort
|
script
|
發生 abort 事件時運行腳本。
|
5
|
|
onbeforeonload
|
script
|
在元素加載前運行腳本。
|
5
|
|
onblur
|
script
|
當元素失去焦點時運行腳本。
|
4
|
5
|
onchange
|
script
|
當元素改變時運行腳本。
|
4
|
5
|
onclick
|
script
|
在鼠標點擊時運行腳本。
|
4
|
5
|
oncontextmenu
|
script
|
當菜單被觸發時運行腳本。
|
5
|
|
ondblclick
|
script
|
當鼠標雙擊時運行腳本。
|
4
|
5
|
ondrag
|
script
|
只要腳本在被拖動就運行腳本。
|
5
|
|
ondragend
|
script
|
在拖動操作結束時運行腳本。
|
5
|
|
ondragenter
|
script
|
當元素被拖動到一個合法的放置目標時,執行腳本。
|
5
|
|
ondragleave
|
script
|
當元素離開合法的放置目標時。
|
5
|
|
ondragover
|
script
|
只要元素正在合法的放置目標上拖動時,就執行腳本。
|
5
|
|
ondragstart
|
script
|
在拖動操作開始時執行腳本。
|
5
|
|
ondrop
|
script
|
當元素正在被拖動時執行腳本。
|
5
|
|
onerror
|
script
|
當元素加載的過程中出現錯誤時執行腳本。
|
5
|
|
onfocus
|
script
|
當元素獲得焦點時執行腳本。
|
4
|
5
|
onkeydown
|
script
|
當按鈕按下時執行腳本。
|
4
|
5
|
onkeypress
|
script
|
當按鍵被按下時執行腳本。
|
4
|
5
|
onkeyup
|
script
|
當按鈕松開時執行腳本。
|
4
|
5
|
onload
|
script
|
當文檔加載時執行腳本。
|
4
|
5
|
onmessage
|
script
|
當 message 事件觸發時執行腳本。
|
5
|
|
onmousedown
|
script
|
當鼠標按鈕按下時執行腳本。
|
4
|
5
|
onmousemove
|
script
|
當鼠標指針移動時執行腳本。
|
4
|
5
|
onmouseover
|
script
|
當鼠標指針移動到一個元素上時執行腳本。
|
4
|
5
|
onmouseout
|
script
|
當鼠標指針移出元素時執行腳本。
|
4
|
5
|
onmouseup
|
script
|
當鼠標按鈕松開時執行腳本。
|
4
|
5
|
onmousewheel
|
script
|
當鼠標滾輪滾動時執行腳本。
|
5
|
|
onreset
|
script
|
當表單重置時執行腳本。不支持。
|
4
|
|
onresize
|
script
|
當元素調整大小時運行腳本。
|
5
|
|
onscroll
|
script
|
當元素滾動條被滾動時執行腳本。
|
5
|
|
onselect
|
script
|
當元素被選中時執行腳本。
|
4
|
5
|
onsubmit
|
script
|
當表單提交時運行腳本。
|
4
|
5
|
onunload
|
script
|
當文檔卸載時運行腳本。
|
5
|
標簽屬性
HTML 5標簽擁有屬性。在每個標簽的參考頁中可以找到相應的特殊屬性。這里列出的屬性是通用於每個標簽的核心屬性和語言屬性(有個別例外)。
4: 指在HTML 4.01 中定義了該元素
5: 指在HTML 5 中定義了該元素
HTML 5標簽中的新屬性有:contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template
HTML 5 中不再支持的屬性:accesskey
屬性
|
值
|
描述
|
4
|
5
|
---|---|---|---|---|
acceskey
|
a character
|
設置訪問一個元素的鍵盤快捷鍵。不支持。
|
4
|
|
class
|
class_ruleor
style_rule
|
元素的類名。
|
4
|
5
|
contenteditable
|
true
false
|
設置是否允許用戶編輯元素。
|
5
|
|
contentextmenu
|
id of a menu element
|
給元素設置一個上下文菜單。
|
5
|
|
dir
|
ltr
rtl
|
設置文本方向。
|
4
|
5
|
draggable
|
true
false
auto
|
設置是否允許用戶拖動元素。
|
5
|
|
id
|
id_name
|
元素的唯一 id。
|
4
|
5
|
irrelevant
|
true
false
|
設置元素是否相關。不顯示非相關的元素。
|
5
|
|
lang
|
language_code
|
設置語言碼。
|
4
|
5
|
ref
|
urlor
elementID
|
引用另一個文檔或文檔上另一個位置。僅在 template 屬性設置時使用。
|
5
|
|
registrationmark
|
registration mark
|
為元素設置拍照。可規定於任何 <rule> 元素的后代元素,
除了 <nest> 元素。
|
5
|
|
style
|
style_definition
|
行內的樣式定義。
|
4
|
5
|
tabindex
|
number
|
設置元素的 tab 順序。
|
4
|
5
|
template
|
urlor
elementID
|
引用應該應用到該元素的另一個文檔或本文檔上另一個位置。
|
5
|
|
title
|
tooltip_text
|
顯示在工具提示中的文本。
|
4
|
5
|
HTML5與SEO
一:使搜索引擎更加容易抓取和索引
對於一些網站,特別是那些嚴重依賴於FLASH的網站HTML5是一個大福音。如果你有一個都是FLASH的站點,你就一定會看到切換到HTML5的 好處。首先,搜索引擎的蜘蛛將能夠抓取你的站點和索引你的內容。所有嵌入到動畫中的內容將全部可以被搜索引擎讀取。在搜索引擎優化的基本理論中,這一方面將會驅動你的網站獲得更多的右擊流量。
二:提供更多的功能,提高用戶的友好體驗
使用HTML5的另一個好處就是它可以增加更多的功能。對於HTML5的功能性問題,我們從全球幾個主流站點對它的青睞就可以看出。社交網絡大亨Facebook已經推出他們期待已久的基於HTML5的iPad應用平台,潘多拉也推出他們基於HTML5的音樂播放器的新版本。游戲平台 Zynga也在推出了三款新的在移動設備瀏覽器上運行的基於HTML5的游戲等等。每天都有不斷的基於HTML5的網站和HTML5特性的網站被推 出。保持站點處於新技術的前沿,也可以很好的提高用戶的友好體驗。
三:可用性的提高,提高用戶的友好體驗
最后我們可以從可用性的角度上看,HTML5可以更好的促進用戶於網站間的互動情況。多媒體網站可以獲得更多的改進,特別是在移動平台上的應用,使用 HTML5可以提供更多高質量的視頻和音頻流。到目前為止,事實就是iPhone和iPad將不會支持FLASH,同時ADOBE公司也公開聲明將 停止FLASH基於移動平台的開發,可以這么說——移動平台日后視頻音頻是HTML5的天下!