【HTML5】初識HTML5及新的元素結(jié)構(gòu)介紹

一、認(rèn)識HTML5

1. 什么是HTML5

HTML 5草案的前身名為Web Applications 1.0，是在2004年由WHATWG提出，再于2007年獲W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。在2008年1月22日，第一份正式草案發(fā)布。WHATWG表示該規(guī)范是目前仍在進(jìn)行的工作，仍須多年的努力。目前Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer 9已支援HTML5技術(shù)。

HTML5本質(zhì)并沒有對之前HTML4版本的規(guī)范進(jìn)行徹底的變革，而是一開始設(shè)計(jì)就考慮了跟之前的標(biāo)準(zhǔn)進(jìn)行兼容，并且把最新的WEB開發(fā)的一些新技術(shù)新的規(guī)范引入進(jìn)了新版本的標(biāo)準(zhǔn)中。

2. HTML5新特性

2.1** 新增擁有具體含義的標(biāo)簽**
現(xiàn)在所有的站點(diǎn)基本上都是div+css布局，幾乎所有的文章標(biāo)題、內(nèi)容、輔助介紹等都用div容器來承載。搜索引擎在抓取頁面內(nèi)容時(shí)，因?yàn)闆]有明確的容器的含義只能去猜測這些標(biāo)簽容器承載的是文章標(biāo)題還是文章內(nèi)容等。HTML5新標(biāo)準(zhǔn)中直接添加了擁有具體含義的HTML標(biāo)簽比如：<article>、<footer>、<header>、<nav>、<section>。

2.2 新增更加智能的表單類型
之前的表單標(biāo)簽僅僅是簡單的類型的約束，比如文本框、文本域、下拉列表等。而跟業(yè)務(wù)結(jié)合緊密的表單標(biāo)簽數(shù)據(jù)校驗(yàn)等控制都沒有很好的支持，基本上都是跟第三方的JS控件進(jìn)行結(jié)合使用，但是這些第三方總會涉及到版本控制、瀏覽器兼容性、非標(biāo)準(zhǔn)等一系列的問題。而在HTML5的標(biāo)準(zhǔn)中直接添加了智能表單，讓這一切都變得那么的簡單，比如calendar、date、time、email、url、search

2.3 讓W(xué)eb程序更加的獨(dú)立，減少了對第三方插件的依賴。
在HTML5標(biāo)準(zhǔn)中原生的就支持音頻、視頻、畫布等技術(shù)。讓W(xué)EB程序更加獨(dú)立，更好的適應(yīng)多種形式的客戶端。

2.4 對本地離線存儲的更好的支持
HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：

  • localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲
  • sessionStorage- 針對一個(gè) session 的數(shù)據(jù)存儲

2.5 HTML5即時(shí)二維繪圖 ,既畫布的引入
HTML5 的canvas元素使用 JavaScript 在網(wǎng)頁上繪制圖像。并擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

2.6 JS支持多線程
在不影響UI update及瀏覽器與用戶交互的情況下, 前端做大規(guī)模運(yùn)算，只能通過setTimeout之類的去模擬多線程 。而新的標(biāo)準(zhǔn)中，JS新增的HTML5 Web Worker對象原生的就支持多線程。

2.7 WebSockets讓跨域請求、長連接、數(shù)據(jù)推送變得簡單
WebSockets是在一個(gè)(TCP)接口進(jìn)行雙向通信的技術(shù)，PUSH技術(shù)類型。WebSocket是html5規(guī)范新引入的功能，用于解決瀏覽器與后臺服務(wù)器雙向通訊的問題，使用WebSocket技術(shù)，后臺可以隨時(shí)向前端推送消息，以保證前后臺狀態(tài)統(tǒng)一，在傳統(tǒng)的無狀態(tài)HTTP協(xié)議中，這是“無法做到”的。

2.8 更好的異常處理
HTML5(text/html)瀏覽器將在錯(cuò)誤語法的處理上更加靈活。HTML5在設(shè)計(jì)時(shí)保證舊的瀏覽器能夠安全地忽略掉新的HTML5代碼。與HTML4.01相比，HTML5給出了解析的完整規(guī)則，讓不同的瀏覽器即使在發(fā)生語法錯(cuò)誤時(shí)也能返回完全相同的結(jié)果。

