HTML 5的革新:結構之美

来源:http://www.cnblogs.com/shouce/archive/2016/03/26/5321922.html
-Advertisement-
Play Games

前言HTML 5如同一場革命,正在Web2.0後時代轟轟烈烈的進行著。HTML 5是什麼,無須我在這裡贅述了。對於HTML 5的革新,按我的理解,可以總結為語義明確的標簽體系、化繁為簡的富媒體支持、神奇的本地數據存儲技術、不需要插件的富動畫(canvas)、強大的API支持。總之,HTML 5讓人機 ...


前言HTML 5如同一場革命,正在Web2.0後時代轟轟烈烈的進行著。HTML 5是什麼,無須我在這裡贅述了。對於HTML 5的革新,按我的理解,可以總結為語義明確的標簽體系、化繁為簡的富媒體支持、神奇的本地數據存儲技術、不需要插件的富動畫(canvas)、強大的API支持。總之,HTML 5讓人機交互,人網交互變得更加舒適,貼合用戶。以往對富媒體應用與本存儲的支持乏力也不再是瀏覽器的切膚之痛。將Web從內容平臺推向標準化的應用平臺,並一統各在平臺陣營的標準,才是HTML 5革命的初衷。 本文,我就拋磚引玉,闡述HTML 5的革新之一:語義更明確簡潔的結構。 從"頭"說起 一個標準的XHTML頭部代碼應該是這樣:

複製代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
</head> 複製代碼

  你能記住嗎?你會去死記硬背嗎?當然不會!我們只需要機械的複製粘貼即可。 再看看一個標準的HTML 5頭部是如何的:

<!doctype html>
<meta charset=gb2312>

  孰繁孰簡,就不用我說了。是的,HTML 5的頭部可以如此簡單,可以輕易的記住!並且,可以忽略大小寫,引號以及最後一個尖括弧前的反斜線。 為什麼可以如此鬆散?其實,如果把XHTML當成text/html發送,瀏覽器一樣可以很好的解析,瀏覽器並不在乎代碼的語法。所以,HTML 5是形而上的,它可能會破壞原有的一些標準,但仍可在瀏覽器中很好的表現。 當然,為了團隊協助與後續維護的方便,我們還是應該統一一種你喜歡的風格的寫法,比如:

複製代碼 <!doctype html>
<html>
<head>
<meta charset="gb2312"/>
...
</head>
<body>
...
</body>
</html> 複製代碼

  另外,HTML 5雖然目前並不為所有瀏覽器所支持,但這個能省去100多位元組(對於日PV百萬級以上的站點,能省下不少的流量哦)的頭部已可以完美的相容了。如果你對瀏覽器解析模式有研究的話,你應該知道,頁面在沒有定義doctype的情況下會觸發怪異模式,而只要定義了<!doctype html>瀏覽器就可以在標準模式下解析頁面,而不需要指定某個類型的DTD。 新的語義化標簽體系 語義化編碼是一個合格前端Developer必備的技能,但隨著網頁的日漸豐富化,僅僅用原有的xhtml標簽去語義化顯然已經力不從心。上帝說:"要有光!"便有了光。於是,HTML 5提供了一系列新的標簽及相應屬性,以反應現代網站典型語義。實踐出真理。還是寫一個例子吧:

複製代碼 <div id="header">
<div class="hgroup">
<h1>網站標題</h1>
<h1>網站副標題</h1>
</div>
<div id="nav">
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<!--//header end-->
<div id="left">
<div class="article">
<p>這是一篇講述HTML 5新結構標簽的文章。</p>
</div>
<div class="article">
<p>這還是一篇講述HTML 5新結構標簽的文章。</p>
</div>
</div>
<!--//left end-->
<div id="aside">
<h1>作者簡介</h1>
<p>Mr.Think,專註Web前端技術的凡夫俗子。</p>
</div>
<!--//side end-->
<div id="footer">
頁面的底部
</div>
<!--//footer end--> 複製代碼

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

