2.1.2 語義元素

語義元素是指清楚地向瀏覽器和開發者描述其意義的元素，如標題元素、段落元素、列表元素等。有些語義元素在網頁中可以呈現顯示效果，有些沒有顯示效果。

元素的語義化能夠呈現出很好的內容結構，語義化使得代碼更具有可讀性，讓其他開發人員更容易理解HTML結構，從而減少差異化；方便其他設備解析，如屏幕閱讀器、盲人閱讀器、移動設備等，以有意義的方式來渲染網頁。爬蟲還可以依賴標簽來確定關鍵字的權重，以便抓取更多的有效信息。

有100多個HTML語義元素可供選擇。語義元素分為塊級元素、行內（內聯）元素、行內塊元素等。

1.塊級元素（block）

塊級元素是指本身屬性為display：block的元素。因為它自身的特點，通常使用塊級元素進行大布局（大結構）的搭建。塊級元素的特性如下。

1）每個塊級元素總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示。

2）塊級元素可以直接控制寬度（width）、高度（height）及盒子模型的相關CSS屬性，內邊距（padding）和外邊距（margin）等都可控制。

3）在不設置寬度的情況下，塊級元素的寬度是其父級元素內容的寬度。

4）在不設置高度的情況下，塊級元素的高度是其本身內容的高度。

常用的塊級元素主要有p、div、ul、ol、li、dl、dt、dd、h1～h6、hr、form、address、pre、table、blockquote、center、dir、fieldset、isindex、menu、noframes、noscript等。

2.行內元素（inline）

行內元素也稱內聯元素，是指本身屬性為display：inline的元素，行內元素可以和相鄰的行內元素在同一行，對寬、高屬性值不生效，完全靠內容撐開寬、高。因為行內元素自身的特點，通常使用塊級元素來進行文字、小圖標（小結構）的搭建。行內元素的特性如下。

1）行內元素會與其他行內元素從左到右在一行顯示。

2）行內元素不能直接控制寬度（width）、高度（height）及盒子模型的相關CSS屬性，例如，內邊距的top、bottom（padding-top、padding-bottom）和外邊距的top、bottom（margin-top、margin-bottom）都不可改變，但可以設置內/外邊距的水平方向的值。也就是說，對于行內元素的margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的，但是豎直方向的margin和padding無效。

3）行內元素的寬、高是由本身內容（文字、圖片等）的大小決定的。

4）行內元素只能容納文本或其他行內元素（不能在行內元素中嵌套塊級元素）。

常用的行內元素主要有a、span、em、strong、b、i、u、label、br、abbr、acronym、bdo、big、br、cite、code、dfn、em、font、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、var等。

利用CSS可以擺脫上面HTML標簽歸類的限制，自由地在不同標簽或元素上應用需要的屬性。常用的CSS樣式有以下3個。

display：block：顯示為塊級元素。

display：inline：顯示為行內元素。

display：inline-block：顯示為行內塊元素。表現為同行顯示并可修改寬、高、內/外邊距等屬性。例如，將ul元素加上display：inline-block樣式，原本垂直的列表就可以水平顯示了。

3.行內塊元素

行內塊元素結合行內元素和塊級元素，不僅可以對寬和高屬性值生效，還可以多個元素存在一行顯示。行內塊元素能和其他元素放在一行，可以設置寬、高。常用的行內塊元素有img、input、textarea等。

塊級元素可以嵌套行內元素，行內元素不可以嵌套塊級元素。

4.可變元素

可變元素根據上下文關系確定該元素是塊級元素還是行內元素，主要有applet、button、del、iframe、ins、map、object、script等。

5.HTML5中新增的結構語義元素

在HTML5之前，頁面只能用div元素作為結構元素來分隔不同的區域，由于div元素無任何語義，給設計者和閱讀代碼者帶來困擾，所以在HTML5中增加了結構語義元素。HTML5增加的結構語義元素明確了一個Web頁面的不同部分，如圖2-2所示。

圖2-2 結構語義元素

HTML5常用的語義結構元素如下。

1）header元素用于定義文件的頭部區域，為文件或節規定頁眉，常被用作介紹性內容的容器，可以包含標題元素、Logo、搜索框等。一個文件中可以有多個header元素。

2）nav元素用于定義頁面的導航鏈接部分區域，導航有頂部導航、底部導航、側邊導航等。

3）article元素用于定義文件內獨立的文章，可以是新聞、條件、用戶評論等。

4）section元素用于定義文件中的一個區域或節。節是有主題的內容組，通常有標題。可以將網站首頁劃分為簡介、內容、聯系信息等節。

5）aside元素用于定義頁面主區域內容之外的內容（如側邊欄）。<aside>標簽的內容是獨立的，與主區域的內容無關。

6）footer元素用于定義文件的底部區域，一個頁腳通常包含文件的作者、著作權信息、鏈接的使用條款鏈接、聯系信息等，文件中可以使用多個footer元素。

7）figure元素用于定義一段獨立的引用內容，經常與figcaption元素配合使用，通常用在主文本的圖片、代碼、表格等中。就算這部分內容被轉移或刪掉，也不會影響到主體。

8）figcaption元素用于表示與其相關聯引用的說明或標題，描述其父節點figure元素中的其他內容。figcaption元素應該被置于figure元素的第一個或最后一個子元素的位置。

9）main元素用于規定文件的主內容。

10）mark元素用于定義重要的或強調的文本。

11）details元素用于定義用戶能夠查看或隱藏的額外細節。

12）summary元素用于定義details元素的可見標題。

13）time元素用于定義日期或時間。

以上元素中除了figcaption元素，其他都是塊級元素。