為什么要學習HTML5

發布時間:2017-04-19 11:27 來源:互聯網 當前欄目:網頁設計教程

  為了解密HTML5并且幫助頑固的開發設計人員,我這里寫了列出了使用HTML5的幾大原因,希望對大家有幫助!

  第十大原因:易用性

   倆個原因使得使用HTML5創建網站更加簡單:語義上及其ARIA。新的HTML標簽像<header>, <footer>,<nav>,<section>, <aside>等等,使得閱讀者更加容易去訪問內容。在以前,即使你定義了class或者ID你的閱讀者也沒有辦法去了解給出的一個div究 竟是什么。使用新的語義學的定義標簽,你可以更好的了解HTML文檔,并且創建一個更好的使用體驗。   ARIA是一個W3C的標準主要用 來對HTML文章中的元素指定“角色“,通過角色屬性來創建重要的頁面地形例如,header,footer,navigation或者aritcle很 有必要。這一點曾經被忽略掉了并且沒有被廣泛使用,因為事實上并不驗證。然而,HTML5將會驗證這樣屬性。同時,HTML5將會內建這些角色并且無法不 覆蓋。更多的HTML5和ARIA討論,請大家查看這里。

  第九大原因:視頻和音頻支持

  忘了flash和其它第三 方應用吧,讓你的視頻和音頻通過HTML5標簽<video>和<audio>來訪問資源。正確播放媒體一直都是一個非常可怕的 事情,你需要使用<embed>和<object>標簽,并且為了它們能正確播放必須賦予一大堆的參數。你的媒體標簽將會非常復 雜,大堆得令人迷惑的代碼。而且HTML5視頻和音頻標簽基本將他們視為圖片:<video src=”"/>。但是其它參數例如寬度和高度或者自動播放呢?不必擔心,只需要像其它HTML標簽一樣定義:<video src=”url” width=”640px” height=”380px” autoplay/>。   實際上這個過程非常簡單,然而我們的老瀏覽器可能并不喜歡我們的HTML5,你需要添加更多代碼來讓他們正確工作。但是這個代碼還是比<embed>和<object>來的簡單的多。   

  第八大原因:Doctype

  沒錯,就是doctype,沒有更多內容了。是不是非常簡答?不需要拷貝粘貼一堆無法理解的代碼,也沒有多余的head標簽。最大的好消息在于,除了簡單,它能在每一個瀏覽器中正常工作即使是名聲狼藉的IE6。

  第七大原因:更清晰的代碼

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

<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后會使得代碼更加簡單并且富有含義:

<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>標簽,需要你讓你的代碼更加清晰易于閱讀。

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、