複製代碼 <header>
<hgroup>
<h1>網站標題</h1>
<h1>網站副標題</h1>
</hgroup>
<nav>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>
</header>
<div id="left">
<article>
<p>這是一篇講述HTML 5新結構標簽的文章。</p>
</article>
<article>
<p>這還是一篇講述HTML 5新結構標簽的文章。</p>
</article>
</div>
<aside>
<h1>作者簡介</h1>
<p>Mr.Think,專註Web前端技術的凡夫俗子。</p>
</aside>
<footer>
網頁底部
</footer> 複製代碼

  原來,HTML的頁面結構可以如此之美,不用註釋也能一目瞭然。對於瀏覽器,找到對應的區塊也不再會茫然無措。 如何用HTML 5新標簽結構化元素 通過上面的示例,我們瞭解到HTML 5的新標簽對結構化的革新,但切換到實際使用中,該如何恰當的使用它們呢?我想這也是很多HTML 5學習者想問一個問題。如同XHTML語義化一樣,HTML 5語義化標簽的使用也應該遵循:每個標簽都有它特定的意義,而語義化,就是讓我們在適當的位置用適當的標簽,以更好的讓人和機器(機器可理解為瀏覽器可理解為搜索引擎)都一目瞭然。比如header標簽一般是頁面的第一個區塊元素(header標簽也可用於類型的頭部元素中,比如文章區塊的標題),包含的了頁面的主題信息;nav標簽一般用於包裹導航信息;footer一般用來包裹頁面底部信息;等等。 下麵是我參考HTML 5手冊列出的結構類常用新標簽的語義解釋及使用指引:<header>標簽 手冊釋義:定義 section 或 document 的頁眉。 使用指引:一般用來包含頁面頭部,也可用於其他區域頭部,比如article頭部:

複製代碼 <header>
<hgroup>
<h1>網站標題</h1>
<h1>網站副標題</h1>
</hgroup>
</header> 複製代碼

  <hgroup>標簽手冊釋義:用於對網頁或區段(section)的標題進行組合。 使用指引:用於標題類的組合,比如文章的標題與副標題:

<hgroup>
<h1>這是一篇介紹HTML 5結構標簽的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>

  <nav>標簽手冊釋義:定義導航鏈接的部分。 使用指引:用於定義頁面的導航部分:

複製代碼 <nav>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav> 複製代碼

  <aside>標簽定義 article 以外的內容。aside 的內容應該與 article 的內容相關。 使用指引:用於成節的內容,會在文檔流中開始一個新的節,一般用於與文章內容相關的邊欄:

<aside>
<h1>作者簡介</h1>
<p>Mr.Think,專註Web前端技術的凡夫俗子。</p>
</aside>

  <section>標簽 手冊釋義:定義文檔中的節(section)。比如章節、頁眉、頁腳或文檔中的其他部分。 使用指引:用於成節的內容,會在文檔流中開始一個新的節:

複製代碼 <section>
<h1>section是什麼?</h1>
<h2>一個新的章節</h2>
<article>
<h2>關於section</h1>
<p>section的介紹</p>
...
</article>
</section> 複製代碼

  <footer>標簽手冊釋義:定義 section 或 document 的頁腳。典型地,它會包含創作者的姓名、文檔的創作日期以及/或者聯繫信息。 使用指引:一般用來包裹整個頁面通用底部,也可用於其他區域底部,比如article底部:

<footer>
[email protected]
</footer>

  <article>標簽手冊釋義:定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章,或者來自 blog 的文本,或者是來自論壇的文 本。亦或是來自其他外部源內容。 使用指引:顧名思義,一般用於文章區塊:

複製代碼 <article>
<header>
<hgroup>
<h1>這是一篇介紹HTML 5結構標簽的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<time datetime="2011-03-20">2011.03.20</time>
</header>
<p>文章內容詳情</p>
</article> 複製代碼

  <figure>標簽手冊釋義:用於對元素進行組合。 使用指引:多用於圖片與圖片描述組合:

<figure>
<img src="img.gif" alt="figure標簽" title="figure標簽"/>
<figcaption>這兒是圖片的描述信息</figcaption>
</figure>

  <menu>標簽手冊釋義:定義菜單列表。當希望列出表單控制項時使用該標簽。 使用指引:使用於菜單類區塊,用來定義菜單列表或菜單選項:

