<div>是HTML 中的一個標籤，全稱是"division"，用來把網頁內容劃分成不同的區塊。你可以把它理解為一個“容器”，專門用來包裹其他HTML 元素，方便整體佈局、樣式控製或者腳本操作。 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175381479337285.jpeg" class="lazy" alt="What does <!DOCTYPE html> do?"> do?" /><hr>
<h3>為什麼<code><div>很常用？<p>因為它是塊級元素（block-level element），默認會獨占一行，適合做結構劃分。比如你想做一個網頁的頭部、主體、底部，就可以分別用幾個<code><div>包起來。<p>常見的使用場景包括： </p>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175381479536791.jpeg" class="lazy" alt="What does <!DOCTYPE html> do?"> do?" /><ul>
<li>頁面整體佈局</li>
<li>分組一組元素統一加樣式</li>
<li>配合CSS 做響應式設計</li>
<li>作為JS 操作的目標區域</li>
</ul>
<p>它本身沒有語義，不像<code><header></header>或<footer></footer>那樣一看就知道用途，所以適合需要一個通用“盒子”的時候用。
怎麼配合CSS 使用？
通常我們會給<div>加上<code>class或id屬性，然後在CSS 中針對這些屬性設置樣式。例如： 
do?" />
<div class="box">這是一個區塊</div>
對應的CSS：
.box {
width: 200px;
padding: 10px;
background-color: #f0f0f0;
}這樣就能快速給這個<div>添加邊距、背景、寬度等樣式了。
和<span>有什麼區別？
簡單來說：
-
<div>是塊級元素，默認換行顯示 <span>是內聯元素，默認和文字一樣，不會換行
舉個例子：
<div>這是div 內容</div> <span>這是span 內容</span>
上面這段代碼中， div後面的內容會被擠到下一行，而span就緊跟著前面的內容顯示在同一行里。
什麼時候不該用<div> ？雖然<div>很靈活，但如果你只是想強調語義，比如表示一段文章內容，應該優先用更有意義的標籤，比如：
-
-
<section></section>
-
<header></header>
-
<footer></footer>
-
<nav></nav>
這樣不僅結構清晰，對搜索引擎和屏幕閱讀器也更友好。
基本上就這些。合理使用<div>可以幫你更好地組織頁面結構，但也別濫用，能用語義化標籤的時候盡量用。
雖然 這樣不僅結構清晰，對搜索引擎和屏幕閱讀器也更友好。 基本上就這些。合理使用<div>很靈活，但如果你只是想強調語義，比如表示一段文章內容，應該優先用更有意義的標籤，比如：
<section></section>
<header></header>
<footer></footer>
<nav></nav>
<div>可以幫你更好地組織頁面結構，但也別濫用，能用語義化標籤的時候盡量用。
