扎實(shí)的基礎(chǔ)有時(shí)候需要縱覽群書，但針對(duì)編碼領(lǐng)域，單靠紙上談兵遠(yuǎn)遠(yuǎn)不夠。思考，實(shí)踐，再思考，再實(shí)踐。累積到一定代碼量，思路自然豁然開朗。重復(fù)的時(shí)間沉淀，將締造更加強(qiáng)健高效的代碼。

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

 　部分整理自網(wǎng)絡(luò)，個(gè)人水平有限，望見(jiàn)諒。

html

1）將input設(shè)為只讀，使用readonly而非diabled

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

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

　 　一個(gè)只讀數(shù)據(jù)不能輸入的話它是由什么規(guī)則生成的？如果能由其他數(shù)據(jù)根據(jù)某個(gè)規(guī)則生成，那么該數(shù)據(jù)就不是必要的，也不需要提交到服務(wù)端。因?yàn)槠渲低ㄟ^(guò)其他 數(shù)據(jù)可以直接生成出來(lái)。如果其值是由其他數(shù)據(jù)生成，并且和其他數(shù)據(jù)有嚴(yán)格的邏輯關(guān)聯(lián)，該數(shù)據(jù)提交到服務(wù)端直接保存不經(jīng)驗(yàn)證的話是不安全的。因?yàn)檎?qǐng)求是可以 偽造，直接保存可能會(huì)保存經(jīng)過(guò)篡改的混亂數(shù)據(jù)。

　　當(dāng)然，如果驗(yàn)證的話也是和其他關(guān)聯(lián)數(shù)據(jù)做比較，其實(shí)也沒(méi)必要過(guò)多在意disabled和readonly的區(qū)別。

2）濫用元素

　　例如，濫用ul和ol，在應(yīng)該使用ol的時(shí)候 使用ul；對(duì)于段落，不會(huì)用p而使用br和div；不會(huì)用h1/h2/h3等表示段落，而使用strong和div；不會(huì)用label、fieldset 和legend；不會(huì)用或亂用b、i、s、u之類在html5中重新定義過(guò)的標(biāo)簽。

　　濫用ul和ol：

3）應(yīng)該避免每個(gè)元素上不止一個(gè)class

　　class是一個(gè)選擇器，可以理解為一個(gè)標(biāo)識(shí)，用來(lái)標(biāo)識(shí)特定的標(biāo)簽。每個(gè)頁(yè)面上都一定會(huì)有重復(fù)的樣式，沒(méi)必要重寫那部分樣式，因此經(jīng)常會(huì)使用class。但是并不代表每個(gè)元素都要有多個(gè)class。

4）定義 img元素 的 alt 屬性

　　如果無(wú)法顯示圖像，瀏覽器將顯示替代文本，同時(shí)也會(huì)方便機(jī)器朗讀，提高可訪問(wèn)性。
5） label元素的 for 屬性；

　　label的for屬性。它為label指定了一個(gè)目標(biāo)，一般是一個(gè)form表單內(nèi)元素的ID，這樣就可以把這個(gè)label與該ID元素關(guān)聯(lián)起來(lái)，當(dāng)點(diǎn)擊label時(shí)，就可以讓該ID也獲得焦點(diǎn)！

 　 label 標(biāo)簽錯(cuò)誤的加到了性別上，而男、女選項(xiàng)根本沒(méi)有加 label 標(biāo)簽，就別提正確的使用 for 屬性了。這是很可悲的，甚至很多人根本認(rèn)為這就不是一個(gè)問(wèn)題。Web 的初衷是什么？讓所有人無(wú)障礙的使用網(wǎng)頁(yè)。這不是技術(shù)問(wèn)題，不是時(shí)間問(wèn)題，是認(rèn)知的問(wèn)題。

6）注意checkbox默認(rèn)打勾屬性

就說(shuō)一個(gè)：html checkbox
checked屬性（也就是默認(rèn)是否打勾的屬性）的寫法：

表明默認(rèn)打勾的，
不過(guò)：

甚至：

都全是表示默認(rèn)打勾的。

因此，當(dāng)checked出現(xiàn)在checkbox，都表示默認(rèn)打勾。

7）從來(lái)doctype都是由編輯器自己生產(chǎn)的，這沒(méi)關(guān)系，可是你也得分清楚你需要的是那種XHTML。

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

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

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

#p#

 javascript

1）請(qǐng)為parseInt設(shè)置第二個(gè)參數(shù)。

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

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

　　省略第二個(gè)參數(shù)，如果第一個(gè)參數(shù)以0為開頭，將以8為基數(shù)。

因此，如果不設(shè)置parseInt()的第二個(gè)參數(shù)，當(dāng)?shù)谝粋€(gè)參數(shù)為“08”或“09”時(shí)，將會(huì)出現(xiàn)意想不到的結(jié)果。

2）過(guò)濾innerHTML將的值。

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

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

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

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

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

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

6）盡量少使用for in來(lái)遍歷數(shù)組。

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

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

在onload里location.href = url; 做無(wú)條件跳轉(zhuǎn)邏輯的時(shí)候不用replace，會(huì)導(dǎo)致瀏覽器后退退不回去。

8）嚴(yán)謹(jǐn)正則表達(dá)式

　　var param = location.href.match(/a=([^\&\?]+)/)[1]; 濫用正則，使用不嚴(yán)謹(jǐn)?shù)恼齽t匹配url參數(shù)，結(jié)果會(huì)把 baba xaxa sba匹配進(jìn)去。

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

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

10）進(jìn)行浮點(diǎn)數(shù)計(jì)算之后，調(diào)用toFiexd。

a=0.1, b=0.2，element.innerText = a+b;，浮點(diǎn)數(shù)顯示前不調(diào)toFixed，將會(huì)出現(xiàn)意想不到的結(jié)果。

11）方法或者代碼塊執(zhí)行之后，應(yīng)加分號(hào)。

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

兩個(gè)立即調(diào)用函數(shù)之間沒(méi)有寫分號(hào)，兩個(gè)立即調(diào)用函數(shù)會(huì)被粘連起來(lái)，出現(xiàn)異常。

#p#

css

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

2）不分場(chǎng)景的使用 overflow:hidden 來(lái)閉合浮動(dòng)

　　華麗麗的demo

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

　　-webkit-text-size-adjust放在body上會(huì)導(dǎo)致頁(yè)面縮放失效

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

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

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

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

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

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

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

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

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

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

6）混淆圖像格式

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

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

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

•  對(duì)于網(wǎng)頁(yè)中的 背景, 按鈕等盡量采用PNG存儲(chǔ), 以保證更好的視覺(jué)品質(zhì);廣告,商品等則可以使 用JPG來(lái)存儲(chǔ)(此時(shí)文件更小,更快的加載)

7） 給block-level元素應(yīng)用vertical-align，結(jié)果發(fā)現(xiàn)根本不生效。

　　默認(rèn)的block-level元素 有