HTML 5的革新——語義化標籤(二)__HTML

HTML 5的革新之一：語義化標籤二文本元素標籤、分組元素標籤。

HTML 5的革新——語義化標籤(一)中介紹了一些HTML5新加的一些節元素，一張頁面中結構元素構成網頁大體，但是也需要其他內容來填充，譬如圖片、文本、代碼、表單、互動等等。所以接下來我們就來詳細瞭解HTML5的新增加的和重新定義的文本元素標籤、分組元素標籤等其他元素標籤。 文本字型元素

文字對SEO影響很大，而HTML5對一些文本字型元素的語義又重新定義了一遍，也增加了一些新的。那我們就來重新認識他們。 a（anchor 的縮寫）： 用於定義超連結 em(emphasis 的縮寫)：em 是句意強調，加與不加會引起語義變化，也可以理解為局部強調，用在語句某個單詞上來改變句子的側重。 strong：strong表示重要，strong 的強調則是一種隨意無順序的，看見某文時，立刻就凸顯出來的關鍵詞句。 p：p元素 b（bold 的縮寫）：b 元素原本就是加粗，現在表示“文體突出”文字，通俗將是用來在文本中高亮顯示某個或者幾個字元，旨在引起使用者的特別注意，無強調作用。譬如文檔概要中的關鍵字，評論中的產品名，以及分類名。 i（italic 的縮寫）：i 元素原本只是傾斜，現在描述為在普通文章中突出不同意見或語氣或其他的一段文本，就像劇本裡的話外音（外語、譯音），或也可以用做排版的斜體文字。 code：定義電腦代碼文本。 q（quote 的縮寫）：用於定義一段引用的內容（短內容） cite ：用於定義引用內容出自書籍或雜誌等的標題，不允許其他資訊，如作者，日期等。 u （underline 的縮寫）：定義底線文本 abbr （abbreviation 的縮寫）：定義一個縮寫文本，建議在 abbr 的 title 屬性中描述縮寫的全稱 dfn （defining instance 的縮寫）：用於定義一個術語 var ：定義電腦代碼中的變數 samp （sample 的縮寫）：由程式輸出的樣本文本 kbd （keyboard 的縮寫）：定義由鍵盤輸入的文本 wbr (word break)的縮寫：定義換行的時機 span ：沒有任何語義 br ：定義一個分行符號

以上很多隻是W3C定義，有些還不支援，但是為了徹底貫徹W3C的語義化，還是慢慢熟悉用起來吧。

文本字型元素標籤使用注意: 在下面這些元素都不適合的時候：表重要的 strong ，表強調的 em ，表標題的 h1–h6，表高亮或標記文本的 p 等，就用 b 來表示。 em 的強調是用在語句某個單詞上來改變句子的側重，可以說是局部的，而strong 和局部還是全域無關，局部強調用strong也可以，strong強調的是重要性，不會改變句意。 time元素

time元素也是文字標籤，因為是全新的標籤，所以我們單獨來介紹。time元素用來標記一篇文章的發布時間。

 <time datetime="2012-02-15" pubdate>2012年02月15日</time>

形如如上代碼，知道time標籤一般有三個組成部分 機器可識別的時間戳記：格式必須是年月日的數字以減號相隔，如果增加時間，那就在日期後面加字母T然後跟24小時格式的時間值以及時區位移量，形如datetime="2012-2-15T22:49:40+08:00" 人可識別的常值內容：格式隨意，只要能看懂。 一個可選的pubdata標記：pubdata是個布爾值，如果需要，寫上屬性名稱就好pubdata。但是為了美觀，我們也可以寫成pubdata=""

我們還要注意的是，如果該time位於一個article中，那麼它表示這篇文章的發布時間；如果不在article之中表示整個文檔的發布時間。

<article>    <header>        <h1>html5jscss網<time datetime="2012-02-14">2月14日</time>成立</h1>        <p>發布 <time datetime="2012-02-15" pubdate>2012年02月15日</time> 分類：前端交流</p>    </header>    <p>你好世界。</p></article>

time範例程式碼 分組元素標籤

我們熟悉的div、 p 、dl 、dt、dd、ol、ul、li、hr都是分組元素標籤，我們接下來看一些不常用的和新加的分組元素標籤 blockquote：標記一段長引文。標記短引文（行內引文），應採用 q 元素。 pre：pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和分行符號。而文本也會呈現為等寬字型。pre 標籤的一個常見應用就是用來表示原始碼。他跟code的關係好比blockquote和q的關係。 ol元素

ol元素在HTML5有改良，增加了兩個屬性： “start”：start屬性用來定義列表編號的起始位置， “reversed”：reversed屬性工作表示將列表進行反轉，但是目前還沒有任何一款瀏覽器對其提供支援，在這裡就不細說了。 figure元素與figcaption元素

figure元素用來包含一塊獨立內容，該內容如果被移除掉不會對周圍的內容有影響。具體來說它可以用來表示圖片，統計圖，圖表，音頻，視頻，程式碼片段等。如果需要你也可以給該內容添加一個標題，這個標題使用figcaption來表示。figcaption只能作為figure元素的子項目，可以放在figure元素內的任何位置。形如：

<figure>    <img src="" alt="" />    <figcaption>html5jscss前端網是剛建立的小站</figcaption></figure>

不是所有圖片都用figure來包裹，img 標籤也有語義的。如果純粹只是為了呈現的圖，也不在文檔其他地方引用，那就絕對不要用figure。如果和上下文有關，也可以把它移動到附錄，那就別用figure，aside可能適合。

figure元素和aside元素看起來表達的內容差不多，但是aside所能包含的內容比figure要廣。當你不知道如何選擇的時候可以這樣來做：這段內容對周圍的內容來說是一個要點，或者很重要，不可少，那麼可以使用figure，否則使用aside。

注意：

一個figure元素內最多隻允許放置一個figcaption元素，也可以不放，但是其他元素可無限放置。注意不是所有圖片都得用figure元素。 嵌入元素標籤

在頁面中除了顯示文檔活字元外，還需要放入一些其他元素，就是我們所說的嵌入元素。

嵌入元素包括img（圖片），頁面（iframe），多媒體對象將不再全部綁定在 object 或 embed 標籤 中，而是由有 video(視頻)audio（音頻），用於繪畫的 canvas 元素

這裡我們不詳細介紹它們的屬性了，以後專門介紹。

HTML5中增加了一些表單元素和一些互動元素等新的標籤，但是著重點不同，所以我們放在另一片文章來繼續瞭解。HTML5語義標籤到此結束。