HTML5初步瞭解

 
 

1、使用HTML5的十大緣由

  你難道尚未考慮使用HTML5? 固然我猜測你可能有本身的緣由;它如今尚未被普遍的支持,在IE中很差使,或者你就是喜歡寫比較嚴格的XHTML代碼。HTML5是web開發世界的一次重大的改變,事實上無論你是否喜歡,它都是表明着將來趨勢。其實HTML5並不難理解和使用。咱們這裏能列出許多緣由爲何如今要開始使用HTML5javascript

  目前有不少的文章介紹使用HTML5而且介紹了使用它的優點和好處,沒錯,咱們這篇文章也相似。隨着更多這樣的文章,以及Apple的支持, Adobe圍繞HTML5的產品開發,以及移動flash的死亡,如此多網站的支持,我想對那些仍舊沒有或者不想接受它的人說一些話。我認爲主要得緣由是,它看起來像一個神祕的東西。不少感受它像噴氣揹包或者飛行汽車。一個未經驗證的非凡想法可是並不實際。可是事實上如今已近很是的實際了。html

  爲了解密HTML5而且幫助頑固的開發設計人員,我這裏寫了列出了使用HTML5的幾大緣由,但願對你們有幫助!html5

 

  第十大緣由:易用性

  倆個緣由使得使用HTML5建立網站更加簡單:語義上及其ARIA。新的HTML標籤像<header>, <footer>,<nav>,<section>, <aside>等等,使得閱讀者更加容易去訪問內容。在之前,即便你定義了class或者ID你的閱讀者也沒有辦法去了解給出的一個div到底是什麼。使用新的語義學的定義標籤,你能夠更好的瞭解HTML文檔,而且建立一個更好的使用體驗。java

  ARIA是一個W3C的標準主要用來對HTML文章中的元素指定「角色「,經過角色屬性來建立重要的頁面地形例如,header,footer,navigation或者aritcle頗有必要。這一點曾經被忽略掉了而且沒有被普遍使用,由於事實上並不驗證。然而,HTML5將會驗證這樣屬性。同時,HTML5將會內建這些角色而且沒法不覆蓋。更多的HTML5和ARIA討論,請你們查看這裏。web

  第九大緣由:視頻和音頻支持

  忘了flash和其它第三方應用吧,讓你的視頻和音頻經過HTML5標籤<video>和<audio>來訪問資源。正確播放媒體一直都是一個很是可怕的事情,你須要使用<embed>和<object>標籤,而且爲了它們能正確播放必須賦予一大堆的參數。你的媒體標籤將會很是複雜,大堆得使人迷惑的代碼。並且HTML5視頻和音頻標籤基本將他們視爲圖片:<video src=」"/>。可是其它參數例如寬度和高度或者自動播放呢?沒必要擔憂,只須要像其它HTML標籤同樣定義:<video src=」url」 width=」640px」 height=」380px」 autoplay/>。chrome

  實際上這個過程很是簡單,然而咱們的老瀏覽器可能並不喜歡咱們的HTML5,你須要添加更多代碼來讓他們正確工做。可是這個代碼仍是比<embed>和<object>來的簡單的多。   數據庫

  第八大緣由:Doctype

  沒錯,就是doctype,沒有更多內容了。是否是很是簡答?不須要拷貝粘貼一堆沒法理解的代碼,也沒有多餘的head標籤。最大的好消息在於,除了簡單,它能在每個瀏覽器中正常工做即便是名聲狼藉的IE6。canvas

  第七大緣由:更清晰的代碼

  若是你對於簡答,優雅,容易閱讀的代碼有所偏好的話,HTML5絕對是一個爲你量身定作的東西。HTML5容許你寫出簡單清晰富於描述的代碼。符合語義學的代碼容許你分開樣式和內容。看看這個典型的簡單擁有導航的heaer代碼:windows

