：語法

2：作用

div 標(biāo)簽可以用來劃分 HTML 結(jié)構(gòu)，從而配合 CSS 來整體控制某一塊的樣式。

div 標(biāo)簽是塊級(jí)元素，它可用做組合其它 HTML 元素的容器。

div 標(biāo)簽可以用作嚴(yán)格的組織工具，如果用 id 或 class 來標(biāo)記 div 標(biāo)簽，則 div 標(biāo)簽的作用會(huì)更加完美。

3：例子

我們以 “堅(jiān)持就是勝利” 這句話的中英文書寫方式為例，看一下 div 是如何劃分結(jié)構(gòu)的

首先先看一下編輯器效果，如下

再來看一下瀏覽器的運(yùn)行效果，如下

如果我們把 div 標(biāo)簽去掉，只用段落標(biāo)簽 p 來實(shí)現(xiàn)，其實(shí)瀏覽器的運(yùn)行效果是一樣的，那我們?yōu)槭裁催€要用 div 標(biāo)簽?zāi)?，這不是多此一舉嗎？

其實(shí)不然，這是在代碼量比較少的情況下，兩者的差距不明顯，但如果代碼有成百上千行的時(shí)候，就體現(xiàn)到了 div 標(biāo)簽劃分結(jié)構(gòu)的作用，同時(shí)也使代碼更具有邏輯性。

總結(jié)來說，div 標(biāo)簽最重要的用途是劃分區(qū)域，然后再結(jié)合 CSS ，針對(duì)指定區(qū)域進(jìn)行樣式控制。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取

原文鏈接：https://blog.csdn.net/qq_42351033/article/details/102680545

例

文檔中的一個(gè)區(qū)域?qū)@示為藍(lán)色：

<divstyle="color:#0000FF"><h3>這是一個(gè)在 div 元素中的標(biāo)題。</h3><p>這是一個(gè)在 div 元素中的文本。</p></div>

瀏覽器支持

所有主流瀏覽器都支持 <div> 標(biāo)簽。

標(biāo)簽定義及使用說明

<div> 標(biāo)簽定義 HTML 文檔中的一個(gè)分隔區(qū)塊或者一個(gè)區(qū)域部分。

<div>標(biāo)簽常用于組合塊級(jí)元素，以便通過 CSS 來對(duì)這些元素進(jìn)行格式化。

提示和注釋

提示：<div> 元素經(jīng)常與 CSS 一起使用，用來布局網(wǎng)頁。

注釋：默認(rèn)情況下，瀏覽器通常會(huì)在 <div> 元素前后放置一個(gè)換行符。然而，您可以通過使用 CSS 改變這種情況。

HTML 4.01 與 HTML5之間的差異

HTML5 中不支持 align 屬性。

在 HTML 4.01 中，align 屬性 已廢棄。

屬性

全局屬性

<div> 標(biāo)簽支持 HTML 的全局屬性。

事件屬性

<div> 標(biāo)簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

篇文章我們要說的就是這html中運(yùn)用也是使用最多的標(biāo)簽div，我們接下來重點(diǎn)介紹下div的作用，以及如何給div合理的命名，讓代碼結(jié)構(gòu)更加清晰明了。

1）認(rèn)識(shí)div的作用

使用語法：<div>元素內(nèi)容</div>

在網(wǎng)頁制作過程過中，我們可以把一些獨(dú)立的邏輯部分劃分出來，放在一個(gè)<div>標(biāo)簽中，這個(gè)<div>標(biāo)簽的作用就相當(dāng)于一個(gè)容器。容器的作用呢就是可以把一個(gè)邏輯部分包裹起來存到元素內(nèi)部。

確定邏輯部分：

什么是邏輯部分？它是頁面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁中的獨(dú)立的欄目版塊，就是一個(gè)典型的邏輯部分。比如網(wǎng)頁中的頭部模塊、banner模塊、新聞列表模塊等，這樣的部分就可以使用div標(biāo)簽作為容器存放進(jìn)去。如下圖所示：圖中用紅色邊框標(biāo)出的部分就是一個(gè)邏輯部分，就可以使用<div>標(biāo)簽作為容器。

2）合理的命名div

第一條我們講到把一些標(biāo)簽放進(jìn)<div>里，劃分出一個(gè)獨(dú)立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個(gè)獨(dú)立的邏輯部分設(shè)置一個(gè)名稱，用id屬性來為<div>提供唯一的名稱，這個(gè)就像我們每個(gè)人都有一個(gè)身份證號(hào)，這個(gè)身份證號(hào)是唯一標(biāo)識(shí)我們的身份的，也是必須唯一的。對(duì)于重復(fù)的邏輯部分我們用class屬性來為div添加一個(gè)通用名稱，class不唯一可以重復(fù)使用。

上邊這張圖片左邊是沒有使用div的排版，我們可以看到整個(gè)頁面標(biāo)簽有很多，我們很難區(qū)分哪一塊是一個(gè)部分的，哪一塊是屬于哪個(gè)區(qū)域的，但是右邊這張圖片，我們使用div包括了之后我們就可以很清晰的了解到，每一個(gè)模塊屬于哪部分，結(jié)構(gòu)排版也顯得很明了，便于我們后期的修改和維護(hù)。

到這本節(jié)課的內(nèi)容我們就說完了，快點(diǎn)自己動(dòng)手來試試：給網(wǎng)頁的獨(dú)立的版塊添加“標(biāo)記”。

附贈(zèng)一句經(jīng)典語錄：將來的你一定會(huì)感謝現(xiàn)在奮斗的自己！喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。