淺談html語義化標籤,Html5新增語義化標籤

標籤：

　　Html語義化標籤,Html5新增語義化標籤

自己在學習的期間,整理了下html關於語義化標籤的一些知識,列的不是很全.

希望大家有新的見解可以給我留言,我會補充上去,謝謝大家

1.什麼是語義化標籤?

那麼什麼叫做語義化呢，說的通俗點就是：明白每個標籤的用途（在什麼情況下我可以使用這個標籤才合理）比如，

網頁上的文章的標題就可以用標題標籤，網頁上的各個欄目的欄目名稱也可以使用標題標籤。

文章中內容的段落就得放在段落標籤中，在文章中有想強調的文本，就可以使用em標籤表示強調等等。

 

2.為啥使用語義化標籤?

1. 更容易被搜尋引擎收錄。

2. 更容易讓螢幕助讀程式讀出網頁內容。

3. 能夠更好的體現頁面的主題

4.相容性更好，支援更多的網路裝置

3.html語義化標籤

1):<a>標籤:實現超連結

強調:title屬性的作用，滑鼠滑過連結文字時會顯示這個屬性的常值內容。這個屬性在實際網頁開發中作用很大，主要方便搜尋引擎瞭解連結地址的內容（語義化更友好）

 

2):<p>標籤:文章段落放到<p>標籤中

 

3):<hx>標籤:文章標題,欄目標題用<hx>表示

 標題標籤一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。

 

4):<strong>和<em>標籤:特彆強調某幾個文字

但兩者在強調的語氣上有區別:<em> 表示強調，<strong> 表示更強烈的強調。並且在瀏覽器中<em> 預設用斜體表示，<strong> 用粗體表示。

兩個標籤相比，目前國內前端程式員更喜歡使用<strong>表示強調。

 

5):<q>標籤:短文本引用

 注意要引用的文本不用加雙引號，瀏覽器會對q標籤自動添加雙引號

 

6):<blockquote>標籤:長文本引用

注意瀏覽器對<blockquote>標籤的解析是縮排樣式

 

7):<address>標籤:為網頁加入地址資訊

 

8):<ul>標籤:無序列表

 

9):<ol>標籤:有序列表

 

10):<caption>標籤:為表格添加標題和摘要

摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜尋引擎更好的讀懂表格內容，還可以使螢幕助讀程式更好的協助特殊使用者讀取表格內容。

    文法：<table summary="表格簡介文本">

標題用以描述表格內容，標題的顯示位置：表格上方。

    文法：<caption>標題文本</caption>

 

 4.Html5語義化標籤

 1):article標籤:裝載顯示一個獨立的文章內容。

例如一篇完整的論壇文章，一則網站新聞，一篇部落格文章等等，一個使用者評論等等 artilce可以嵌套，則內層的artilce對外層的article標籤有隸屬的關係。

例如，一個部落格文章，可以用article顯示，然後一 些評論可以以article的形式嵌入其中。

<article><h1>文章標題</h1>這是一篇文章   <article>評論1...</article>    <article>評論2...</article></article>

 

2):section 標籤:定義文檔中的節（section、區段）。比如章節、頁首、頁尾或文檔中的其他部分。 

 執行個體:

<section>   <h1>章節一</h1>    <p>詳細內容...</p></section><section>   <h1>章節二</h1>    <p>詳細內容...</p></section>

3):aside 標籤: 用來裝載非本文類的內容。例如廣告，成組的連結，側邊欄等等。

 

4):hgroup 標籤:用於對網頁或區段的標題元素（h1-h6）進行組合。

例如，在一個區段中你有連續的h系列的標籤元素，則可以用hgroup將他們括起來。

<hgroup><h1>標題1</h1><h2>標題2</h2></hgroup>

 

5):header 標籤:定義文檔的頁面組合，通常是一些引導和導航資訊。

 

6):footer 標籤:定義 section 或 document 的頁尾。

　　在典型情況下，該元素會包含創作者的姓名、文檔的創作日期以及/或者聯絡資訊。

執行個體:

<footer> © 2012 Baidu 使用百度前必讀 京ICP證030173號 </footer>

 

7):nav 標籤:導航連結放在nav標籤裡。

nav標籤裡應該放入一些當前頁面的主要導航連結。

例如在頁尾顯示一個網站的導航連結（如首頁，服務資訊頁面，著作權資訊頁面等等），就可以使用nav標籤，當然，這不是必須的。

 

8):time 標籤:定義西曆的時間（24 小時制）或日期，時間和時區位移是可選的。

該元素能夠以機器可讀的方式對日期和時間進行編碼,搜尋引擎也能夠產生更智能的搜尋結果

 

9):mark 標籤:定義帶有記號的文本。請在需要反白文本時使用 <mark> 標籤。

 

10):figure標籤:規定獨立的流內容（映像、圖表、照片、代碼等等）。

figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。

 

11):figcaption 標籤:定義 figure 元素的標題（caption）。

"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子項目的位置。

執行個體：

<figure> <figcaption>美女圖片</figcaption> <img src="meizi.jpg" width="350" height="234" /></figure>

 

淺談html語義化標籤,Html5新增語義化標籤