日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯網營銷解決方案
HTML5的革新：結構之美

HTML 5如同一場革命，正在Web2.0后時代轟轟烈烈的進行著。

公司主營業(yè)務：成都做網站、網站建設、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現互聯網宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯推出江都免費做網站回饋大家。

推薦專題：HTML 5 下一代Web開發(fā)標準詳解

HTML 5是什么，無須我在這里贅述了。對于HTML 5的革新，按我的理解，可以總結為語義明確的標簽體系、化繁為簡的富媒體支持、神奇的本地數據存儲技術、不需要插件的富動畫(canvas)、強大的API支持。總之，HTML 5讓人機交互，人網交互變得更加舒適，貼合用戶。以往對富媒體應用與本存儲的支持乏力也不再是瀏覽器的切膚之痛。將Web從內容平臺推向標準化的應用平臺，并一統(tǒng)各在平臺陣營的標準，才是HTML 5革命的初衷。

本文，我就拋磚引玉，闡述HTML 5的革新之一：語義更明確簡潔的結構。

從”頭”說起

一個標準的XHTML頭部代碼應該是這樣：

 
 
 
    
  
  
  
  1. 
  
  
  
  2. “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    3. 
  
  
  
    4. 
  
  
  
  4. 
  
  
  
    6. 
  
  
  
  6.

你能記住嗎?你會去死記硬背嗎?當然不會!我們只需要機械的復制粘貼即可。

再看看一個標準的HTML 5頭部是如何的：

 
 
 
    
  
  
  
  1. 
  
  
  
    3.

孰繁孰簡，就不用我說了。是的，HTML 5的頭部可以如此簡單，可以輕易的記住!并且，可以忽略大小寫，引號以及最后一個尖括號前的反斜線。

為什么可以如此松散?其實，如果把XHTML當成text/html發(fā)送，瀏覽器一樣可以很好的解析，瀏覽器并不在乎代碼的語法。所以，HTML 5是形而上的，它可能會破壞原有的一些標準，但仍可在瀏覽器中很好的表現。

當然，為了團隊協(xié)助與后續(xù)維護的方便，我們還是應該統(tǒng)一一種你喜歡的風格的寫法，比如：

 
 
 
    
  
  
  
  1. 
  
  
  
  2. 
  
  
  
  3. 
  
  
  
    5. 
  
  
  
  5. … 
    6. 
  
  
  
  6. 
  
  
  
  7. 
  
  
  
  8. … 
    9. 
  
  
  
  9. 
  
  
  
  10.

另外，HTML 5雖然目前并不為所有瀏覽器所支持，但這個能省去100多字節(jié)(對于日PV百萬級以上的站點，能省下不少的流量哦)的頭部已可以完美的兼容了。如果你對瀏覽器解析模式有研究的話，你應該知道，頁面在沒有定義doctype的情況下會觸發(fā)怪異模式，而只要定義了瀏覽器就可以在標準模式下解析頁面，而不需要指定某個類型的DTD。

新的語義化標簽體系