2.9 文件API讓文件上傳和操縱文件變得那么簡單
由于項(xiàng)目中經(jīng)常遇到用Web應(yīng)用中控制操作本地文件，而之前都是使用一些富客戶端技術(shù)比如flash，ActiveX，Silverlight等技術(shù)。在HTML5的新的提供的HTML5 File API讓JS可以輕松上陣了。

二、HTML5的新的結(jié)構(gòu)元素介紹

1、HTML5與HTML4的區(qū)別

  1. 取消了一些過時(shí)的HTML4的標(biāo)簽
    其中包括純粹顯示效果的標(biāo)記，如<font>和<center>，它們已經(jīng)被CSS完全取代。
    其他取消的屬性:acronym,applet,basefont,big,center,dir,font,frame,frameset,isindex,noframes,strike,tt

  2. 添加了一些新的元素
    更加智能的表單元素：date,email,url等; 更加合理的標(biāo)簽：<section>,<video>,<progress>,<nav>,<meter>,<time>,<aside>,<canvas>等。

  3. 文件類型聲明
    僅有一種類型，<!DOCTYPE html>

2、HTML5的新結(jié)構(gòu)標(biāo)簽

普通的頁面布局方式：

普通頁面布局方式

以上是很常見的div+css布局模式，通過class來區(qū)分不同的結(jié)構(gòu)，包括頭部、導(dǎo)航、文章內(nèi)容、右邊欄，還有底部模塊。

而HTML5新標(biāo)簽帶來的新的布局則是下面這種情況：

html5中心的布局方式
<!DOCTYPE html>
<html>
   <head>
       <title>my page</title>
   </head>
   <body> 
     <header>header</header>
     <nav>nav</nav> 
      <article>
           <section>section</section> 
      </article> 
    <aside>aside</aside>
     <footer>footer</footer>
   </body>
</html>

擁有具體含義的標(biāo)簽，使得代碼有很直觀的感受，搜索器也能很容易地抓取合適的信息。

<section>
定義文檔中的節(jié)。它用來表現(xiàn)普通的文檔內(nèi)容或應(yīng)用區(qū)塊，但section元素標(biāo)簽并非一個(gè)普通的容器元素，它表示一段專題性的內(nèi)容，一般會帶有標(biāo)題。

<article>
特殊的section標(biāo)簽，它比section具有更明確的語義，它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊。當(dāng)我們描述一件具體的事物的時(shí)候，通常鼓勵使用article來代替section。

article會有標(biāo)題部分（通常包含在header內(nèi)），也可以包含footer。

article可以嵌套，內(nèi)層的article對外層的article標(biāo)簽有隸屬關(guān)系。

<nav>
可以作為頁面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其它頁面或者當(dāng)前頁面的其它部分，使html代碼在語義化方面更加精確，同時(shí)對于屏幕閱讀器等設(shè)備的支持也更好。

<aside>
aside標(biāo)簽用來裝載非正文的內(nèi)容，被視為頁面里面一個(gè)單獨(dú)的部分。它包含的內(nèi)容與頁面的主要內(nèi)容是分開的，可以被刪除，而不會影響到網(wǎng)頁的內(nèi)容、章節(jié)或是頁面所要傳達(dá)的信息。例如廣告，成組的鏈接，側(cè)邊欄等等。

<header>
header標(biāo)簽定義文檔的頁眉，通常是一些引導(dǎo)和導(dǎo)航信息。它不局限于寫在網(wǎng)頁頭部，也可以寫在網(wǎng)頁內(nèi)容里面。

通常header標(biāo)簽至少包含一個(gè)標(biāo)題標(biāo)記（h1-h6），還可以包括hgroup標(biāo)簽，還可以包括表格內(nèi)容、標(biāo)識、搜索表單、nav導(dǎo)航等。

<footer>
footer標(biāo)簽定義section或document的頁腳，包含了與頁面、文章或是部分內(nèi)容有關(guān)的信息，比如說文章的作者或者日期。 它和header標(biāo)簽使用基本一樣，可以在一個(gè)頁面中多次使用，如果在一個(gè)區(qū)段的后面加入footer，那么它就相當(dāng)于該區(qū)段的頁腳了。

<hgroup>
hgroup標(biāo)簽是對網(wǎng)頁或區(qū)段section的標(biāo)題元素（h1-h6）進(jìn)行組合。例如，在一區(qū)段中你有連續(xù)的h系列的標(biāo)簽元素，則可以用hgroup將他們括起來。

<figure>
用于對元素進(jìn)行組合。多用于圖片與圖片描述組合。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容