整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
在最流行的網(wǎng)站都在使用DIV+CSS的編碼去編寫，這種編碼方便，而且兼容各種瀏覽器，并且在修改網(wǎng)站的時候也更加便捷。在今天的內(nèi)容中，小編將介紹下DIV標簽使用的一些規(guī)則。
DIV是一個塊級元素，它后面經(jīng)常跟隨著class或者id這樣的元素。主要的差異是class用于元素組，而id用于標識唯一的元素。常規(guī)的網(wǎng)站架構(gòu)通常為：
1.定義一個頭部通用。為規(guī)范化，通常命名為header。
2.定義主題框架，為規(guī)范化，通常命名為content或者wrapper。
3.定義腳步框架，為規(guī)范化，同化成命名為footer。
在定義為header的div中應出現(xiàn)一個h1標簽，用于詮釋整個網(wǎng)站的內(nèi)容，應包括網(wǎng)站的主關(guān)鍵詞。接著用ul無序標簽做導航排列列表。h2標簽來說可以出現(xiàn)1-3次，接著就是權(quán)重依次降低的h3標簽，在主頁可用于小版塊的標題。
最后小編提醒大家，使用DIV設計網(wǎng)站時也需要注意一些細節(jié)的問題，只用將代碼寫的更好，網(wǎng)站效果才能被展現(xiàn)的更合理。
原創(chuàng)文章出自暢想網(wǎng)絡，轉(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)容塊設置樣式屬性。
<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
HTML <span> 元素
HTML <span> 元素是內(nèi)聯(lián)元素，可用作文本的容器。
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性。
HTML 分組標簽
標簽 描述
<div> 定義文檔中的分區(qū)或節(jié)（division/section）。
<span> 定義 span，用來組合文檔中的行內(nèi)元素。
么寫一個優(yōu)質(zhì)的div+css頁面
1.margin屬性容易在低版本的IE中出現(xiàn)兼容性問題，盡量少用，可以選用padding或position方式代替。
2.在寬高固定、子元素比較多、子元素位置雜亂，子元素類型較多的區(qū)域中，盡量用定位方法來做，比如美團左側(cè)的產(chǎn)品區(qū)塊，如 果用margin來做，不同版本IE瀏覽器下的表現(xiàn)可能會讓你崩潰的。
3.能設置具體寬高的區(qū)塊盡量設置具體的寬高。
4.需要設置背景圖的元素盡量設置具體的寬高。
5.用常見的標簽和css屬性，盡量別用另類的用法。
6.放文字的標簽一定要設置行高
7.不要用行級標簽（a標簽、span標簽等）和文字標簽（p標簽等）當做劃分區(qū)域的標簽。
8.盡量不要在行級標簽內(nèi)嵌套塊級標簽
9.了解自己寫的每一個標簽，每個標簽的大小范圍、屬性、嵌套層級都要很清楚才行，其實就是深入理解盒子模型。
10.深化區(qū)塊的概念，把頁面嚴格的分成不同的區(qū)塊，盡量避免不同區(qū)塊之間的沖突。
11.不知道不認識的屬性和標簽一定不要亂用
12.寫頁面的時候?qū)懸稽c就測一下兼容性，發(fā)現(xiàn)問題及時改正，不要想著等到全寫完后統(tǒng)一調(diào)試兼容性。
13.前端開發(fā)最忌諱直接參考別人的標簽和寫法，一定要有自己的開發(fā)思路，不要怕麻煩，一旦被別人的思路綁架，你會很痛苦的。
14.一般來說，開發(fā)兩個國美、京東規(guī)模的頁面就算入門了，開發(fā)五個以上就能體會到一定的開發(fā)技巧。開發(fā)的頁面數(shù)量越多，就越 熟練，hack用的也會越來越少。SO，動手去做吧！
?opacity: 0.5;
? w3c標準屬性，火狐等瀏覽器支持。取值范圍：0-1
?filter:alpha(opacity=50);
? IE瀏覽器支持的，取值范圍：0-100，取整數(shù)
visibility 用來控制元素的隱藏和顯示狀態(tài)
visible 當前元素為顯示狀態(tài)
hidden 當前元素為隱藏狀態(tài)
用visibility隱藏的元素，元素原來所占的空間位置還在。
瀏覽器會默認給li標簽前面加一個黑圓點樣式，這種默認的樣式對現(xiàn)在的開發(fā)者來說已經(jīng)沒有太大的用處了， 一般我們會取消掉這個默認的樣式，方法如下：
list-style：none;
對于頁面中具有唯一性、結(jié)構(gòu)性的模塊，使用id選擇器，其他一般采用class選擇器
? 選擇器命名一律使用小寫字母
? 要有合理的注釋
? 結(jié)構(gòu)上有父子包含關(guān)系的樣式，應通過命名體現(xiàn)。
? 命名使用駝峰結(jié)構(gòu)+橫線，即同一對象的命名如果需要多個單詞， 使用駝峰命名法則，如：boxMusic
? 名字不能以數(shù)字開頭
? 命名的時候一定要有意義
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