<div id="header"> <h1>Header Text</h1> <div id="nav">  <ul>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li>  </ul> </div></div>

  是否是很簡單?可是使用HTML5後會使得代碼更加簡單而且富有含義:api

<header> <h1>Header Text</h1> <nav>  <ul>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li>  </ul> </nav></header>

  使用HTML5你能夠經過使用語義學的HTML header標籤描述內容來最後解決你的div及其class定義問題。 之前你須要大量的使用div來定義每個頁面內容區域,可是使用新的<section>,<article>,<header>,<footer>,<aside>和<nav>標籤,須要你讓你的代碼更加清晰易於閱讀。

  第六大緣由:更聰明的存儲

  HTML5中最酷的特性就是本地存儲。有一點像比較老的技術cookie和客戶端數據庫的融合。它比cooke更好用由於支持多個windows存儲,它擁有更好的安全和性能,即便瀏覽器關閉後也能夠保存。

  由於它是個客戶端的數據庫,你不用擔憂用戶刪除任何cookie,而且全部主流瀏覽器都支持。

  本地存儲對於不少狀況來講都不錯, 它是HTML5工具中一個不須要第三方插件實現的。可以保存數據到用戶的瀏覽器中意味你能夠簡單的建立一些應用特性例如:保存用戶信息,緩存數據,加載用戶上一次的應用狀態。

  第五大緣由:更好的互動

  咱們都喜歡更好的互動,咱們都喜歡對於用戶有反饋的動態網站,用戶能夠享受互動的過程。輸入<canvas>,HTML5的畫圖標籤容許你作更多的互動和動畫,就像咱們使用Flash達到的效果。

  除了<canvas>,HTML5一樣也擁有不少API容許你建立更加好的用戶體驗而且更加動態的web應用程序。 這裏有一個列表:

  • Drag and Drop (DnD)
  • Offline storage database
  • Browser history management
  • document editing
  • Timed media playback

  第四大緣由:遊戲開發

  沒錯, 你可使用HTML5的<canvas>開發遊戲。HTML5提供了一個很是偉大的,移動友好的方式去開發有趣互動的遊戲。若是你開發Flash遊戲,你就會喜歡上HTML5的遊戲開發。

  Script-tutorials目前提供了4個不部分的HTML5遊戲開發教程,這裏看看他們開發的有趣遊戲:

  第三大緣由: 遺留及其跨瀏覽器支持

  你的現代流行瀏覽器都支持HTML5(Chrome,Firefox,Safari,IE9和Opera),而且建立了HTML5 doctype這樣全部的瀏覽器,即便很是老很是使人厭惡瀏覽器像IE6均可以使用。可是由於老的瀏覽器可以識別doctype並不意味它能夠處理HTML5標籤和功能。幸運的是,HTML5已經使得開發更加簡單了,更多支持更多瀏覽器,這樣老的IE瀏覽器能夠經過添加javascript代碼來使用新的元素:

<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

  第二大緣由: 移動,移動仍是移動

  你能夠稱之爲「直覺」,可是我認爲移動技術將會變得更加的流行。我知道,這裏有些很是瘋狂的猜想,有些可能你也想到了 – Mobile是一個時尚!移動設備將佔領世界。更多的接受移動設備將會增加的很是迅速。這意味着更多的用戶會選擇使用移動設備訪問網站或者web應用。HTML5是最移動化的開發工具。隨着Adobe宣佈放棄移動flash開發,你將會考慮使用HTML5來開發webp應用。

  當手機瀏覽器徹底支持HTML5那麼開發移動項目將會和設計更小的觸摸顯示同樣簡單。這裏有不少的meta標籤容許你優化移動:

  • viewport: 容許你定義viewport寬度和縮放設置;
  • 全屏瀏覽器: ISO指定的數值容許Apple設備全屏模式顯示;
  • Home screen icons:  就像桌面收藏,這些圖標能夠用來添加收藏到IOS和Android移動設備的首頁。

  第一大緣由: 它是將來,開始用吧!

  最大的緣由今天你就開始使用HTML5是由於它是將來,不要掉隊了!HTML5不會往每一個方向發展,可是更多的元素已經被不少公司採用,而且開始着手開發。HTML5其實更像HTML,它不是一個新的技術須要你從新學習!若是你開發XHTML strict的話你如今就已經在開發HTML5了。爲何不更完整的享受HTML5的功能呢?

  你實際上沒有任何藉口不接受HTML5。事實上我惟一一個緣由使用HTML5是由於它書寫代碼簡單清晰。其它的特性其實我也沒有真正使用。你能夠考慮如今開始使用HTML5書寫代碼,它能幫助你改變書寫代碼的方式及其設計方式。開始用HTML5代碼編寫web應用吧,說不定下一個移動應用或者遊戲應用就是用HTML5開發的!

  英文原文:Top 10 Reasons to Use HTML5 Right Now

  來源:GBin1.com 、 雷鋒網

 
 

