糾正前端開發(fā)中容易出錯(cuò)知識(shí)點(diǎn)
扎實(shí)的基礎(chǔ)有時(shí)候需要縱覽群書，但針對(duì)編碼領(lǐng)域，單靠紙上談兵遠(yuǎn)遠(yuǎn)不夠。思考，實(shí)踐，再思考，再實(shí)踐。累積到一定代碼量，思路自然豁然開朗。重復(fù)的時(shí)間沉淀，將締造更加強(qiáng)健高效的代碼。
部分整理自網(wǎng)絡(luò)，個(gè)人水平有限，望見諒。
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)槠渲低ㄟ^其他 數(shù)據(jù)可以直接生成出來。如果其值是由其他數(shù)據(jù)生成，并且和其他數(shù)據(jù)有嚴(yán)格的邏輯關(guān)聯(lián)，該數(shù)據(jù)提交到服務(wù)端直接保存不經(jīng)驗(yàn)證的話是不安全的。因?yàn)檎?qǐng)求是可以 偽造，直接保存可能會(huì)保存經(jīng)過篡改的混亂數(shù)據(jù)。
當(dāng)然，如果驗(yàn)證的話也是和其他關(guān)聯(lián)數(shù)據(jù)做比較，其實(shí)也沒必要過多在意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中重新定義過的標(biāo)簽。
濫用ul和ol：
3）應(yīng)該避免每個(gè)元素上不止一個(gè)class
class是一個(gè)選擇器，可以理解為一個(gè)標(biāo)識(shí)，用來標(biāo)識(shí)特定的標(biāo)簽。每個(gè)頁面上都一定會(huì)有重復(fù)的樣式，沒必要重寫那部分樣式，因此經(jīng)常會(huì)使用class。但是并不代表每個(gè)元素都要有多個(gè)class。
4）定義 img元素 的 alt 屬性
如果無法顯示圖像，瀏覽器將顯示替代文本，同時(shí)也會(huì)方便機(jī)器朗讀，提高可訪問性。
5） label元素的 for 屬性；
label的for屬性。它為label指定了一個(gè)目標(biāo)，一般是一個(gè)form表單內(nèi)元素的ID，這樣就可以把這個(gè)label與該ID元素關(guān)聯(lián)起來，當(dāng)點(diǎn)擊label時(shí)，就可以讓該ID也獲得焦點(diǎn)！
label 標(biāo)簽錯(cuò)誤的加到了性別上，而男、女選項(xiàng)根本沒有加 label 標(biāo)簽，就別提正確的使用 for 屬性了。這是很可悲的，甚至很多人根本認(rèn)為這就不是一個(gè)問題。Web 的初衷是什么？讓所有人無障礙的使用網(wǎng)頁。這不是技術(shù)問題，不是時(shí)間問題，是認(rèn)知的問題。
6）注意checkbox默認(rèn)打勾屬性
就說一個(gè)：html checkbox
checked屬性（也就是默認(rèn)是否打勾的屬性）的寫法：<input type="checkbox" checked="checked">
表明默認(rèn)打勾的，
不過：
<input type="checkbox" checked="true" /> <input type="checkbox" checked="yes" /> <input type="checkbox" checked="no" /> <input type="checkbox" checked="" />
甚至：
<input type="checkbox" checked>
都全是表示默認(rèn)打勾的。
因此，當(dāng)checked出現(xiàn)在checkbox，都表示默認(rèn)打勾。
7）從來doctype都是由編輯器自己生產(chǎn)的，這沒關(guān)系，可是你也得分清楚你需要的是那種XHTML。
Doctype聲明位于文檔中的最前面的位置，處于標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。該標(biāo)簽可聲明三種DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 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)頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示?；祀s模式通常模擬老式瀏覽器（比如Microsoft IE 4和Netscape Navigator 4）的行為以防止老站點(diǎn)無法工作。
<!DOCTYPE>聲明位于文檔中的最前面的位置，處于<html>標(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）過濾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; 沒用parseInt或者Number，結(jié)果變成字符串相加。
4）alert("<?=a>")，跟后端語言配合時(shí)，要考慮字符串里的\和"等特殊字符。
5）new Date("2014-11-11 00:00:00")，使用不符合標(biāo)準(zhǔn)的日期字符串，結(jié)果將難以想象。
6）盡量少使用for in來遍歷數(shù)組。
正如我們所知道：for in一般用于對(duì)象遍歷，而數(shù)組遍歷通常使用for，然而的數(shù)組可以使用for in循環(huán)遍歷，因?yàn)閍rray是object的子類。但是遍歷對(duì)象，除了數(shù)組本身的屬性被遍歷出來外，但是一旦在遍歷之前，數(shù)組已經(jīng)被修改 prototype。for in也將會(huì)把添加到原型鏈prototype上的屬性。
7）加載時(shí)執(zhí)行l(wèi)ocation.href = url請(qǐng)使用replace。
在onload里location.href = url; 做無條件跳轉(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ù)之間沒有寫分號(hào)，兩個(gè)立即調(diào)用函數(shù)會(huì)被粘連起來，出現(xiàn)異常。
#p#
css
1）float:left/right 或者 position: absolute 后不需要寫上 display:block。三者關(guān)系：
2）不分場(chǎng)景的使用 overflow:hidden 來閉合浮動(dòng)
3）讓 Chrome 支持小于12px 的文字，在 html 設(shè)置 -webkit-text-size-adjust:none。
-webkit-text-size-adjust放在body上會(huì)導(dǎo)致頁面縮放失效
用-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） 是一種無損位圖圖像文件格式?？梢灾鸫伪平@示： 先描繪出圖片輪廓，然后在逐步顯示圖像的細(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透明問題：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)頁中的 背景, 按鈕等盡量采用PNG存儲(chǔ), 以保證更好的視覺品質(zhì);廣告,商品等則可以使 用JPG來存儲(chǔ)(此時(shí)文件更小,更快的加載)
7） 給block-level元素應(yīng)用vertical-align，結(jié)果發(fā)現(xiàn)根本不生效。
默認(rèn)的block-level元素 有<address><blockquote><div><dl><fieldset><form><h1><h3><ol><p><table><ul>
而這些元素，因?yàn)榘赽lock-level，因此可以認(rèn)作block-level<dd><dt><li><th><tfoot><tr><td>
所有瀏覽器都支持vertical-align 屬性設(shè)置元素的垂直對(duì)齊方式。但是對(duì)于一個(gè)沒有設(shè)定高度，高度由元素內(nèi)部決定的元素來說，設(shè)置verical-align無效。
實(shí)現(xiàn)非固定高度元素的垂直居中，可以參考http://www.cnblogs.com/0603ljx/p/4440449.html第三條
8）避免給行內(nèi)非替代元素設(shè)置高度。
CSS標(biāo)準(zhǔn)決定，無法給行內(nèi)非替代元素設(shè)定高度寬度，和margin，padding。
這也同時(shí)說明引入reset.css是否有必要，設(shè)置所有元素*{margin:0;padding:0}，會(huì)為行內(nèi)非替換元素設(shè)置一些無效的屬性，加重瀏覽器首次加載的負(fù)擔(dān)。
9）避免給input/button元素設(shè)定百分比line-height。
line-height 屬性設(shè)置行間的距離（行高）。
給input/button定義line- height，試圖實(shí)現(xiàn)垂直居中，但是會(huì)改變button本身元素高度加上button默認(rèn)自帶的overflow:hidden，導(dǎo)致button的高 度無法完全支撐內(nèi)部文本的顯示，也就是一旦百分比設(shè)置小于100%，button的文本無法完全顯示。
10） 非定位元素?zé)o法設(shè)定z-index堆疊級(jí)別。
對(duì)于position為static（默認(rèn)值）的元素，是無法設(shè)置z-index。
11） 避免給自閉合標(biāo)簽加了成對(duì)閉合，給成對(duì)閉合標(biāo)簽加了自閉合。
自閉合元素：
<br/> <hr/>
<area/>帶有可點(diǎn)擊區(qū)域的圖像映射
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>
<base/>標(biāo)簽為頁面上的所有鏈接默認(rèn)地址或默認(rèn)目標(biāo)
外聯(lián)js腳本文件：<script type="text/javascript" src="example.js"></script>
如果是在XHTML中可以使用<script type="text/javascript" src="example.js"/>，不能在HTML文檔中使用這種語法，不符合HTML規(guī)范，尤其得不到IE的正確解析
12）注意@import規(guī)則集的順序。
不是技術(shù)問題，而是時(shí)間問題，編寫代碼時(shí)要細(xì)心，避免后設(shè)置的元素屬性覆蓋前面設(shè)置的屬性。
13） 不能完全把main, section, article, aside等當(dāng)成div使用
看似相似，并不是真的相似，main, section, article, aside這些標(biāo)簽是為了布局而生的，自然有它們更精確的語義定位，或者說他們更將強(qiáng)調(diào)HTML的語義。
DIV 這個(gè)標(biāo)簽一直是我們見得最多、用得最多的標(biāo)簽。它本身無任何語義，用作布局以及樣式化標(biāo)簽。
section與div相似，但它有更進(jìn)一步的語義。section用作一段有專題性的內(nèi)容，一般在它里面會(huì)帶有標(biāo)題。 section典型的應(yīng)用場(chǎng)景應(yīng)該是文章的章節(jié)、標(biāo)簽對(duì)話框中的標(biāo)簽頁、或者論文中有編號(hào)的部分。
article是一個(gè)特殊的section標(biāo)簽，它比section具有更明確的語義, 它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊。 div、section、article，語義是從無到有，逐漸增強(qiáng)的。div無任何語義，僅僅用作樣式化或者腳本化的標(biāo)簽，對(duì)于一段主題性的內(nèi)容，則就適用section，而假如這段內(nèi)容可以脫離上下文，作為完整的獨(dú)立存在的一段內(nèi)容，則就適用 article。 原則上來說，能使用article的時(shí)候，也是可以使用section的，但是實(shí)際上，假如使用article更合適，那么就不要使用section。
這么做過的童鞋共勉，沒做過的童鞋贊美一下?？傊畬?shí)際工作中誤用亂用的例子實(shí)在太多，就不一一列舉，希望引起大家關(guān)注并改善類似情況。