語義化編碼是一個合格前端Developer必備的技能，但隨著網頁的日漸豐富化，僅僅用原有的xhtml標簽去語義化顯然已經力不從心。上帝說：”要有光!”便有了光。于是，HTML 5提供了一系列新的標簽及相應屬性，以反應現代網站典型語義。實踐出真理。還是寫一個例子吧：

 
 
 
    
  
  
  
    2. 
  
  
  
    3. 
  
  
  
  3. 網站標題
    4. 
  
  
  
  4. 網站副標題
    5.
    • HTML 5
    • CSS
    • JavaScript

  • 這是一篇講述HTML 5新結構標簽的文章。

  • 這還是一篇講述HTML 5新結構標簽的文章。

  • 作者簡介

  • Mr.Think，專注Web前端技術的凡夫俗子。

  • 頁面的底部

    • 上面是一個簡單的博客頁面部分HTML，由頭部、文章展示區(qū)、右側欄、底部組成。編碼整潔，也符合XHTML的語義化，即便是在HTML 5中也可以很好的表現。但是對瀏覽器來說，這就是一段沒有區(qū)分開權重的代碼，而不是一個讓機器也能讀懂語義的標簽來定義相應的區(qū)塊。比如，標準瀏覽器(比如Firefox、Chrome甚至新版的IE9)都有一個快捷鍵可以帶引客戶直接跳轉到頁面的導航，但問題是所有的區(qū)塊都是用DIV定義，并且DIV的ID值是同開發(fā)者定的，所以，瀏覽器并不知道哪個應該是導航鏈接所在區(qū)塊。HTML 5新標簽的出現，正好彌補了這一缺憾。那么，上面的代碼，換成HTML 5就可以這樣寫：

     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
    3. 網站標題
      4. 
  
  
  
    4. 網站副標題
      5. 
  
  
  
    5. 
  
  
  
      7. 
  
  
  
      7. 
  
  
  
      • HTML 5
        • 
  
  
  
      • CSS
        • 
  
  
  
      • JavaScript
        • 
  
  
  
      8. 
  
  
  
    8. 
  
  
  
    9. 
  
  
  
      11. 
  
  
  
      12. 
  
  
  
    12. 這是一篇講述HTML 5新結構標簽的文章。
      13. 
  
  
  
    13. 
  
  
  
      15. 
  
  
  
    15. 這還是一篇講述HTML 5新結構標簽的文章。
      16. 
  
  
  
    16.

  • 作者簡介

  • Mr.Think，專注Web前端技術的凡夫俗子。

  • 網頁底部

  • 原來，HTML的頁面結構可以如此之美，不用注釋也能一目了然。對于瀏覽器，找到對應的區(qū)塊也不再會茫然無措。

    #p#

    如何用HTML 5新標簽結構化元素

    通過上面的示例，我們了解到HTML 5的新標簽對結構化的革新，但切換到實際使用中，該如何恰當的使用它們呢?我想這也是很多HTML 5學習者想問一個問題。如同XHTML語義化一樣，HTML 5語義化標簽的使用也應該遵循：每個標簽都有它特定的意義，而語義化，就是讓我們在適當的位置用適當的標簽，以更好的讓人和機器(機器可理解為瀏覽器可理解為搜索引擎)都一目了然。比如header標簽一般是頁面的第一個區(qū)塊元素(header標簽也可用于類型的頭部元素中，比如文章區(qū)塊的標題)，包含的了頁面的主題信息;nav標簽一般用于包裹導航信息;footer一般用來包裹頁面底部信息;等等。

    下面是我參考HTML 5手冊列出的結構類常用新標簽的語義解釋及使用指引：

    標簽

    手冊釋義：定義 section 或 document 的頁眉。

    使用指引：一般用來包含頁面頭部，也可用于其他區(qū)域頭部，比如article頭部：

     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
    3. 網站標題
      4. 
  
  
  
    4. 網站副標題
      5. 
  
  
  
    5.

    標簽

    手冊釋義：用于對網頁或區(qū)段(section)的標題進行組合。

    使用指引：用于標題類的組合，比如文章的標題與副標題：

     
 
 
      
  
  
  
      2. 
  
  
  
    2. 這是一篇介紹HTML 5結構標簽的文章
      3. 
  
  
  
    3. HTML 5的革新
      4.

    標簽

    手冊釋義：定義文檔中的節(jié)(section)。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。

    使用指引：用于成節(jié)的內容，會在文檔流中開始一個新的節(jié)：

     
 
 
      
  
  
  
      2. 
  
  
  
    2. section是什么？
      3. 
  
  
  
    3. 一個新的章節(jié)
      4. 
  
  
  
      5. 
  
  
  
    5. 關于section
      6. 
  
  
  
    6. section的介紹
      7. 
  
  
  
    7. … 
      8. 
  
  
  
    8.

    標簽

    手冊釋義：定義 section 或 document 的頁腳。典型地，它會包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及/或者聯系信息。

    使用指引：一般用來包裹整個頁面通用底部，也可用于其他區(qū)域底部，比如article底部：

     
 
 
      
  
  
  
      2. 
  
  
  
    2. COPYRIGHT@ieFans.Net 
      3.

    標簽

    手冊釋義：定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文

    本。亦或是來自其他外部源內容。

    使用指引：顧名思義，一般用于文章區(qū)塊：

     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
      4. 
  
  
  
    4. 這是一篇介紹HTML 5結構標簽的文章
      5. 
  
  
  
    5. HTML 5的革新
      6. 
  
  
  
    6. 
  
  
  
    7. 2011.03.20
      8. 
  
  
  
    8. 
  
  
  
    9. 文章內容詳情
      10.

    標簽

    手冊釋義：用于對元素進行組合。

    使用指引：多用于圖片與圖片描述組合：

     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
    3. 這兒是圖片的描述信息
      4.

    標簽

    手冊釋義：定義菜單列表。當希望列出表單控件時使用該標簽。

    使用指引：使用于菜單類區(qū)塊，用來定義菜單列表或菜單選項:

     
 
 
      
  
  
  
      2. 
  
  
  
    3. HTML 5
      4. 
  
  
  
    5. CSS
      6. 
  
  
  
    7. JavaScript
      8.

    HTML 5的其他新標簽，就不此一一解釋了，請自行查詢一下手冊。

    其實，這些東西，如同XHTML的div、h1、inpu等標簽一樣，只要平時多加實踐，運用自如也是輕而易舉的。

    關于兼容性

    如果你是一個喜歡研究關注前端的人，你應該知道淘寶的頁面結構中已大量用到了HTML 5新標簽。所以，我想說的是只要敢于嘗試，兼容性不是問題，兼容的方法，網上有很多(本文是講結構的，哈~)。

    后話

    任何一門新技術，都需要一個適應的過程。如果你準備好了做一名優(yōu)秀的Web前端開發(fā)人員，那你就得不斷的嘗試并接受最新的前端技術。

    孫文曾說，欲經文明這幸福，不得不經文明之痛苦。人類的革命如此，HTML 5的革命亦是如此。IE的日漸沒落，讓各大瀏覽器廠商以一次進入了戰(zhàn)國時代，群雄逐鹿。而對于開發(fā)者，我們只奢求各大瀏覽器廠商盡可能的遵循同一個標準，而不是群雄逐鹿后的四分五裂。因為，高效完美的呈現給各類用戶同樣的應用才是我們的終極目標。

    如此，本文從頁面的doctype說起，到用HTML 5新標簽搭建語義化更明確的頁面的結構，再解釋了一番與頁面結構相關的新標簽。相信大家對HTML 5的結構性新標簽有了一個新的認知，如果你有興趣，那就打開你的IDE，寫上一段由HTML 5新標簽搭建的代碼，然后用CSS去描繪你的宏偉藍圖吧!


    網頁名稱：HTML5的革新：結構之美
    本文路徑：http://www.5511xx.com/article/dhijoce.html