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