扎實的基礎有時候需要縱覽群書，但針對編碼領域，單靠紙上談兵遠遠不夠。思考，實踐，再思考，再實踐。累積到一定代碼量，思路自然豁然開朗。重復的時間沉淀，將締造更加強健高效的代碼。

成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為新昌等服務建站，新昌等地企業(yè)，進行企業(yè)商務咨詢服務。為新昌企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

 　部分整理自網絡，個人水平有限，望見諒。

html

1）將input設為只讀，使用readonly而非diabled

　　disbled和readonly類似，會將輸入框設置為不可輸入狀態(tài)，但是在html中，如果一個元素被設置為disabled，它的值就不會被發(fā)送到server端。因此，將元素設為只讀時，只能使用readonly。

 　　disabled和readonly在顯示效果上也是有區(qū)別的。前者不能獲得焦點，后者可以獲得焦點。默認的顯示樣式也是有區(qū)別的。

　 　一個只讀數據不能輸入的話它是由什么規(guī)則生成的？如果能由其他數據根據某個規(guī)則生成，那么該數據就不是必要的，也不需要提交到服務端。因為其值通過其他 數據可以直接生成出來。如果其值是由其他數據生成，并且和其他數據有嚴格的邏輯關聯(lián)，該數據提交到服務端直接保存不經驗證的話是不安全的。因為請求是可以 偽造，直接保存可能會保存經過篡改的混亂數據。

　　當然，如果驗證的話也是和其他關聯(lián)數據做比較，其實也沒必要過多在意disabled和readonly的區(qū)別。

2）濫用元素

　　例如，濫用ul和ol，在應該使用ol的時候 使用ul；對于段落，不會用p而使用br和div；不會用h1/h2/h3等表示段落，而使用strong和div；不會用label、fieldset 和legend；不會用或亂用b、i、s、u之類在html5中重新定義過的標簽。

　　濫用ul和ol：

3）應該避免每個元素上不止一個class

　　class是一個選擇器，可以理解為一個標識，用來標識特定的標簽。每個頁面上都一定會有重復的樣式，沒必要重寫那部分樣式，因此經常會使用class。但是并不代表每個元素都要有多個class。

4）定義 img元素 的 alt 屬性

　　如果無法顯示圖像，瀏覽器將顯示替代文本，同時也會方便機器朗讀，提高可訪問性。
5） label元素的 for 屬性；

　　label的for屬性。它為label指定了一個目標，一般是一個form表單內元素的ID，這樣就可以把這個label與該ID元素關聯(lián)起來，當點擊label時，就可以讓該ID也獲得焦點！

 　 label 標簽錯誤的加到了性別上，而男、女選項根本沒有加 label 標簽，就別提正確的使用 for 屬性了。這是很可悲的，甚至很多人根本認為這就不是一個問題。Web 的初衷是什么？讓所有人無障礙的使用網頁。這不是技術問題，不是時間問題，是認知的問題。

6）注意checkbox默認打勾屬性

就說一個：html checkbox
checked屬性（也就是默認是否打勾的屬性）的寫法：

表明默認打勾的，
不過：

甚至：

都全是表示默認打勾的。

因此，當checked出現在checkbox，都表示默認打勾。

7）從來doctype都是由編輯器自己生產的，這沒關系，可是你也得分清楚你需要的是那種XHTML。

Doctype聲明位于文檔中的最前面的位置，處于標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。該標簽可聲明三種DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

當瀏覽器廠商開始創(chuàng)建與標準兼容的瀏覽器時，他們希望確保向后兼容性。為了實現這一點，他們創(chuàng)建了兩種呈現模式：標準模式和混雜模式（quirks mode）。在標準模式中，瀏覽器根據規(guī)范呈現頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示?；祀s模式通常模擬老式瀏覽器（比如Microsoft IE 4和Netscape Navigator 4）的行為以防止老站點無法工作。

聲明位于文檔中的最前面的位置，處于標簽之前。此標簽可告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。

#p#

 javascript

1）請為parseInt設置第二個參數。

　　 parseInt() 函數可解析一個字符串，并返回一個整數。第一個參數表示要被解析的字符串；第二個參數表示要解析的數字的基數，如果省略該參數或其值為0，則數字將以10為基礎解析，如果不設置，將會根據第一個參數的首字母或首兩個字母決定基礎：

　　省略第二個參數，如果第一個參數以 “0x” 或 “0X” 開頭，將以 16 為基數；

　　省略第二個參數，如果第一個參數以0為開頭，將以8為基數。

因此，如果不設置parseInt()的第二個參數，當第一個參數為“08”或“09”時，將會出現意想不到的結果。

2）過濾innerHTML將的值。

　　element.innerHTML = text，當text的中包含大小于好和&符號，將會打亂element里面的布局(XSS攻擊)

　　更好的取代方法是，element.textContent，將text的內容完全以文本顯示，而不解釋成html代碼。

