扎實的基礎有時候需要縱覽群書，但針對編碼領域，單靠紙上談兵遠遠不夠。思考，實踐，再思考，再實踐。累積到一定代碼量，思路自然豁然開朗。重復的時間沉淀，將締造更加強健高效的代碼。
部分整理自網絡，個人水平有限，望見諒。
html
1）將input設為只讀，使用readonly而非diabled
disbled和readonly類似，會將輸入框設置為不可輸入狀態，但是在html中，如果一個元素被設置為disabled，它的值就不會被發送到server端。因此，將元素設為只讀時，只能使用readonly。
disabled和readonly在顯示效果上也是有區別的。前者不能獲得焦點，后者可以獲得焦點。默認的顯示樣式也是有區別的。
一個只讀數據不能輸入的話它是由什么規則生成的？如果能由其他數據根據某個規則生成，那么該數據就不是必要的，也不需要提交到服務端。因為其值通過其他數據可以直接生成出來。如果其值是由其他數據生成，並且和其他數據有嚴格的邏輯關聯，該數據提交到服務端直接保存不經驗證的話是不安全的。因為請求是可以偽造，直接保存可能會保存經過篡改的混亂數據。
當然，如果驗證的話也是和其他關聯數據做比較，其實也沒必要過多在意disabled和readonly的區別。
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元素關聯起來，當點擊label時，就可以讓該ID也獲得焦點！
label 標簽錯誤的加到了性別上，而男、女選項根本沒有加 label 標簽，就別提正確的使用 for 屬性了。這是很可悲的，甚至很多人根本認為這就不是一個問題。Web 的初衷是什么？讓所有人無障礙的使用網頁。這不是技術問題，不是時間問題，是認知的問題。
6）注意checkbox默認打勾屬性
就說一個：html checkbox
checked屬性（也就是默認是否打勾的屬性）的寫法：<input type="checkbox" checked="checked">
表明默認打勾的，
不過：
<input type="checkbox" checked="true" /> <input type="checkbox" checked="yes" /> <input type="checkbox" checked="no" /> <input type="checkbox" checked="" /> 甚至：
<input type="checkbox" checked> 都全是表示默認打勾的。
因此，當checked出現在checkbox，都表示默認打勾。
7）從來doctype都是由編輯器自己生產的，這沒關系，可是你也得分清楚你需要的是那種XHTML。
Doctype聲明位於文檔中的最前面的位置，處於標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。該標簽可聲明三種DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
當瀏覽器廠商開始創建與標准兼容的瀏覽器時，他們希望確保向后兼容性。為了實現這一點，他們創建了兩種呈現模式：標准模式和混雜模式（quirks mode）。在標准模式中，瀏覽器根據規范呈現頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器（比如Microsoft IE 4和Netscape Navigator 4）的行為以防止老站點無法工作。
<!DOCTYPE>聲明位於文檔中的最前面的位置，處於<html>標簽之前。此標簽可告知瀏覽器文檔使用哪種HTML或XHTML規范。
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("<?=a>")，跟后端語言配合時，要考慮字符串里的\和"等特殊字符。
5）new Date("2014-11-11 00:00:00")，使用不符合標准的日期字符串，結果將難以想象。
6）盡量少使用for in來遍歷數組。
正如我們所知道：for in一般用於對象遍歷，而數組遍歷通常使用for，然而的數組可以使用for in循環遍歷，因為array是object的子類。但是遍歷對象，除了數組本身的屬性被遍歷出來外，但是一旦在遍歷之前，數組已經被修改prototype。for in也將會把添加到原型鏈prototype上的屬性。
7）加載時執行location.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）方法或者代碼塊執行之后，應加分號。
(function(){ //do something
})() (function(){ //do something
})()
兩個立即調用函數之間沒有寫分號，兩個立即調用函數會被粘連起來，出現異常。
css
1）float:left/right 或者 position: absolute 后不需要寫上 display:block。三者關系：
2）不分場景的使用 overflow:hidden 來閉合浮動
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） 是一種無損位圖圖像文件格式。可以逐次逼近顯示： 先描繪出圖片輪廓，然后在逐步顯示圖像的細節。
透明性：①布爾透明(索引透明) 只能為不透明或全透明。 ②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更優(矢量)
- PNG 就是為了取代GIF而生的，除了動畫 圖片等特殊場景使用，一般推薦使用PNG
- 對於圖像顏色豐富或者層次較深的圖片采用 JPG更優,例如:人物,風景等寫實類拍攝照片
- 對於網頁中的 背景, 按鈕等盡量采用PNG存儲, 以保證更好的視覺品質;廣告,商品等則可以使 用JPG來存儲(此時文件更小,更快的加載)
7） 給block-level元素應用vertical-align，結果發現根本不生效。
默認的block-level元素有<address><blockquote><div><dl><fieldset><form><h1><h3><ol><p><table><ul>
而這些元素，因為包含在block-level，因此可以認作block-level<dd><dt><li><th><tfoot><tr><td>
所有瀏覽器都支持vertical-align 屬性設置元素的垂直對齊方式。但是對於一個沒有設定高度，高度由元素內部決定的元素來說，設置verical-align無效。
實現非固定高度元素的垂直居中，可以參考http://www.cnblogs.com/0603ljx/p/4440449.html第三條
8）避免給行內非替代元素設置高度。
CSS標准決定，無法給行內非替代元素設定高度寬度，和margin，padding。
這也同時說明引入reset.css是否有必要，設置所有元素*{margin:0;padding:0}，會為行內非替換元素設置一些無效的屬性，加重瀏覽器首次加載的負擔。
9）避免給input/button元素設定百分比line-height。
line-height 屬性設置行間的距離（行高）。
給input/button定義line-height，試圖實現垂直居中，但是會改變button本身元素高度加上button默認自帶的overflow:hidden，導致button的高度無法完全支撐內部文本的顯示，也就是一旦百分比設置小於100%，button的文本無法完全顯示。
10） 非定位元素無法設定z-index堆疊級別。
對於position為static（默認值）的元素，是無法設置z-index。
11） 避免給自閉合標簽加了成對閉合，給成對閉合標簽加了自閉合。
自閉合元素：
<br/> <hr/>
<area/>帶有可點擊區域的圖像映射
<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/>標簽為頁面上的所有鏈接默認地址或默認目標
外聯js腳本文件：<script type="text/javascript" src="example.js"></script>
如果是在XHTML中可以使用<script type="text/javascript" src="example.js"/>，不能在HTML文檔中使用這種語法，不符合HTML規范，尤其得不到IE的正確解析
12）注意@import規則集的順序。
不是技術問題，而是時間問題，編寫代碼時要細心，避免后設置的元素屬性覆蓋前面設置的屬性。
13） 不能完全把main, section, article, aside等當成div使用
看似相似，並不是真的相似，main, section, article, aside這些標簽是為了布局而生的，自然有它們更精確的語義定位，或者說他們更將強調HTML的語義。
DIV 這個標簽一直是我們見得最多、用得最多的標簽。它本身無任何語義，用作布局以及樣式化標簽。
section與div相似，但它有更進一步的語義。section用作一段有專題性的內容，一般在它里面會帶有標題。 section典型的應用場景應該是文章的章節、標簽對話框中的標簽頁、或者論文中有編號的部分。
article是一個特殊的section標簽，它比section具有更明確的語義, 它代表一個獨立的、完整的相關內容塊。 div、section、article，語義是從無到有，逐漸增強的。div無任何語義，僅僅用作樣式化或者腳本化的標簽，對於一段主題性的內容，則就適用section，而假如這段內容可以脫離上下文，作為完整的獨立存在的一段內容，則就適用 article。 原則上來說，能使用article的時候，也是可以使用section的，但是實際上，假如使用article更合適，那么就不要使用section。
這么做過的童鞋共勉，沒做過的童鞋贊美一下。總之實際工作中誤用亂用的例子實在太多，就不一一列舉，希望引起大家關注並改善類似情況。