複製代碼 <menu>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</menu> 複製代碼

  HTML 5的其他新標簽,就不此一一解釋了,請自行查詢一下手冊。 其實,這些東西,如同XHTML的div、h1、inpu等標簽一樣,只要平時多加實踐,運用自如也是輕而易舉的。 關於相容性 如果你是一個喜歡研究關註前端的人,你應該知道淘寶的頁面結構中已大量用到了HTML 5新標簽。所以,我想說的是只要敢於嘗試,相容性不是問題,相容的方法,網上有很多(本文是講結構的,哈~)。 後話 任何一門新技術,都需要一個適應的過程。如果你準備好了做一名優秀的Web前端開發人員,那你就得不斷的嘗試並接受最新的前端技術。 孫文曾說,欲經文明之幸福,不得不經文明之痛苦。人類的革命如此,HTML 5的革命亦是如此。IE的日漸沒落,讓各大瀏覽器廠商以一次進入了戰國時代,群雄逐鹿。而對於開發者,我們只奢求各大瀏覽器廠商儘可能的遵循同一個標準,而不是群雄逐鹿後的四分五裂。因為,高效完美的呈現給各類用戶同樣的應用才是我們的終極目標。 如此,本文從頁面的doctype說起,到用HTML 5新標簽搭建語義化更明確的頁面的結構,再解釋了一番與頁面結構相關的新標簽。相信大家對HTML 5的結構性新標簽有了一個新的認知,如果你有興趣,那就打開你的IDE,寫上一段由HTML 5新標簽搭建的代碼,然後用CSS去描繪你的巨集偉藍圖吧!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 從今天起, 我會每天把閱讀tiny_cnn的閱讀心得提交到博客園中希望大家在這個平臺上可以多多交流; 關於如果閱讀代碼? 抓住重點,忽略細節 首先打開從github上下載的文件: 通過csdn和網上搜索一番會知道這個文件的各個目錄存放的是什麼; 我用${root} 代表到tiny-cnn-maste... ...
  • 命名空間提供了一種從邏輯上組織類的方式,防止命名衝突。 幾種常見語言 C++ 命名空間是可以嵌套的 嵌套的命名空間是指定義在其他命名空間中的命名空間。嵌套的命名空間是一個嵌套的作用域,內層命名空間聲明的名字將隱藏外層命名空間聲明的同名成員: C++ int x = 20; namespace out ...
  • 在前面幾次討論中我們介紹了Free是個產生Monad的最基本結構。它的原理是把一段程式(AST)一連串的運算指令(ADT)轉化成數據結構存放在記憶體里,這個過程是個獨立的功能描述過程。然後另一個獨立運算過程的Interpreter會遍歷(traverse)AST結構,讀取結構里的運算指令,實際運行指令 ...
  • 1 #-*- coding:utf-8 -*- 2 3 import curses 4 from random import randrange, choice # generate and place new tile 5 from collections import defaultdict 6 ...
  • 題目: 計算字元串最後一個單詞的長度,單詞以空格隔開。 輸入: 一行字元串。 輸出: 整數N,最後一個單詞的長度。 例如: hello world 輸出: 5 思路: 考慮到最後一個單詞中可能含有空格,例如: “Hello world#" (#表示空格) int lenOfLastWord(cons... ...
  • 用PHPExcel做導出execl的時候發現在本地沒有問題,但是把網站傳到租用的伺服器的時候就報錯,具體如下: 代碼如下: ...
  • 在CRM(客戶關係管理)系統或者其他業務支撐型系統的開發過程中,最經常多變的就是複雜的業務規則。因為這些規則要迎合、順應市場的變化,如何能有效到做到業務規則和整體的系統支撐架構解耦分離,這個是開發過程中必須考慮的一個問題。每當客戶要求改變一個業務規則的時候,我們又如何能做到在最短的時間內完成需求的開 ...
  • 一、引言 這裡以電視遙控器的一個例子來引出橋接模式解決的問題,首先,我們每個牌子的電視機都有一個遙控器,此時我們能想到的一個設計是——把遙控器做為一個抽象類,抽象類中提供遙控器的所有實現,其他具體電視品牌的遙控器都繼承這個抽象類,具體設計類圖如下: 這樣的實現使得每部不同型號的電視都有自己遙控器實現 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...