2、HTML5 新元素

自1999年之後HTML 4.01 已經改變了不少,今天,在HTML 4.01中的幾個已經被廢棄,這些元素在HTML5中已經被刪除或從新定義。

爲了更好地處理今天的互聯網應用,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>
  • <tt>
 
3、資源
做者:SuneBear
連接:http://www.zhihu.com/question/24398907/answer/30239864
來源:知乎
著做權歸做者全部,轉載請聯繫做者得到受權。

Animated Books with CSS 3D Transforms 這是一個3D書本,CSS3完成

=========HTML5特效彙集網站========
christmasexperiments.com 的頁面
chromeexperiments.com 的頁面
Mr.doob
litewerx.showcase
Form Follows Function
AlteredQualia
html5rocks.com 的頁面

===========視覺特效與交互式視頻============

Interactive Film "itsumo kawaii"

Arcade Fire / Just a Reflektor
Aaronetrope 3D科幻視頻投影對話
Aleksandar Rodic 3D立體博客
Beanstalk

three.js webgl 動態地圖
Ô Green by SPECIAL.T 水中植物廣告
Kimatica - Creative Connections 樹脈
Earth to Echo 電影科幻宣傳網站
霍比特人
HelloRun™ 線稿房間,第一人稱動
LETTERS, INC. 集成電路
Dataveyes | Human Data Interactions 視覺粒子

=========音樂與可視化==========

Rocking dendrites 搖滾與觸手
Arabesque - Music Colour Particles 優美的純音樂與彩色煙霧
compo.filler 藍電之音
Lights 波點
ÜberViz 電子
A [ Radiohead 音樂畫畫

=========物理特性元素============
Blob 大水球
Andrew Hoyer 布-骨架
HTML5 Fish Bowl IE-魚缸
googlecode.com 的頁面 chrome-水族館
three.js webgl 動物
Liquid Particles 3D 3D粒子流

==========畫繪與生成===========
10 Jaw Dropping HTML5 and Javascript Effects 10個畫繪特效
wormz . html5 canvas experiment 圖片生成毛毛蟲~~
Silk – Interactive Generative Art 光效
Sketch Toy: Draw sketches and share replays with friends! 記錄線稿步驟
ASCIIFlow Infinity ASCII字符生成圖表

========一些融入了HTML5的網站=======
Andrew McCarthy 滾動動物奔跑
東京溫柔基金
fifty-five | the data agency 垂直分割
A P R I L Z E R O 數據分析
Gaming Media 創意橫向滾動
Luxaqua | Aquarium Design 深邃海底縱向滾動
KILFISH 鬼畜縱向滾動
有顆梅,在臺灣 食品縱向滾動
Vespillo le film Vespillo縱向滾動
Exploring Moon Bears IE-月熊志
Metal Junk: The Game HTML5遊戲:金屬廢墟,遊戲就不展開了~~
相關文章
相關標籤/搜索