本節(jié)書摘來自異步社區(qū)《Web前端開發(fā)精品課 HTML與CSS進(jìn)階教程》一書中的第1章，第1.4節(jié)，作者： 莫振杰 更多章節(jié)內(nèi)容可以訪問云棲社區(qū)“異步社區(qū)”公眾號查看。

1.4　id和class

id和class是HTML元素中兩個(gè)最基本的公共屬性。一般情況下，id和class都用來選擇元素，以便進(jìn)行CSS操作或者JavaScript操作。但是很多新手對id和class這兩個(gè)屬性感到很迷茫，不知道什么時(shí)候用id，什么時(shí)候用class，甚至隨便使用。

1.4.1　id屬性
id屬性具有唯一性，也就是說在一個(gè)頁面中相同的id只允許出現(xiàn)一次。W3C建議，對于頁面關(guān)鍵的結(jié)構(gòu)或者大結(jié)構(gòu)，我們才使用id。所謂的關(guān)鍵結(jié)構(gòu)，指的是諸如LOGO、導(dǎo)航、主體內(nèi)容、底部信息欄等結(jié)構(gòu)。對于一些小地方，還是建議使用class屬性。

我們知道搜索引擎識別一個(gè)頁面結(jié)構(gòu)，是根據(jù)標(biāo)簽的語義以及id屬性來識別的。因此id屬性不要輕易使用。此外，id的命名也十分關(guān)鍵，特別是對搜索引擎優(yōu)化而言。對于id和class的命名，我們在CSS進(jìn)階部分會詳細(xì)介紹。

1.4.2　class屬性
class，顧名思義，就是“類”。它采用的思想跟C、Java等編程語言中的“類”相似。我們可以為同一個(gè)頁面的相同元素或者不同元素設(shè)置相同的class，然后使得相同class的元素具有相同的CSS樣式。

如果你要為兩個(gè)或者兩個(gè)以上元素定義相同的樣式，建議使用class屬性。因?yàn)檫@樣可以減少大量的重復(fù)代碼。

注意，對于一個(gè)元素而言，我們可以定義多個(gè)class。一般來說，定義多個(gè)class的目的在于：一般用一個(gè)class抽取公共樣式，然后用另外一個(gè)class定義單獨(dú)樣式。

舉個(gè)例子，在一個(gè)頁面中有如圖1-2所示的三個(gè)欄目，仔細(xì)分析我們會發(fā)現(xiàn)這三個(gè)欄目具有部分相同樣式，此時(shí)我們可以使用一個(gè)class來定義公共樣式，但是這三個(gè)欄目又有各自的樣式。該怎么辦呢？這時(shí)候我們應(yīng)該為這三個(gè)欄目分別定義不同的class，以便在CSS中控制單獨(dú)的樣式。這就是多個(gè)class的用處。

https://yqfile.alicdn.com/d6241c1118424f4480e5a7086f73610a0047d816.png" >

上圖的三個(gè)欄目的HTML關(guān)鍵結(jié)構(gòu)如下：

<div class="column blog"><h2></h2><div></div> </div> <div class="column manual"><h2></h2><div></div> </div> <div class="column tool"><h2></h2><div></div> </div>

對于id和class，我們總結(jié)一下：對于頁面關(guān)鍵結(jié)構(gòu)，建議使用id；對于小地方，建議使用class。就算我們不需要對關(guān)鍵結(jié)構(gòu)進(jìn)行CSS操作或者JavaScript操作，也建議加上id，以便搜索引擎識別頁面結(jié)構(gòu)。

總結(jié)

以上是生活随笔為你收集整理的《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。