3）拼接字符串作為為腳本解析時，考慮數字字面量被解析為字符串。

　　setTimeout("a="+a+"; alert(a);",1000)，拿變量toString當Literal，結果數值和字符串相加，最終結果顯示為NaN,影響下一步的代碼運行。 var c = 100 + $("input.2b")[0].value; 沒用parseInt或者Number，結果變成字符串相加。

4）alert("")，跟后端語言配合時，要考慮字符串里的\和"等特殊字符。

5）new Date("2014-11-11 00:00:00")，使用不符合標準的日期字符串，結果將難以想象。

6）盡量少使用for in來遍歷數組。

　　正如我們所知道：for in一般用于對象遍歷，而數組遍歷通常使用for，然而的數組可以使用for in循環(huán)遍歷，因為array是object的子類。但是遍歷對象，除了數組本身的屬性被遍歷出來外，但是一旦在遍歷之前，數組已經被修改 prototype。for in也將會把添加到原型鏈prototype上的屬性。

7）加載時執(zhí)行l(wèi)ocation.href = url請使用replace。

在onload里location.href = url; 做無條件跳轉邏輯的時候不用replace，會導致瀏覽器后退退不回去。

8）嚴謹正則表達式

　　var param = location.href.match(/a=([^\&\?]+)/)[1]; 濫用正則，使用不嚴謹的正則匹配url參數，結果會把 baba xaxa sba匹配進去。

9）避免使用.attr()修改input的屬性值。

　　$("input.2b").attr("value",2333333) 拿attribute當property用。但是一旦有腳本手動輸入將會使得value中的值為手動設置后的值，而不是input本身的值。

10）進行浮點數計算之后，調用toFiexd。

a=0.1, b=0.2，element.innerText = a+b;，浮點數顯示前不調toFixed，將會出現意想不到的結果。

11）方法或者代碼塊執(zhí)行之后，應加分號。

(function(){   
    //do something
})()
(function(){
    //do something
})()

兩個立即調用函數之間沒有寫分號，兩個立即調用函數會被粘連起來，出現異常。

#p#

css

1）float:left/right 或者 position: absolute 后不需要寫上 display:block。三者關系：

2）不分場景的使用 overflow:hidden 來閉合浮動

　　華麗麗的demo

3）讓 Chrome 支持小于12px 的文字，在 html 設置 -webkit-text-size-adjust:none。

　　-webkit-text-size-adjust放在body上會導致頁面縮放失效

　　用-webkit-text-size-adjust不要定義成可繼承的或全局的

4）px 并不是一個絕對單位（px 是相對單位），line-height最好不要使用 px。
　line-height設置為1.5時，會將line-height:1.5繼承到子元素；

　　而line-height設置為150%，子元素只會繼承由父元素font-size和line-height相乘計算的值。

　　比如parent元素設置屬性：font- size:14px;line-height:1.5,child設置font-size:26px;那么parent：line-height = 14px * 1.5 = 21px，child：line-height = 26px * 1.5 = 39px。parent元素設置屬性：font-size:14px;line-height:150%,child設置font-size:26px; 那么parent：line-height = 14px * 150% = 21px，child：line-height = 父元素的line-height = 21px。

5）搞清 PNG 的分類， PNG24 支持透明， PNG8 也支持 α 透明。

　　便攜式網絡圖形（Portable Network Graphics） 是一種無損位圖圖像文件格式?？梢灾鸫伪平@示： 先描繪出圖片輪廓，然后在逐步顯示圖像的細節(jié)。

　　透明性：①布爾透明(索引透明) 只能為不透明或全透明。  ②Alpha 透明 支持全透明和半透明。

PNG格式有8位、24位、32位三種形式，其中8位PNG支持兩種不同 的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位 PNG 在24位基礎上增加了8位透明通道，因此可展現256級透明程度。

非IE6的瀏覽器都能正常顯示包含透明信息的PNG圖片，而IE6在濾鏡 的幫助下能夠正常展示PNG8+索引透明以及32位的透明PNG圖像， 但是對 PNG8+alpha透明的圖像支持不夠好。

使用濾鏡解決IE6透明問題：IE6 PNG 半透明: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”img. png”, sizingMethod=”scale”);

6）混淆圖像格式

• 圖像顏色數量較少,且基本為純色或者平滑漸 變色時使用PNG更優(yōu)(矢量)

• PNG 就是為了取代GIF而生的，除了動畫 圖片等特殊場景使用，一般推薦使用PNG

• 對于圖像顏色豐富或者層次較深的圖片采用 JPG更優(yōu),例如:人物,風景等寫實類拍攝照片

•  對于網頁中的 背景, 按鈕等盡量采用PNG存儲, 以保證更好的視覺品質;廣告,商品等則可以使 用JPG來存儲(此時文件更小,更快的加載)

7） 給block-level元素應用vertical-align，結果發(fā)現根本不生效。

　　默認的block-level元素 有