扯淡中的扯淡

首先現(xiàn)在好多都叫div+css也有叫html+css，我個(gè)人也喜歡稱它為html+css。這個(gè)會(huì)從一個(gè)更高的層面上來看前端的標(biāo)簽，div只是html標(biāo)簽中的一個(gè)布局標(biāo)簽，它還有很多的標(biāo)簽，如果用div+css來起名，會(huì)讓人感覺到頁(yè)頭同排版只有用div+css 也是標(biāo)準(zhǔn)化的頁(yè)頁(yè)（哈哈，本人剛起入這一行時(shí)常聽到的是div+css，當(dāng)時(shí)認(rèn)為寫成div的代碼加上css樣式就是符合w3c標(biāo)準(zhǔn)了，這樣有會(huì)一個(gè)狹隘的想法，會(huì)有一個(gè)誤區(qū)是頁(yè)面用了大量的div，這樣的頁(yè)面及沒有符合語義又沒有符合SEO優(yōu)化。隨著對(duì)前端的理解慢慢改正過來了）。

W3C標(biāo)準(zhǔn)

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)；

HTML+css要點(diǎn)：

個(gè)人要書寫前端（HTML+css）代碼時(shí)總結(jié)幾條適合自己的格式：

HTML：

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可以滿足需求，同時(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è)面中的語義非常小，可以接合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ū)ο箝_發(fā)：首先分析設(shè)計(jì)原圖（模塊、CSS背景圖片合并等），把每個(gè)模塊看成一個(gè)對(duì)象來開發(fā)，然后抽象出父模塊的HTML和CSS進(jìn)行封裝。最后開發(fā)整體代碼，重用HTML和繼承CSS樣式

9.根據(jù)不同的設(shè)計(jì)效果，而制訂不同的HTML標(biāo)簽方案；

CSS：

1.在寫CSS時(shí)盡量不要寫成DIV#Img這樣的格式；

2.不建議CSS中嵌套的層次太多，建議三次為佳；（#header  #.nav ul li{屬性：值}這樣的寫法會(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è)選擇器里的屬性可以寫成一行。加減少CSS文件的大小，一個(gè)空間也有一個(gè)字符的；對(duì)于短小的選擇器可以把它們成一條來寫；如：.red{color:red;} .blue{color:blue;}

6.在書寫CSS時(shí)，建議使用全小寫字母，為了解決在寫HTML屬性和CSS中定義有可能不一致（有一個(gè)好的習(xí)慣）；

7.在CSS的選擇器里添加一個(gè)背景屬性時(shí)，如果這個(gè)屬性要求背景圖片是repeat-x屬性時(shí)，背景圖片不在過于小，這樣會(huì)增加渲染時(shí)間；

8.在寫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在部分瀏覽器還沒有得到很好的支持）等等吧；

9.在組合CSS背景圖片時(shí)一定要考慮背景圖片的空間大?。?/p>

DOM標(biāo)準(zhǔn)：

 DOM是采用的JavaScript語言來對(duì)瀏覽和HTML還有CSS進(jìn)行一些動(dòng)態(tài)的操作,JavaScriptj原生的對(duì)DOM的操作語言，JavaScript分為Window對(duì)象、內(nèi)置對(duì)象、Dom對(duì)象、JS語法；

Jquery插件是對(duì)以上的對(duì)象進(jìn)行了兼容封裝和代碼編寫封裝（指減少代碼的編寫），優(yōu)點(diǎn)是瀏覽器上的兼容問題、減少代碼的編寫、簡(jiǎn)單的鏈?zhǔn)骄幊?、?dòng)畫效果、自定義動(dòng)畫效果、Ajax、異步加載、對(duì)HTML和CSS具有很好的支持并且操作簡(jiǎn)單、JS文件的壓縮版只有二十幾K小巧和使用靈活等功能；

在CSS中的個(gè)人書寫規(guī)范：

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)不明確，希望見諒，那里有不對(duì)的地方，希望你能指正和相互交流學(xué)習(xí)！