首先現(xiàn)在好多都叫div+css也有叫html+css，我個(gè)人也喜歡稱(chēng)它為html+css。這個(gè)會(huì)從一個(gè)更高的層面上來(lái)看前端的標(biāo)簽，div只是html標(biāo)簽中的一個(gè)布局標(biāo)簽，它還有很多的標(biāo)簽，如果用div+css來(lái)起名，會(huì)讓人感覺(jué)到頁(yè)頭同排版只有用div+css 也是標(biāo)準(zhǔn)化的頁(yè)頁(yè)（哈哈，本人剛起入這一行時(shí)常聽(tīng)到的是div+css，當(dāng)時(shí)認(rèn)為寫(xiě)成div的代碼加上css樣式就是符合w3c標(biāo)準(zhǔn)了，這樣有會(huì)一個(gè)狹隘的想法，會(huì)有一個(gè)誤區(qū)是頁(yè)面用了大量的div，這樣的頁(yè)面及沒(méi)有符合語(yǔ)義又沒(méi)有符合SEO優(yōu)化。隨著對(duì)前端的理解慢慢改正過(guò)來(lái)了）。
W3C標(biāo)準(zhǔn)是一系列的標(biāo)準(zhǔn)，包含：結(jié)構(gòu)層（HTML標(biāo)準(zhǔn)）、表現(xiàn)層（CSS標(biāo)準(zhǔn)）、行為層（DOM標(biāo)準(zhǔn)）等標(biāo)準(zhǔn)；
個(gè)人要書(shū)寫(xiě)前端（HTML+css）代碼時(shí)總結(jié)幾條適合自己的格式：
1.div盡量用頁(yè)面布局，而不要用于內(nèi)容的布局；
2.頁(yè)面中對(duì)于有編號(hào)排列的集合用ol，因?yàn)樗怯行虻臉?biāo)簽
3.對(duì)于有標(biāo)簽有描述的片段（只的是小的模塊）用dl它有一個(gè)dt標(biāo)題和dd對(duì)標(biāo)題的一個(gè)描述；
4.在使用H1--h6時(shí)，對(duì)于重要的內(nèi)容用h1-h3，對(duì)于側(cè)欄的頁(yè)面用h4-h5可以滿(mǎn)足需求，同時(shí)個(gè)人建議H標(biāo)簽用于欄目標(biāo)題上，內(nèi)容標(biāo)題和標(biāo)題的部分內(nèi)容一起顯示這時(shí)用DL的DT和DD一起使用，否則就使用H標(biāo)簽，在這里對(duì)于它們的使用順序也要考慮一下；
5.對(duì)于SEO優(yōu)化的標(biāo)簽有二個(gè)比較重要的Strong和Em的。它們的權(quán)重是很高的，Strong有重點(diǎn)，突出之意，em有強(qiáng)調(diào) 提醒之意；
6.Span標(biāo)簽在頁(yè)面中的語(yǔ)義非常小，可以接合p em strong等這些標(biāo)簽配合使用，為了解決這個(gè)CSS定義時(shí)Class屬性名的定義；
7.對(duì)于有一個(gè)標(biāo)題一個(gè)集合列表這樣的模塊，可以用H標(biāo)簽和UL標(biāo)簽使用。這樣的意義是標(biāo)題下面緊跟一個(gè)集合，是對(duì)標(biāo)題的一個(gè)集合列表；
8.面向?qū)ο箝_(kāi)發(fā)：首先分析設(shè)計(jì)原圖（模塊、CSS背景圖片合并等），把每個(gè)模塊看成一個(gè)對(duì)象來(lái)開(kāi)發(fā)，然后抽象出父模塊的HTML和CSS進(jìn)行封裝。最后開(kāi)發(fā)整體代碼，重用HTML和繼承CSS樣式
9.根據(jù)不同的設(shè)計(jì)效果，而制訂不同的HTML標(biāo)簽方案；
1.在寫(xiě)CSS時(shí)盡量不要寫(xiě)成DIV#Img這樣的格式；
2.不建議CSS中嵌套的層次太多，建議三次為佳；（#header #.nav ul li{屬性：值}這樣的寫(xiě)法會(huì)讓瀏覽器會(huì)從右向右一層一層地去查找）；
3.建議把具有共性的CSS提成全局的這樣每個(gè)需要使用的標(biāo)簽可以去繼承；減少CSS代碼會(huì)提高加載效率；
4.最外層的DIV標(biāo)簽建議使用ID屬性，它會(huì)有一點(diǎn)加載快的優(yōu)勢(shì)，可根據(jù)項(xiàng)目的設(shè)計(jì)而定；
5.CSS樣式的一個(gè)選擇器里的屬性可以寫(xiě)成一行。加減少CSS文件的大小，一個(gè)空間也有一個(gè)字符的；對(duì)于短小的選擇器可以把它們成一條來(lái)寫(xiě)；如：.red{color:red;} .blue{color:blue;}
6.在書(shū)寫(xiě)CSS時(shí)，建議使用全小寫(xiě)字母，為了解決在寫(xiě)HTML屬性和CSS中定義有可能不一致（有一個(gè)好的習(xí)慣）；
7.在CSS的選擇器里添加一個(gè)背景屬性時(shí)，如果這個(gè)屬性要求背景圖片是repeat-x屬性時(shí)，背景圖片不在過(guò)于小，這樣會(huì)增加渲染時(shí)間；
8.在寫(xiě)CSS屬性時(shí)，有的屬性值可以組合在一個(gè)屬性上，如：font:bold 14px/25px "宋體"; border:1px solid red; margin:0px 10px 0px 20px; padding:10px 20px 30px 40px; background:url() no-repeat scroll left top transparent;（CSS3樣式里也有很多這樣的組合在一起的，在這里不列舉了，轉(zhuǎn)為CSS在部分瀏覽器還沒(méi)有得到很好的支持）等等吧；
9.在組合CSS背景圖片時(shí)一定要考慮背景圖片的空間大?。?/p>
DOM是采用的JavaScript語(yǔ)言來(lái)對(duì)瀏覽和HTML還有CSS進(jìn)行一些動(dòng)態(tài)的操作,JavaScriptj原生的對(duì)DOM的操作語(yǔ)言，JavaScript分為Window對(duì)象、內(nèi)置對(duì)象、Dom對(duì)象、JS語(yǔ)法；
Jquery插件是對(duì)以上的對(duì)象進(jìn)行了兼容封裝和代碼編寫(xiě)封裝（指減少代碼的編寫(xiě)），優(yōu)點(diǎn)是瀏覽器上的兼容問(wèn)題、減少代碼的編寫(xiě)、簡(jiǎn)單的鏈?zhǔn)骄幊獭?dòng)畫(huà)效果、自定義動(dòng)畫(huà)效果、Ajax、異步加載、對(duì)HTML和CSS具有很好的支持并且操作簡(jiǎn)單、JS文件的壓縮版只有二十幾K小巧和使用靈活等功能；
selector{
/* 定位屬性 */
display:block;
float:left;
position:absolute;
top:0px;
right:0px;
bottom:0px;
right:0px;
/* 容器屬性 */
width:0px;
height:0px;
margin:auto;
padding:0px;
box-shadouw:1px 1px rgba();
/* 格式屬性 */
line-height:10px;
text-align:center;
text-decoration:underline;
text-shadouw:1px 1px rgba();
/* 文本屬性 */
color:red;
font-size:12px;
font-weight:bold;
font-family:"宋體";
font-style:none;
list-style:none;
/* 邊框背景屬性 */
background-color:red;
background-image:url();
border:1px solid red;
border-raduis:5px;
overflow:hidden;
}
由于自己的水平有限，表達(dá)可能有點(diǎn)不明確，希望見(jiàn)諒，那里有不對(duì)的地方，希望你能指正和相互交流學(xué)習(xí)！
聯(lián)系客服
