檔聲明，定義和用法

• 聲明必須位于 HTML5 文檔中的第一行，也就是位于 標簽之前。該標簽告知瀏覽器文檔所使用的 HTML 規范。

• doctype 聲明不屬于 HTML 標簽; 它是一條指令，告訴瀏覽器編寫頁面所用的標記的版本。

• 在所有 HTML 文檔中規定 doctype 是非常重要的，這樣瀏覽器就能了解預期的文檔類型。

• HTML 4.01 中的 doctype 需要對 DTD 進行引用，因為 HTML 4.01 基于 SGML。而 HTML5不基于 SGML，因此不需要對 DTD 進行引用，但是需要 doctype 來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行。）。

結構性標簽

結構性標簽（construct tag）主要負責Web的上下文結構的定義，確保 HTML文檔的完整性，這類標簽包括以下幾個:

• section。用于表達書的一部分或一章，或者一章內的一節。在Web頁面應用中，該標簽也可以用于區域的章節表述。

• hgroup 對網頁或區段（section）的標題進行組合：。

• header。頁面主體上的頭部，注意區別于head標簽。這里可以給初學者提供一個判斷的小技巧：head標簽中的內容往往是不可見的，而header標簽往往在一對body標簽之中。

• footer。頁面的底部（頁腳）。通常，人們會在這里標出網站的一些相關信息，例如關于我們、法律申明、郵件信息、管理入口等。

• nav。是專門用于菜單導航、鏈接導航的標簽，是navigator的縮寫。

• article。用于表示一篇文章的主體內容，一般為文字集中顯示的區域

塊級性標簽

級塊性標簽（block tag）主要完成Web頁面區域的劃分，確保內容的有效分隔，這類標簽包括以下幾個:

• aside。用以表達注記、貼士、側欄、摘要、插入的引用等作為補充主體的內容。從一個簡單頁面顯示上看，就是側邊欄，可以在左邊，也可以在右邊。從一個頁面的局部看，就是摘要。

• figure 標簽規定獨立的流內容，通常與figcaption聯合使用。

• code。表示一段代碼塊。

• dialog 對話標簽 配合dt dd標簽使用

行內標簽。

行內語義性標簽（in-line tag ）主要完成Web頁面具體內容的引用和表述，是豐富內容展示的基礎，這類標簽包括以下幾個:

• meter。表示特定范圍內的數值，可用于工資、數量、百分比等 max表示最大值，min表示最小值，value代表當前值。

• time。表示時間值，屬性datetime強調時間

• progress。用來表示進度條

多媒體標簽

• video。視頻標簽，用于支持和實現視頻（含視頻流）文件的直接播放，支持緩沖預載和多種視頻媒體格式，例如MPEG-4、OggV和WebM等。

• audio。音頻標簽，用于支持和實現音頻（音頻流）文件的直接播放，支持緩沖預載和多種音頻媒體格式。

列表標簽

• datalist 標簽定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。

• 所有主流瀏覽器都支持datalist標簽，除了internet Explorer 和 Safari。

交互性標簽

交互性標簽（interactive tag）主要用于功能性的內容表達，會有一定的內容和數據的關聯，是各種事件的基礎，這類標簽包括以下幾個:

• menu。主要用于交互菜單（這是一個曾被廢棄現在又被重新啟用的標簽）。

• command。用來處理命令按鈕。

下期預告（假期到了，大家可以先放下編程學習，出去走走，聽聽Tommy講講自己的故事）：

一個迷茫大學生進入編程世界的心路歷程

番外篇：說說愚人節

其實，對于現在國人過洋節的興致大于傳統節日，我真的沒什么好說的。不知道是開放帶來的進步，還是我們對文化的失守。Tommy不做憤青，是提倡大家追求洋文化的同時，要做到對自我文化的堅守。

們都知道，對于更新及時的信息列表，顯示什么時候發出的，尤為重要。比如：微博更新信息，會顯示幾秒鐘之前、幾分鐘之前、幾小時之前等。這不僅可以顯示信息的及時性，對于用戶體驗也是極好的。就如下圖所示：

消息提示時間戳

