前端佈局總結

 

 

一.  html

（1）編碼：全部編碼均採用xhtml，標籤必須閉合，屬性值用雙引號包括，編碼統一爲utf-8。

（2）語義化：語義化html，正確使用標籤。

（3）文件命名：命名以中文命名，依實際模塊命名，方便查找

（4）文件頭部head的內容

• title，須要添加標題
• 編碼charset=UTF-8 
• 緩存：Content=’-1’表示當即過時。

  在head標籤內引入css文件，有助於頁面渲染

  引入樣式文件或JavaScript文件時， 須略去默認類型聲明.

  頁腳引入javascript文件

（5）鏈接地址標籤：書寫連接地址時，避免重定向，如href=」http://www.xxx.com/」，需在地址後面加‘/’

（6）儘量減小div嵌套，如：根據重要性使用h1-6標籤，段落使用p，列表使用ul，內聯元素中不可嵌套塊級元素，爲含有描述性表單元素（input，tetarea）添加label

（7）圖片

  能以背景形式呈現的圖片，儘可能寫入css樣式中

  區分做爲內容的圖片和做爲背景的圖片，做爲背景的圖片採用Css sprite技術，放在一張大圖裏

  重要圖片必須加上alt屬性，給重要的元素和截斷的元素加上title

（8）註釋：給區塊代碼及重要功能加上註釋，方便後臺添加功能

（9）轉義字符：特殊符號使用轉義字符

（10）避免使用行內樣式，頁面結構清晰，明瞭

二. Css

（1）頁面內部儘可能避免使用style屬性

（2）css放在head標籤中，由link標籤引入，使頁面的結構與表現分離。

（3）文件命名：以英文命名，後綴.css，共用：base.css，首頁：index.css，其餘頁面樣式依具體模塊需求命名

（4）編碼統一爲utf-8

（5）Class與id的使用：

  Id:具備惟一性，是父級的，用於標識頁面上的特定元素，如header/footer/wrapper/left/right之類

  Class:能夠重複使用，可用於頁面上任意多個元素.

  命名：以小寫英文字母、數字、下劃線組合命名，避免使用中文拼音，儘可能使用簡易的單詞組合，採用駝峯命名法和劃線命名法，提升可讀性，如：Content，Content-img等。

（6）爲JavaScript預留鉤子的命名， 以 js- 起始， 好比:js-right， js-left

（7）書寫代碼前，考慮樣式重複利用率，充分利用html自身屬性及樣式繼承原理減小代碼量，代碼建議單行書寫。方便修改.

（8）圖片

  命名：小寫英文字母、數字、_ 的組合，使用有意義的名稱或英文簡寫，最好不要使用漢語拼音，區分大寫字。

  使用雪碧圖技術， 減少http請求，sprite按模塊製做

（9）書寫順序：保證同類型屬性寫在一塊兒，通常遵循佈局定位屬性–>自身屬性–>文本屬性–>（由整到零）其餘屬性的書寫格式

（10）書寫順序規則

  定位屬性（好比：display， position， float， clear， visibility等）

  自身屬性（好比：width， height， margin， padding， border等）

  文本屬性（好比：font， line-height， text-align， text-indent， vertical-align等）

  其餘屬性（好比：color， background， opacity， cursor，content， list-style等）

（13）減小影響性能的屬性，如：position，float

（14）清除浮動方法:⑴clear：both⑵設置空div，設置width：100%，overflow：hidden；

（15）使用兄弟，子，相鄰選擇器，僞元素選擇器：first-child，last-child，nth-child（n）,n表明第幾個元素，n可爲：add表奇數，even表示偶數；（ie支持狀況很差）

3. Javascript

（1）文件編碼統一爲utf-8， 書寫時， 每行代碼結束必須有分號‘;’，儘可能根據需求編寫原生代碼開發.

（2）在頁腳引入javascript腳本body結束以前，採用外鏈引入形式，使頁面的結構與行爲分離

（3）命名：

  文件命名：以英文命名，後綴爲.js，共用：common.js，其餘命名可根據模塊需求命名

  變量命名：駝峯式命名，原生JavaScript變量要求是純英文字母， 首字母須小寫， 如iTaoLun。變量集中聲明， 避免全局變量

  類命名：首字母大寫， 駝峯式命名. 如 ITaoLun;

 函數命名: 首字母小寫駝峯式命名. 如iTaoLun();

  命名語義化， 儘量利用英文單詞或其縮寫;

（4）

Javascrpt的typeof返回那些數據類型？

1.undefined未定義

2.boolean布爾值

3.string字符串

4.number數值

5.object對象

6.nullfunction函數

4.註釋規範

（1）html：註釋格式，」-」只能在註釋的始末位置，不可置入註釋文字區域

（2）Css：註釋格式

（3）Javascript：單行註釋：//這兒是註釋，多行註釋：

 

5. Css Hack 特殊符號

（1）* ：IE6/7都能識別*，標準瀏覽器不識別

（2）_：只有IE6識別

（3）！Important：IE6不識別，Firefox，IE7/8/9、chorme等主流瀏覽器均識別

（4）\9：全部瀏覽器均識別，包括IE6/7/8

（5）+：IE6/7/8識別

（6）書寫順序：先寫FF等非IE瀏覽器所需樣式，其次IE8，再次IE7，最後寫IE6

6.執行時間
window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

7.編寫個數不一樣
window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個
$(document).ready()能夠同時編寫多個，而且均可以獲得執行

$(document).ready()
8.簡化寫法
window.onload沒有簡化寫法
$(document).ready(function(){})能夠簡寫成$(function(){})