在最流行的網(wǎng)站都在使用DIV+CSS的編碼去編寫，這種編碼方便，而且兼容各種瀏覽器，并且在修改網(wǎng)站的時候也更加便捷。在今天的內(nèi)容中，小編將介紹下DIV標(biāo)簽使用的一些規(guī)則。

DIV是一個塊級元素，它后面經(jīng)常跟隨著class或者id這樣的元素。主要的差異是class用于元素組，而id用于標(biāo)識唯一的元素。常規(guī)的網(wǎng)站架構(gòu)通常為：

1.定義一個頭部通用。為規(guī)范化，通常命名為header。

2.定義主題框架，為規(guī)范化，通常命名為content或者wrapper。

3.定義腳步框架，為規(guī)范化，同化成命名為footer。

在定義為header的div中應(yīng)出現(xiàn)一個h1標(biāo)簽，用于詮釋整個網(wǎng)站的內(nèi)容，應(yīng)包括網(wǎng)站的主關(guān)鍵詞。接著用ul無序標(biāo)簽做導(dǎo)航排列列表。h2標(biāo)簽來說可以出現(xiàn)1-3次，接著就是權(quán)重依次降低的h3標(biāo)簽，在主頁可用于小版塊的標(biāo)題。

最后小編提醒大家，使用DIV設(shè)計(jì)網(wǎng)站時也需要注意一些細(xì)節(jié)的問題，只用將代碼寫的更好，網(wǎng)站效果才能被展現(xiàn)的更合理。

原創(chuàng)文章出自暢想網(wǎng)絡(luò)，轉(zhuǎn)載地址：http://www.e-wkj.cn/xw/2197.html

以通過 <div> 和 <span> 將 HTML 元素組合起來。

HTML 塊元素

大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素。

編者注：“塊級元素”譯為 block level element，“內(nèi)聯(lián)元素”譯為 inline element。

塊級元素在瀏覽器顯示時，通常會以新行來開始（和結(jié)束）。

例子：<h1>, <p>, <ul>, <table>

HTML 內(nèi)聯(lián)元素

內(nèi)聯(lián)元素在顯示時通常不會以新行開始。

例子：<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器。

<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。

如果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。

<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。

HTML <span> 元素

HTML <span> 元素是內(nèi)聯(lián)元素，可用作文本的容器。

<span> 元素也沒有特定的含義。

當(dāng)與 CSS 一同使用時，<span> 元素可用于為部分文本設(shè)置樣式屬性。

HTML 分組標(biāo)簽

標(biāo)簽 描述

<div> 定義文檔中的分區(qū)或節(jié)（division/section）。

<span> 定義 span，用來組合文檔中的行內(nèi)元素。

么寫一個優(yōu)質(zhì)的div+css頁面

1.margin屬性容易在低版本的IE中出現(xiàn)兼容性問題，盡量少用，可以選用padding或position方式代替。

2.在寬高固定、子元素比較多、子元素位置雜亂，子元素類型較多的區(qū)域中，盡量用定位方法來做，比如美團(tuán)左側(cè)的產(chǎn)品區(qū)塊，如 果用margin來做，不同版本IE瀏覽器下的表現(xiàn)可能會讓你崩潰的。

3.能設(shè)置具體寬高的區(qū)塊盡量設(shè)置具體的寬高。

4.需要設(shè)置背景圖的元素盡量設(shè)置具體的寬高。

5.用常見的標(biāo)簽和css屬性，盡量別用另類的用法。

6.放文字的標(biāo)簽一定要設(shè)置行高

7.不要用行級標(biāo)簽（a標(biāo)簽、span標(biāo)簽等）和文字標(biāo)簽（p標(biāo)簽等）當(dāng)做劃分區(qū)域的標(biāo)簽。

8.盡量不要在行級標(biāo)簽內(nèi)嵌套塊級標(biāo)簽

9.了解自己寫的每一個標(biāo)簽，每個標(biāo)簽的大小范圍、屬性、嵌套層級都要很清楚才行，其實(shí)就是深入理解盒子模型。

10.深化區(qū)塊的概念，把頁面嚴(yán)格的分成不同的區(qū)塊，盡量避免不同區(qū)塊之間的沖突。

11.不知道不認(rèn)識的屬性和標(biāo)簽一定不要亂用

12.寫頁面的時候?qū)懸稽c(diǎn)就測一下兼容性，發(fā)現(xiàn)問題及時改正，不要想著等到全寫完后統(tǒng)一調(diào)試兼容性。

13.前端開發(fā)最忌諱直接參考別人的標(biāo)簽和寫法，一定要有自己的開發(fā)思路，不要怕麻煩，一旦被別人的思路綁架，你會很痛苦的。

14.一般來說，開發(fā)兩個國美、京東規(guī)模的頁面就算入門了，開發(fā)五個以上就能體會到一定的開發(fā)技巧。開發(fā)的頁面數(shù)量越多，就越 熟練，hack用的也會越來越少。SO，動手去做吧！

透明度

?opacity: 0.5;

? w3c標(biāo)準(zhǔn)屬性，火狐等瀏覽器支持。取值范圍：0-1

?filter:alpha(opacity=50);

? IE瀏覽器支持的，取值范圍：0-100，取整數(shù)

visibility屬性

visibility 用來控制元素的隱藏和顯示狀態(tài)

visible 當(dāng)前元素為顯示狀態(tài)

hidden 當(dāng)前元素為隱藏狀態(tài)

用visibility隱藏的元素，元素原來所占的空間位置還在。

取消li標(biāo)簽?zāi)J(rèn)圓點(diǎn)

瀏覽器會默認(rèn)給li標(biāo)簽前面加一個黑圓點(diǎn)樣式，這種默認(rèn)的樣式對現(xiàn)在的開發(fā)者來說已經(jīng)沒有太大的用處了， 一般我們會取消掉這個默認(rèn)的樣式，方法如下：

list-style：none;

CSS命名規(guī)范

對于頁面中具有唯一性、結(jié)構(gòu)性的模塊，使用id選擇器，其他一般采用class選擇器

? 選擇器命名一律使用小寫字母

? 要有合理的注釋

? 結(jié)構(gòu)上有父子包含關(guān)系的樣式，應(yīng)通過命名體現(xiàn)。

? 命名使用駝峰結(jié)構(gòu)+橫線，即同一對象的命名如果需要多個單詞， 使用駝峰命名法則，如：boxMusic

? 名字不能以數(shù)字開頭

? 命名的時候一定要有意義