HTML、CSS學習（一）語義化的Html

語義化的Html

1、什麼是語義化的Html

語義化，就是要根據網頁中具體的內容，選擇合適的標籤。即根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化），以便於開發者閱讀和寫出更優雅的代碼，同時讓瀏覽器的爬蟲和機器很好的解析。

2、Html語義化的目的是什麼？

1.實現裸奔：即在沒有CSS的狀況下，頁面也能呈現出較好的內容結構、代碼結構。

2.方便其它設備的解析，例如屏幕閱讀器等

3.有利於網絡爬蟲進行有效信息的抓取。

4.便於團隊開發和維護

3、如何語義化？

• 儘量少的使用無語義的標籤div和span；
• 在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；
• 不要使用純樣式標籤，如：b、font、u等，改用css設置。
• 須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
• 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td；
• 表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
• 每一個input標籤對應的說明文本都須要使用label標籤，而且經過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來。

4、Html5新增語義化標籤

一、header元素

header元素表明「網頁「和」section」的頁眉。一般包含H1~H6元素或者hgroup元素。做爲整個頁面或者內容塊的標題，也能夠包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。整個頁面沒有限制header元素的個數，能夠擁有多個，能夠爲每一個內容塊增長一個header元素

header使用注意：

•能夠是「網頁」或任意「section」的頭部部分；

•沒有個數限制。

•若是hgroup或h1-h6本身就能工做的很好，那就不要用header。

二、footer元素

footer元素表明「網頁」或「section」的頁腳，一般含有該頁面的一些基本信息，例如：文檔創做者的姓名、文檔的版權信息、使用條款的連接、聯繫信息等等。。

footer使用注意：

•能夠是「網頁」或任意「section」的底部部分；

•沒有個數限制，除了包裹的內容不同，其餘跟header相似。

三、hgroup元素

hgroup元素表明「網頁」或「section」的標題，當元素有多個層級時，該元素能夠將h1到h6元素放在其內，譬如文章的主標題和副標題的組合

hgroup使用注意：

•若是隻須要一個h1-h6標籤就不用hgroup

•若是有連續多個h1-h6標籤就用hgroup

•若是有連續多個標題和其餘文章數據，h1-h6標籤就用hgroup包住，和其餘文章元數據一塊兒放入header標籤

四、nav元素

nav元素表明頁面的導航連接區域。用於定義頁面的主要導航部分。可是我在有些時候卻不由自主的想用它，譬如：側邊欄上目錄，麪包屑導航，搜索樣式，或者下一篇上一篇文章，可是事實上規範上說nav只能用在頁面主要導航部分上。頁腳區域中的連接列表，雖然指向不一樣網站的不一樣區域，譬如服務條款，版權頁等，這些footer元素就可以用了。

nav使用注意：

•用在整個頁面主要導航部分上，不合適就不要用nav元素；

五、aside元素

aside元素被包含在article元素中做爲主要內容的附屬信息部分，其中的內容能夠是與當前文章有關的相關資料、標籤、名詞解釋等。（特殊的section）

在article元素以外使用做爲頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容能夠是日誌串連，其餘組的導航，甚至廣告，這些內容相關的頁面。

aside使用總結：

•aside在article內表示主要內容的附屬信息，

•在article以外則可作側邊欄，沒有article與之對應，最好不用。

•若是是廣告，其餘日誌連接或者其餘分類導航也能夠用

六、article元素

article元素最容易跟section和div容易混淆，其實article表明一個在文檔，頁面或者網站中自成一體的內容，其目的是爲了讓開發者獨立開發或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的widget小工具。（特殊的section）

除了它的內容，article會有一個標題（一般會在header裏），會有一個footer頁腳。

article使用注意：

•自身獨立的狀況下：用article

•是相關內容：用section

•沒有語義的：用div

另外，說一下，HTML5其餘結構元素標籤

HTML5節元素標籤包括body article nav aside section header footer hgroup ，還有h1-h6和address。

•address表明區塊容器，必須是做爲聯繫信息出現，郵編地址、郵件地址等等,通常出如今footer。demo

•h1-h6由於hgroup，section和article的出現，h1-h6定義也發生了變化，容許一張頁面出現多個h1。