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

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

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

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

確定邏輯部分：

什么是邏輯部分？它是頁(yè)面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁(yè)中的獨(dú)立的欄目版塊，就是一個(gè)典型的邏輯部分。比如網(wǎng)頁(yè)中的頭部模塊、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屬性來(lái)為<div>提供唯一的名稱，這個(gè)就像我們每個(gè)人都有一個(gè)身份證號(hào)，這個(gè)身份證號(hào)是唯一標(biāo)識(shí)我們的身份的，也是必須唯一的。對(duì)于重復(fù)的邏輯部分我們用class屬性來(lái)為div添加一個(gè)通用名稱，class不唯一可以重復(fù)使用。

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

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

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

、這里是最簡(jiǎn)單的div+css，div+css在前端開(kāi)發(fā)中有什么用參看我發(fā)的文【105】。

這里我用div+css做一個(gè)有顏色的盒子，瀏覽器運(yùn)行后如下圖。

二、我用的開(kāi)發(fā)工具是Sublime Text，代碼如下：

SS是樣式,DIV是層.DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（web標(biāo)準(zhǔn)），通常為了說(shuō)明與HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格（table）定位方式的區(qū)別.因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。

1：學(xué)會(huì)HTML語(yǔ)言，再學(xué)習(xí)DIV+CSS時(shí)會(huì)得心應(yīng)手。

看得懂HTML語(yǔ)法，那么世界上80%的網(wǎng)站都能被你看穿。HTML語(yǔ)言很好學(xué)，一定要熟記常用的一些代碼，因?yàn)橛辛讼馾reamweaver這樣的幫助生成html代碼的工具,所以很多人都忽略了HTML的學(xué)習(xí).學(xué)會(huì)了HTML互聯(lián)網(wǎng)中最基本的語(yǔ)言之后，在學(xué)習(xí)DIV+CSS時(shí)，你會(huì)發(fā)現(xiàn)：原來(lái)DIV+CSS也就那樣，小菜一碟。現(xiàn)在都是用Notepad++、Sublime等，我這篇文章主要寫(xiě)的用Dw。

2.使用Dreamweaver的代碼模式來(lái)編寫(xiě)DIV和CSS。

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者來(lái)說(shuō)，直接使用記事本、Notepad等工具來(lái)書(shū)寫(xiě)代碼很困難。因?yàn)镈reamweaver的代碼模式有提示功能，可以在保證語(yǔ)法編寫(xiě)的正確性。并且對(duì)不熟悉的語(yǔ)法可以一次性書(shū)寫(xiě)正確。

如圖所示：書(shū)寫(xiě)div，html時(shí)DW的提供功能。

書(shū)寫(xiě)CSS時(shí)DW工具欄右側(cè)的CSS可視化編輯功能.

我學(xué)習(xí)DIV+CSS時(shí)就是從Dreamweaver的代碼模式學(xué)起的，也許不是最好，但很實(shí)用。

3.養(yǎng)成良好的書(shū)寫(xiě)習(xí)慣.

有良好的生活習(xí)慣，說(shuō)明這人會(huì)過(guò)日子，有良好的CSS書(shū)寫(xiě)習(xí)慣，說(shuō)明這人做事嚴(yán)謹(jǐn)。寫(xiě)css的時(shí)候網(wǎng)上有很多推薦的規(guī)范，比如菜單類用menu，版權(quán)用copyright（CoryRight），底部用footer等等，在書(shū)寫(xiě)順序上一般是：顯示屬性-自身屬性-文本屬性。當(dāng)然這些都沒(méi)有硬性的規(guī)定，但是遵循一些不成文的規(guī)定不是壞事，這樣讓自己寫(xiě)的代碼，容易讓別人讀懂，搜索引擎也更加喜歡。

4.只有目的明確，結(jié)果清晰，過(guò)程才最高效，才不會(huì)輕易被干擾，被改變方向。