《Web前端開發精品課 HTML與CSS進階教程》——1.3 div和span

本節書摘來自異步社群《web前端開發精品課 html與css進階教程》一書中的第1章，第1.3節，作者： 莫振傑 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

對于div和span這兩個元素，不少新手也不知道它們之間有什麼差別，使用起來也很随便。是以，這裡有必要簡單介紹一下。

div和span沒有任何語義，正是因為沒有語義，這兩個标簽一般都是配合css來定義元素樣式的。

div和span差別如下。

（1）div是塊元素，可以包含任何塊元素和行内元素，不會與其他元素位于同一行；span是行内元素，可以與其他行内元素位于同一行。

（2）div常用于頁面中較大塊的結構劃分，然後配合css來操作；span一般用來包含文字等，它沒有結構的意義，純粹是應用樣式。當其他行内元素都不适合的時候，可以用span來配合css操作。

其實，除了div和span外，還有一個label标簽。div和span是無語義标簽，但label是有語義标簽。label隻适用于表單中，用于顯示在輸入控件旁邊的說明性文字。關于label标簽，我們在後面“2.5　表單語義化”一節會詳細介紹。

舉例：

https://yqfile.alicdn.com/2942ef442148db56338b5e3eced768be14fd1363.png" >

在浏覽器預覽效果如圖1-1所示。

https://yqfile.alicdn.com/527699ddb511959e0b74b8d5abc8ee630672d79d.png" >

分析：

在這個例子中，我們想要對“視覺化思考”這幾個文字加粗或者改變顔色，此時可以使用span包含文字，然後再進行樣式修改。事實上，span标簽往往都是用來配合css來修飾元素的。

對于div和span，大家經過一些實踐，自然而然會有更深刻的了解，在此就不啰嗦了。