傳智播客上海校區深度解析Html標籤劃分

眾所周知，Html中標籤很多，每一個還可以進行相互的轉換，不僅不容易記憶，而且經常會混餚，這讓很多人頭疼不已。今天，傳智播客上海校區的老師就帶著大家一起來了解標籤分類、行內元素以及塊狀元素等知識。

根據CSS規範的規定，每一個網頁元素都有一個display屬性，用於確定該元素的型別，每一個元素都有預設的display屬性值，比如div元素，它的預設display屬性值為“block”，成為“塊級”元素（block-level）；而span元素的預設display屬性值為“inline”，稱為“行內”元素。傳智播客上海校區老師指出：div這樣的塊級元素，會自動佔據一定矩形空間，可以透過設定高度、寬度、內外邊距等屬性，來調整的這個矩形的樣子。

與之相反，像“span”“a”這樣的行內元素，則沒有自己的獨立空間，它是依附於其他塊級元素存在的，因此，對行內元素設定高度、寬度、內外邊距等屬性，都是無效的。

首先，傳智播客上海校區老師列舉了行內和塊狀元素的區別：

行內、塊狀元素區別：

（1）。塊級元素會獨佔一行，其寬度自動填滿其父元素寬度行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裡，知道一行排不下，才會換行，其寬度隨元素的內容而變化

（2）。一般情況下，塊級元素可以設定width， height屬性，行內元素設定width， height無效（注意：塊級元素即使設定了寬度，仍然是獨佔一行的）

（3）。塊級元素可以設定margin和padding。行內元素的水平方向的

padding-left，padding-right，margin-left，margin-right 都產生邊距效果，但是豎直方向的padding-top，padding-bottom，margin-top，margin-bottom都不會產生邊距效果。（水平方向有效，豎直方向無效）

對於常見的常見的塊級標籤和內聯元素，傳智播客上海校區老師也進行了詳細的劃分：

常見的塊級標籤和內聯元素

（1）。塊級標籤：

div，p，ul，ol，li，h系列標籤

（2）。內聯元素

span，a，strong，b， i 等等

以上是傳智播客老師整理的關於標籤劃分的一些常用知識點，相信有了這些清晰明瞭的知識點，大家在工作中一定能事半功倍。