文章の目錄

• 1、什么是div標簽和span標簽
• 2、基本語法格式
• 3、常見的屬性
• 4、瀏覽器兼容性
• 5、使用場景
• 6、總結
• 寫在最后

---

div 和 span 是沒有語義的，是我們網頁布局主要的2個盒子，想必你一定聽過 css + div。

div 是 division 的縮寫，具有分割、分區的意思。
span，具有跨度，跨距，范圍的意思。

1、什么是div標簽和span標簽

<div> 標簽（或 HTML 文檔分區元素）是一個通用型的流內容容器，在不使用 CSS 的情況下，其對內容或布局沒有任何影響。
<span> 標簽是短語內容的通用行內容器，并沒有任何特殊語義。

2、基本語法格式

<div>這是div</div> <span>這是span</span>

3、常見的屬性

div 和 span 標簽支持 HTML 中的全局屬性。

注意：

div 的 align 屬性已廢棄；請勿使用。應當使用 CSS Grid 或 CSS Flexbox 來對齊、定位頁面上的 <div> 元素；

4、瀏覽器兼容性

5、使用場景

<div> 元素在語義上不表示任何特定類型的內容。div 可以將內容分組，從而可以使用 class 或是 id 屬性方便的定義內容的格式，也可以在一段文檔中劃分標記出使用另一種語言書寫的內容（使用lang 屬性）等等；

<div> 元素應當僅在沒有任何其它語義元素（比如 <article> 或 <nav>）時使用；

span 可以用來編組元素以達到某種樣式意圖（通過使用類或者 id 屬性），或者這些元素有著共同的屬性，比如 lang。應該在沒有其他合適的語義元素時才使用它。<span> 與 <div> 標簽很相似，但 <div> 是一個塊元素，而 <span> 則是行內元素 。

6、總結

這兩個都是盒子，用來裝我們網頁元素的，只不過他們有區別，現在我們主要記住使用方法和特點就好了。

• div 標簽，是用來布局的，但是現在一行只能放一個 div；
• div 的開始標簽和結束標簽都不能省略；
• span 標簽，也是用來布局的，一行上可以放好多個 span；
• span 的開始標簽和結束標簽都不能省略；

寫在最后

如果你感覺文章不咋地//(ㄒoㄒ)//，就在評論處留言，作者繼續改進；o_O???
如果你覺得該文章有一點點用處，可以給作者點個贊；\\*^o^*//
如果你想要和作者一起進步，可以微信掃描二維碼，關注前端老L；~~~///(^v^)\\\~~~
謝謝各位讀者們啦(^_^)∠※！！！

總結

以上是生活随笔為你收集整理的HTML系列之div和span标签的全部內容，希望文章能夠幫你解決所遇到的問題。

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