零基礎入門前端開發工程師，應當提前掌握DIV+CSS佈局規範

今天，有一個朋友跟我訴苦，說他寫好了樣式，但是頁面上卻出不來樣式效果。代碼如下：

HTML中部分展示

CSS樣式中代碼部分展示

看了以上代碼，相信映入眼底，最明顯的該是id的命名問題。初學前端，我們可能更多的去練習標籤的用法，以及屬性的運用，往往會忽略掉"命名"這個基礎但是很重要的部分。

處理辦法，該是瞭解清楚HTML中的命名規範：

樣式命名規範

id選擇器常用命名規範

類選擇器常用命名規範

全局樣式設置

1.全局樣式置頂，並用註釋標註為/*全局樣式*/

2.用一內容定義的樣式寫在一起，並用註釋標註

3.一個樣式裡面，多個屬性的定義建議寫在一行，屬性定義之間用"；"隔開

4.樣式中類或者id選擇器的命名建議使用樣式命名規範來書寫

5.自定義選擇器名稱建議都用小寫、儘量使用英文單詞，少用拼音，名稱中建議少用"-"或者"_",儘量少用英文縮寫。

/* 全局樣式部分 */

*{ padding:0; margin:0; font-size:12px; font-family:"宋體"; }

ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}

ul{list-style:none;}

img{border:0px;}

a{ text-decoration:none;}

.clearfloat{clear:both; height:0px; font-size:1px; line-height:0px;}

html文檔書寫規範

1.html標籤代碼書寫應遵循xhtml規範：

a.Html標籤要全部小寫

b.標籤嵌套要對應

c.成對標籤必須關閉，單個標籤也需要關閉，如"<..../>"

d.標籤屬性需要用引號，且不能簡寫，如:

規範寫法：<input type="checkbox" checked="checked" />

不規範寫法：<input type="checkbox" checked />

2.同一模塊的html代碼用註釋包含,如：

<!---logo廣告條開始--->

<div id="logobar">

.....

</div>

<!---logo廣告條結束--->

3.Html通過首行縮進來體現代碼結構，如：

<div id="main_nav">

<ul>

<li><a href="#">首 頁</a></li>

<li><a href="#">企業招聘</a></li>

</ul>

</div>

4.Img標籤需加上"alt"屬性