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

1.4　id和class

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

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

我們知道搜索引擎識別一個頁面結構，是根據標簽的語義以及id屬性來識別的。因此id屬性不要輕易使用。此外，id的命名也十分關鍵，特別是對搜索引擎優化而言。對于id和class的命名，我們在CSS進階部分會詳細介紹。

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

如果你要為兩個或者兩個以上元素定義相同的樣式，建議使用class屬性。因為這樣可以減少大量的重復代碼。

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

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

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

上圖的三個欄目的HTML關鍵結構如下：

<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，我們總結一下：對于頁面關鍵結構，建議使用id；對于小地方，建議使用class。就算我們不需要對關鍵結構進行CSS操作或者JavaScript操作，也建議加上id，以便搜索引擎識別頁面結構。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。