2.1.2 語義元素
2.1.2 語義元素
語義元素是指清楚地向?yàn)g覽器和開發(fā)者描述其意義的元素，如標(biāo)題元素、段落元素、列表元素等。有些語義元素在網(wǎng)頁中可以呈現(xiàn)顯示效果，有些沒有顯示效果。
元素的語義化能夠呈現(xiàn)出很好的內(nèi)容結(jié)構(gòu)，語義化使得代碼更具有可讀性，讓其他開發(fā)人員更容易理解HTML結(jié)構(gòu)，從而減少差異化；方便其他設(shè)備解析，如屏幕閱讀器、盲人閱讀器、移動設(shè)備等，以有意義的方式來渲染網(wǎng)頁。爬蟲還可以依賴標(biāo)簽來確定關(guān)鍵字的權(quán)重，以便抓取更多的有效信息。
有100多個HTML語義元素可供選擇。語義元素分為塊級元素、行內(nèi)（內(nèi)聯(lián)）元素、行內(nèi)塊元素等。
1.塊級元素（block）
塊級元素是指本身屬性為display：block的元素。因?yàn)樗陨淼奶攸c(diǎn)，通常使用塊級元素進(jìn)行大布局（大結(jié)構(gòu)）的搭建。塊級元素的特性如下。
1）每個塊級元素總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示。
2）塊級元素可以直接控制寬度（width）、高度（height）及盒子模型的相關(guān)CSS屬性，內(nèi)邊距（padding）和外邊距（margin）等都可控制。
3）在不設(shè)置寬度的情況下，塊級元素的寬度是其父級元素內(nèi)容的寬度。
4）在不設(shè)置高度的情況下，塊級元素的高度是其本身內(nèi)容的高度。
常用的塊級元素主要有p、div、ul、ol、li、dl、dt、dd、h1～h6、hr、form、address、pre、table、blockquote、center、dir、fieldset、isindex、menu、noframes、noscript等。
2.行內(nèi)元素（inline）
行內(nèi)元素也稱內(nèi)聯(lián)元素，是指本身屬性為display：inline的元素，行內(nèi)元素可以和相鄰的行內(nèi)元素在同一行，對寬、高屬性值不生效，完全靠內(nèi)容撐開寬、高。因?yàn)樾袃?nèi)元素自身的特點(diǎn)，通常使用塊級元素來進(jìn)行文字、小圖標(biāo)（小結(jié)構(gòu)）的搭建。行內(nèi)元素的特性如下。
1）行內(nèi)元素會與其他行內(nèi)元素從左到右在一行顯示。
2）行內(nèi)元素不能直接控制寬度（width）、高度（height）及盒子模型的相關(guān)CSS屬性，例如，內(nèi)邊距的top、bottom（padding-top、padding-bottom）和外邊距的top、bottom（margin-top、margin-bottom）都不可改變，但可以設(shè)置內(nèi)/外邊距的水平方向的值。也就是說，對于行內(nèi)元素的margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的，但是豎直方向的margin和padding無效。
3）行內(nèi)元素的寬、高是由本身內(nèi)容（文字、圖片等）的大小決定的。
4）行內(nèi)元素只能容納文本或其他行內(nèi)元素（不能在行內(nèi)元素中嵌套塊級元素）。
常用的行內(nèi)元素主要有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標(biāo)簽歸類的限制，自由地在不同標(biāo)簽或元素上應(yīng)用需要的屬性。常用的CSS樣式有以下3個。
display：block：顯示為塊級元素。
display：inline：顯示為行內(nèi)元素。
display：inline-block：顯示為行內(nèi)塊元素。表現(xiàn)為同行顯示并可修改寬、高、內(nèi)/外邊距等屬性。例如，將ul元素加上display：inline-block樣式，原本垂直的列表就可以水平顯示了。
3.行內(nèi)塊元素
行內(nèi)塊元素結(jié)合行內(nèi)元素和塊級元素，不僅可以對寬和高屬性值生效，還可以多個元素存在一行顯示。行內(nèi)塊元素能和其他元素放在一行，可以設(shè)置寬、高。常用的行內(nèi)塊元素有img、input、textarea等。
塊級元素可以嵌套行內(nèi)元素，行內(nèi)元素不可以嵌套塊級元素。
4.可變元素
可變元素根據(jù)上下文關(guān)系確定該元素是塊級元素還是行內(nèi)元素，主要有applet、button、del、iframe、ins、map、object、script等。
5.HTML5中新增的結(jié)構(gòu)語義元素
在HTML5之前，頁面只能用div元素作為結(jié)構(gòu)元素來分隔不同的區(qū)域，由于div元素?zé)o任何語義，給設(shè)計(jì)者和閱讀代碼者帶來困擾，所以在HTML5中增加了結(jié)構(gòu)語義元素。HTML5增加的結(jié)構(gòu)語義元素明確了一個Web頁面的不同部分，如圖2-2所示。
圖2-2 結(jié)構(gòu)語義元素
HTML5常用的語義結(jié)構(gòu)元素如下。
1）header元素用于定義文件的頭部區(qū)域，為文件或節(jié)規(guī)定頁眉，常被用作介紹性內(nèi)容的容器，可以包含標(biāo)題元素、Logo、搜索框等。一個文件中可以有多個header元素。
2）nav元素用于定義頁面的導(dǎo)航鏈接部分區(qū)域，導(dǎo)航有頂部導(dǎo)航、底部導(dǎo)航、側(cè)邊導(dǎo)航等。
3）article元素用于定義文件內(nèi)獨(dú)立的文章，可以是新聞、條件、用戶評論等。
4）section元素用于定義文件中的一個區(qū)域或節(jié)。節(jié)是有主題的內(nèi)容組，通常有標(biāo)題。可以將網(wǎng)站首頁劃分為簡介、內(nèi)容、聯(lián)系信息等節(jié)。
5）aside元素用于定義頁面主區(qū)域內(nèi)容之外的內(nèi)容（如側(cè)邊欄）。<aside>標(biāo)簽的內(nèi)容是獨(dú)立的，與主區(qū)域的內(nèi)容無關(guān)。
6）footer元素用于定義文件的底部區(qū)域，一個頁腳通常包含文件的作者、著作權(quán)信息、鏈接的使用條款鏈接、聯(lián)系信息等，文件中可以使用多個footer元素。
7）figure元素用于定義一段獨(dú)立的引用內(nèi)容，經(jīng)常與figcaption元素配合使用，通常用在主文本的圖片、代碼、表格等中。就算這部分內(nèi)容被轉(zhuǎn)移或刪掉，也不會影響到主體。
8）figcaption元素用于表示與其相關(guān)聯(lián)引用的說明或標(biāo)題，描述其父節(jié)點(diǎn)figure元素中的其他內(nèi)容。figcaption元素應(yīng)該被置于figure元素的第一個或最后一個子元素的位置。
9）main元素用于規(guī)定文件的主內(nèi)容。
10）mark元素用于定義重要的或強(qiáng)調(diào)的文本。
11）details元素用于定義用戶能夠查看或隱藏的額外細(xì)節(jié)。
12）summary元素用于定義details元素的可見標(biāo)題。
13）time元素用于定義日期或時間。
以上元素中除了figcaption元素，其他都是塊級元素。