對于顯示這樣的列表，時間戳，隨著時間的推移（頁面不刷新），也需要自動更新。對于這個需求，我們肯定是要在本地瀏覽器來處理的，非即時消息不需要服務器中轉的。

對于這樣的小需求，你可以js來實現，不是太麻煩。不過，這么，推薦一個成熟的時間戳自動更新插件：jquery-timeago。

那么什么是jquery-timeago.js呢？

它是一款jQuery插件，可以輕松支持自動更新模糊時間戳（例如：1分鐘前 或者 約1天前）。

不管當前頁面停留多長時間，它都會自動更新，以顯示時效性，它利用瀏覽器頁面緩存來計算時間。

你可以使用HTML5的標準標簽（比如：time）。

那么怎么使用它呢？

首先，你需要到github上搜索：jquery-timeago，然后引入到頁面中。

使用jquery-timeago的步驟

通過上邊的介紹，你就可以輕松的使用自動更新模糊時間戳了。

功能雖然小，但是也算一個產品體驗的改進，如果你項目中有需要，不妨試一下。

至此，就簡單介紹完了，這個輕巧的小功能插件了。

此圖來自網絡

想要及時了解新內容，請關注我們。也歡迎轉發、收藏、評論。

們都知道，想要成為一名合格的前端開發人員，掌握好HTML5是一個重要的先決條件，相比較于HTML，HTML5中新增了許多功能標簽，那么這么標簽都有哪些呢？

格式：

<bdi>定義文本的文本方向，使其脫離其周圍文本的方向設置。

<mark>定義有記號的文本。

<meter>定義預定義范圍內的度量。

<progress>定義任何類型的任務的進度。

<rp>定義若瀏覽器不支持 ruby 元素顯示的內容。

<rt>定義 ruby 注釋的解釋。

<ruby>定義 ruby 注釋。

<time>定義日期/時間。

<wbr>定義可能的換行符。

表單：

<datalist>定義下拉列表。

<keygen>定義生成密鑰。

<output>定義輸出的一些類型。

圖像：

<canvas>定義圖形。

<figcaption>定義 figure 元素的標題。

<figure>定義媒介內容的分組，以及它們的標題。

音頻和視頻：

<audio>定義聲音內容。

<source>定義媒介源。

<track>定義用在媒體播放器中的文本軌道。

<video>定義視頻。

鏈接：

nav>定義導航鏈接。

列表：

<command>定義命令按鈕。

樣式：

<header>定義section或page的頁眉。

<footer>定義section或page的頁腳。

<section>定義section。

<article>定義文章。

<aside>定義頁面內容之外的內容。

<details>定義元素的細節。

<dialog定義對話框或窗口。

<summary>為 <details> 元素定義可見的標題。

編程：

<embed>為外部應用程序（非HTML）定義容器。

HTML5的優勢：

1、做出更多好看的動畫效果，讓前端開發人員實現更好的頁面交互

HTML5實現的網頁更加的精美，這些動畫是基于HTML5標簽和CSS3樣式共同實現的效果。

2、解決了跨瀏覽器問題

跨瀏覽器問題在HTML5出現之前，對于前端開發人員來說，絕對是一個噩夢級的問題。明明在一個瀏覽器中完全正常運行的HTML、CSS和JavaScript頁面，但換一個瀏覽器之后，就會出現很多問題，比如：JavaScript運行出錯、頁面布局混亂等。改變了這種局面的正是HTML5編程語言，目前主流瀏覽器如Internet Explorer、Chorme、Firefox、Safari都表現出對HTML5的極大熱情。

3、跨平臺、離線使用

HTML5 可以做到跨平臺，多數核心代碼不用重寫，JavaScript的代碼用得好的話，在許多地方都可以用到，包括移動應用、移動網站、PC網站、各種瀏覽器插件，甚至可以用WebKit封裝作為跨平臺的應用程序。雖然這種方式在嚴格意義上來講并非是完全跨平臺，但這樣也在后期的維護上可以節省出量的時間和精力。

用戶可以離線使用、訪問應用，這對于無法隨時保持聯網狀態的移動終端用戶來說是很重要的，且用戶訪問本地的緩存文件，通常意味著更快的訪問速度，從這個角度來說，可謂是大大提高了用戶的體驗度。