什么是H5?


總聽到很多人說H5,現在H5很火,到底H5是什么,以下發表個人對H5的理解。

HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標准。

HTML 的上一個版本誕生於 1999 年。自從那以后,Web 世界已經經歷了巨變。

HTML5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 HTML5 支持。

設計目的

  HTML5的設計目的是為了在移動設備上支持多媒體。新的語法特征被引進以支持這一點,如video、audio和canvas 標記。
  HTML5還引進了新的功能,可以真正改變用戶與文檔的交互方式,包括:
  1. · 新的解析規則增強了靈活性
  2. · 新屬性
  3. · 淘汰過時的或冗余的屬性
  4. · 一個HTML5文檔到另一個文檔間的拖放功能
  5. · 離線編輯
  6. · 信息傳遞的增強
  7. · 詳細的解析規則
  8. · 多用途互聯網郵件擴展(MIME)和協議處理程序注冊
  9. · 在SQL數據庫中存儲數據的通用標准(Web SQL)

HTML5在2007年被萬維網聯盟(W3C)新的工作組采用。這個工作組在2008年1月發布了HTML 5的首個公開草案。眼下,HTML5處於“呼吁審查”狀態,W3C預期它將在2014年年底達到其最終狀態。

特性:

語義特性(Class:Semantic)

  HTML5賦予 網頁更好的意義和結構。更加豐富的標簽將隨着對 RDFa的,微數據與 微格式等方面的支持,構建對程序、對用戶都更有價值的數據 驅動的Web。
本地存儲特性(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)
  在不犧牲性能和語義結構的前提下, CSS3中提供了更多的風格和更強的效果。此外,較之以前的Web排版,Web的開放字體格式( WOFF)也提供了更高的靈活性和控制性。
 

新元素

  為了更好地處理今天的互聯網應用,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>

程序接口

除了原先的 DOM接口,HTML5增加了更多 API,如:
1. 用於即時2D繪圖的 Canvas標簽
2. 定時媒體回放
3. 離線數據庫存儲
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亮點:
  1. jChartFX充分利用了HTML5,CSS和SVG,讓您能夠在瀏覽器提供美觀優越的圖表和更豐富的最終用戶體驗。
  2. jChartFX擁有很多令人振奮的功能,它在無插件純JavaScript的瀏覽器上運行,這意味着在提高了網站安全性和速度的同時,最大程度的減少了網站服務器的負荷。
  3. jChartFX還能夠自動整合到jQuery UI ThemeRoller,自動讀取並解釋jQuery的主題和CSS文件,能夠快速適應您的頁面布局和設計,無需一行代碼。
  4. jChartFX支持JSON,JSON能夠幫助您實現,任何數據源中的數據都可以展現到圖表中。
  5. jChartFX還支持超過40種的2D、3D圖表類型,免費的圖表控件中支持如此之多的圖表展示類型實屬難得。

標簽

注:在下面表格中4: 指在HTML 4.01 中定義了該元素 5: 指在HTML 5 中定義了該元素
按字母順序排列的標簽列表
標簽
描述
 
<!--...-->
定義注釋
4
5
定義文檔類型
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
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的天下!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM