有哪些經常被誤用的 HTML、JavaScript、CSS 的元素、方法和屬性？
以前想要把一個元素（input 之類的）設成只讀的時候都是用 disabled，后來發現這是不對的。 因為在 HTML 里面，如果一個元素被設置成 disabled， 那么它的值就不會被發送到 server 端。 正確的做法應該是使用 readonly。
那么除了這個 disabled，在 Web 開發中還有哪些東西是經常被誤用的？
那么除了這個 disabled，在 Web 開發中還有哪些東西是經常被誤用的？
按票數排序
按時間排序
21 個回答
一絲，專業 CSS 吐槽，下面專家
瀉葯！
別的我不會，僅說一下 CSS 方面的吧！
好吧我還是說點其他的吧：
圖片來源：《CSS 進階之路》
https://skydrive.live.com/?id=4817543FE4BCFC5E!107&cid=4817543fe4bcfc5e#!/view.aspx?cid=4817543FE4BCFC5E&resid=4817543FE4BCFC5E%21108&app=PowerPoint
延伸閱讀： 在 CSS 布局中，用 float 好還是用 position 好？分別有什么優勢？
以上都是片面或者不對的！
一絲
別的我不會，僅說一下 CSS 方面的吧！
- float:left/right 或者 position: absolute 后還寫上 display:block，畫蛇添足（三者關系：Visual formatting model）
- 不分場景的使用 overflow:hidden 來閉合浮動（詳見：那些年我們一起清除過的浮動）
- 為了讓 Chrome 這個腦殘支持小於12px 的文字，在 html 設置 -webkit-text-size-adjust:none; (最新的桌面版該屬性已經被刪除了，變更集：Changeset 145168)
- 認為 px 是一個絕對單位（px 是相對單位），整個頁面都是 px，line-height 也用 px，全家都是 px
- 習慣性不分場景的去除 a 標簽 focus 時候的焦點
- 認為布局就是 Float，所有的地方都是 Float，全家都是 Float！（試試 inline-block inline-block 前世今生 吧，試試 Flexbox 吧）
- 滿頁面都是用 .clearfix 來閉合浮動，如果已經有了BFC為嘛還要在閉合浮動呢？毒害不淺，某浪微博為例，102個 .clearfix
好吧我還是說點其他的吧：
- 搞不拎清 PNG 的分類，認為 PNG24 支持透明，不知道 PNG8 也支持 α 透明（可以看看：PNG的秘密）
- 我又要吐槽 Label 不加 for ，或者 for 屬性加的不對的問題（請看：雅安地震，前端開發者可以做什么？）
- 看到@賀師俊老濕說道 ul，ol 濫用的問題，我舉一個本來應該用 ol 卻寫成 ul 的例子：
首頁 | 微吧 一起扎堆吧！找反面教材，都去渣浪吧，渣浪你承認不？
- 查看源碼，滿屏都是 div 的就不多說了吧……
圖片來源：《CSS 進階之路》
https://skydrive.live.com/?id=4817543FE4BCFC5E!107&cid=4817543fe4bcfc5e#!/view.aspx?cid=4817543FE4BCFC5E&resid=4817543FE4BCFC5E%21108&app=PowerPoint
延伸閱讀： 在 CSS 布局中，用 float 好還是用 position 好？分別有什么優勢？
以上都是片面或者不對的！
一絲
winter，51js斑竹
知乎用戶、知乎用戶、
Raindrop Mr
等人贊同
我來補充幾個JS的
- parseInt 不寫第二個參數，結果被"08"、"09"坑哭
- element.innerHTML = text，結果所有大於號小於號&都坑了，然后還被XSS
- setTimeout("a="+a+";alert(a);",1000)，拿變量toString當Literal，結果除了數字都坑了
- alert("<?=a>")，跟后端語言配合，不考慮字符串里的\和"等特殊字符
- new Date("2014-11-11 00:00:00")，使用不符合標准的日期字符串，聽天由命
- for(var i in array) /*……*/ ; 圖省事for in遍歷數組，有人改了數組prototype就出來奇怪東西了
- 在onload里location.href = url; 做無條件跳轉邏輯的時候不用replace，導致瀏覽器后退退不回去
- var param = location.href.match(/a=([^\&\?]+)/)[1]; 濫用正則，使用不嚴謹的正則匹配url參數，結果把 baba xaxa sba都給匹配進去了
- $("input.2b").attr("value",2333333) 拿attribute當property用，結果人家手動輸入以后就坑了
- a=0.1, b=0.2，element.innerText = a+b;，浮點數顯示前不調toFixed，結果出來了奇怪的東西
- var c = 100 + $("input.2b")[0].value; 沒用parseInt或者Number，結果變成字符串相加了
- 1.toString() 點前面不加空格，結果語法錯誤導致頁面全掛
(function(){ //do something })() (function(){ //do something })()
不寫分號，導致粘到上一行去了
賀師俊，Web開發者
【Update】
寫了 xhtml 的 doctype，但是文檔連 well-formed 都沒做到。比如渣浪微博。騰訊原來也是，不過最近似乎改好了。
【/Update】
幾乎每個 HTML 標簽都可能被用錯，TABLE布局這種我就不說了，下面挑在各互聯網大站屢見不鮮的說：
元素方面
1. 濫用 UL、DL
2. 該用 OL 的用 UL
3. 段落不會用 P 只會用 BR 和 DIV
4. 不會用 H1 / H2 / H3 ... 只會用 STRONG 甚至 DIV
5. 不會用 LABEL、FIELDSET、LEGEND
6. 亂用 ABBR、CITE、Q 之類比較少見的標簽
7. 不會用或亂用 B / I / S / U 之類在 HTML5 中重新定義過的標簽
屬性方面
1. 多 class 症（病入膏肓的表現就是幾乎每個元素上都有不止一個 class）
2. IMG 的 alt 屬性沒有意義（比如和title屬性一樣）
3. 混淆 INPUT 的 disabled 屬性和 readonly 屬性
4. LABEL 元素的 for 屬性
5. 不會使用 lang 屬性或 lang 屬性寫成 zh-CN 等已經廢棄的用法
寫了 xhtml 的 doctype，但是文檔連 well-formed 都沒做到。比如渣浪微博。騰訊原來也是，不過最近似乎改好了。
【/Update】
幾乎每個 HTML 標簽都可能被用錯，TABLE布局這種我就不說了，下面挑在各互聯網大站屢見不鮮的說：
元素方面
1. 濫用 UL、DL
2. 該用 OL 的用 UL
3. 段落不會用 P 只會用 BR 和 DIV
4. 不會用 H1 / H2 / H3 ... 只會用 STRONG 甚至 DIV
5. 不會用 LABEL、FIELDSET、LEGEND
6. 亂用 ABBR、CITE、Q 之類比較少見的標簽
7. 不會用或亂用 B / I / S / U 之類在 HTML5 中重新定義過的標簽
屬性方面
1. 多 class 症（病入膏肓的表現就是幾乎每個元素上都有不止一個 class）
2. IMG 的 alt 屬性沒有意義（比如和title屬性一樣）
3. 混淆 INPUT 的 disabled 屬性和 readonly 屬性
4. LABEL 元素的 for 屬性
5. 不會使用 lang 屬性或 lang 屬性寫成 zh-CN 等已經廢棄的用法
補充
@一絲
的，
比如 a 和 a: link 大家會傻傻分不清楚。
比如一般人認為 margin 只有垂直方向才有 collapse。
比如，我以前認為 outerline 只有在 :focus 的時候才能用。
比如，絕對定位元素的參考區域是 padding - box，如果沒有記錯的話。
比如 a 和 a: link 大家會傻傻分不清楚。
比如一般人認為 margin 只有垂直方向才有 collapse。
比如，我以前認為 outerline 只有在 :focus 的時候才能用。
比如，絕對定位元素的參考區域是 padding - box，如果沒有記錯的話。
在 CSS reset 或 common 的鏈接定義加上 :like、:visited 和 :active 處理...
瞧！那個做網站框架升級的哥們又罵娘了。
因為有人說不理解，補上我以前寫的關於鏈接樣式規划的文章：
《 a 標簽的樣式規划》
瞧！那個做網站框架升級的哥們又罵娘了。
因為有人說不理解，補上我以前寫的關於鏈接樣式規划的文章：
《 a 標簽的樣式規划》
知乎用戶，代碼民工
table!!
我一定要為table正名~~table 談不上誤用，但絕對是被最被誤解的一個標簽， 無論誰都在說div+css，卻沒有去注意過多的標簽的語義化，我清楚的記得我做的一東西發給別人看的時候別人用極其鄙視的口氣跟我說，居然還用table!!
table 是用來定義 表格 的，所以在顯示數據表格的時候就應該用table，而不該用其他的，事實上當你需要顯示數據表格的時候，使用table也會方便很多。
至於，table的誤用，就是用table來進行布局，但現在幾乎很少人這么做了，哪怕新手~
最后 感謝 @一絲 的答案~~~
我一定要為table正名~~table 談不上誤用，但絕對是被最被誤解的一個標簽， 無論誰都在說div+css，卻沒有去注意過多的標簽的語義化，我清楚的記得我做的一東西發給別人看的時候別人用極其鄙視的口氣跟我說，居然還用table!!
table 是用來定義 表格 的，所以在顯示數據表格的時候就應該用table，而不該用其他的，事實上當你需要顯示數據表格的時候，使用table也會方便很多。
至於，table的誤用，就是用table來進行布局，但現在幾乎很少人這么做了，哪怕新手~
最后 感謝 @一絲 的答案~~~
濫用style、濫用ID、濫用js生成html、濫用css3特效、為了不使用table而不使用table（用層層div+css模擬）
就說一個：html checkbox
這個標簽坑爹的地方就在於：checked屬性（也就是默認是否打勾的屬性）的寫法非常坑爹，一不留神就會寫成是默認打勾的~~
正常情況下：
表明默認打勾的，
不過：
甚至：
都全是表示默認打勾的！
那么怎么樣才算是默認不打勾？只有“checked”字樣不在標簽中出現時。
stackoverflow上有一篇討論就是有關這個話題的：
What is the syntax for boolean attributes, e.g. a checked checkbox, in HTML?
這個標簽坑爹的地方就在於：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”字樣不在標簽中出現時。
stackoverflow上有一篇討論就是有關這個話題的：
What is the syntax for boolean attributes, e.g. a checked checkbox, in HTML?
其實布局很在乎標簽的語義，對號入座才行。
例如：產品的循環一般都用 ui li 但用dl dt dd 是比較符合語義的； a標簽有時會套用在div外面或者是塊標簽外面，其實也是不正確的；其次是忘記寫寬高等。
例如：產品的循環一般都用 ui li 但用dl dt dd 是比較符合語義的； a標簽有時會套用在div外面或者是塊標簽外面，其實也是不正確的；其次是忘記寫寬高等。
到處都是DIV，然后用css來定義標題的效果，不用H1、H2等標題標簽，這是經常被忽略的HTML標簽使用的語義性，標題用H1..H6是有層次的，而且對頁面的抓取也有很大的影響，大家多注意吧。
幾個很常見的，如下：
類型聲明：type 多余.
結尾處的逗號： {a:0,}、[1,2,]
語義：p標簽包含div.
沖突：如 #wrap span{...}.
人民幣符號：￥少一橫.
濫用：!important、$.ajax()
情緒化命名：.sb、#sb_box 、lj.png
緩存：304 不更新.
類型聲明：type 多余.
結尾處的逗號： {a:0,}、[1,2,]
語義：p標簽包含div.
沖突：如 #wrap span{...}.
人民幣符號：￥少一橫.
濫用：!important、$.ajax()
情緒化命名：.sb、#sb_box 、lj.png
緩存：304 不更新.
沒開始干這行之前，我就抱着那本老厚的《js高級程序設計》來回啃了兩三遍，深受啟發和影響，以為寫程序就該那么樣，注重穩定、兼容、性能等等。
真干上以后發現還真不是這么回事，就一切圖工，然后不斷跟着需求重復、來回地改代碼。需要什么直接上網找現成，搬代碼，根本沒有一點鑽研精神。
我們的組長工資估計也上w了吧，可是連基礎js都不會，前些天搞個字符串拼串搞半天，最后實在啃不下來才一臉不好意思地問我，搞得我我還踹踹不安以為他有什么難題要考我
感覺自己都要被慢慢腐蝕了，我得趕緊跳出這個怪圈子。。
真干上以后發現還真不是這么回事，就一切圖工，然后不斷跟着需求重復、來回地改代碼。需要什么直接上網找現成，搬代碼，根本沒有一點鑽研精神。
我們的組長工資估計也上w了吧，可是連基礎js都不會，前些天搞個字符串拼串搞半天，最后實在啃不下來才一臉不好意思地問我，搞得我我還踹踹不安以為他有什么難題要考我
感覺自己都要被慢慢腐蝕了，我得趕緊跳出這個怪圈子。。
這些東西被誤用的情況，不勝枚舉，其更深層次的原因在於編寫者不求甚解抑或是沒有這種意識不太care。手機打字可能有錯別字，勿怪
看大家都寫了這么多，順手再加上一些：
1. 給block-level元素應用vertical-align，結果發現根本不生效；
2. 給inline non-replaced elements定義寬高，結果發現也不生效；
3. 給input/button定義line-height，試圖實現垂直居中，結果個瀏覽器下的效果，讓你崩潰，沒弄清楚line-height的使用場景；
4. 給inline non-replaced elements定義垂直補白，結果又哭了；
5. 給非定位元素定義了z-index堆疊級別；
6. 給一個元素定義了opacity並且值小於1，發現有些元素被它蓋住了，然后也懵了；
7. 給自閉合標簽加了成對閉合，給成對閉合標簽加了自閉合；
8. 把@import寫到了其它規則集之后，結果還以為是自己的路徑錯了；
9. 真的在address標簽里寫家庭住址信息或者其他地址信息；
10. 完全把main, section, article, aside等當成div來用了；
簡單列以上10條，這么做過的童鞋共勉，沒做過的童鞋贊美一下。總之實際工作中誤用亂用的例子實在太多，就不一一列舉，希望引起大家關注並改善類似情況。
看大家都寫了這么多，順手再加上一些：
1. 給block-level元素應用vertical-align，結果發現根本不生效；
2. 給inline non-replaced elements定義寬高，結果發現也不生效；
3. 給input/button定義line-height，試圖實現垂直居中，結果個瀏覽器下的效果，讓你崩潰，沒弄清楚line-height的使用場景；
4. 給inline non-replaced elements定義垂直補白，結果又哭了；
5. 給非定位元素定義了z-index堆疊級別；
6. 給一個元素定義了opacity並且值小於1，發現有些元素被它蓋住了，然后也懵了；
7. 給自閉合標簽加了成對閉合，給成對閉合標簽加了自閉合；
8. 把@import寫到了其它規則集之后，結果還以為是自己的路徑錯了；
9. 真的在address標簽里寫家庭住址信息或者其他地址信息；
10. 完全把main, section, article, aside等當成div來用了；
簡單列以上10條，這么做過的童鞋共勉，沒做過的童鞋贊美一下。總之實際工作中誤用亂用的例子實在太多，就不一一列舉，希望引起大家關注並改善類似情況。
庄澤進，碼農。近期項目http://purple.heineiuo.com
列一些自己犯過的錯誤（個人感覺冷門的）：
js：
css：
html:
發現真要寫還寫不出幾個冷門的 = =，有空再說
js：
- 看起來一樣的兩個數組不等：['a'] == ['a'] // false
- RegExp不是String: /^[0-9]$/ == '/^[0-9]$/ ' // false，主要是因為當時沒仔細注意chrome的console里RegExp（無引號的紅色）和String（有引號的紅色）的區別
css：
- :before和:after要有content才有用，起碼是content: ‘’;
html:
- utf8的bom頭，現代編輯器應該都不會再有這個問題了吧0.0
發現真要寫還寫不出幾個冷門的 = =，有空再說
<textarea class="qcn_txdd_table_textarea">
</textarea>
<textarea class="qcn_txdd_table_textarea">
</textarea>
<--------------------------------------------------- 2014.12.04 分割線 ------------------------------------------------->
<input type="file" class="input_style" />
現在基本上都是ajax了吧，你的項目還在用form提交數據嗎？
disabled和readonly在顯示效果上也是有區別的。前者不能獲得焦點，后者可以獲得焦點。默認的顯示樣式也是有區別的。
一個只讀數據不能輸入的話它是由什么規則生成的？如果能由其他數據根據某個規則生成，那么該數據就不是必要的，也不需要提交到服務端。因為其值通過其他數據可以直接生成出來。
如果其值是由其他數據生成，並且和其他數據有嚴格的邏輯關聯，該數據提交到服務端直接保存不經驗證的話是不安全的。因為請求是可以偽造，直接保存可能會保存經過篡改的混亂數據。
如果驗證的話也是和其他關聯數據做比較，完全沒有必要。所以我覺得這個地方可能是你的服務端處理有問題。
disabled和readonly在顯示效果上也是有區別的。前者不能獲得焦點，后者可以獲得焦點。默認的顯示樣式也是有區別的。
一個只讀數據不能輸入的話它是由什么規則生成的？如果能由其他數據根據某個規則生成，那么該數據就不是必要的，也不需要提交到服務端。因為其值通過其他數據可以直接生成出來。
如果其值是由其他數據生成，並且和其他數據有嚴格的邏輯關聯，該數據提交到服務端直接保存不經驗證的話是不安全的。因為請求是可以偽造，直接保存可能會保存經過篡改的混亂數據。
如果驗證的話也是和其他關聯數據做比較，完全沒有必要。所以我覺得這個地方可能是你的服務端處理有問題。
1.為了顯示效果經常用其他標簽加css樣式和js模擬select的操作；
2.許多頁面明明可以用框架，但是很多人一定要用Ajax來做；
3.到處都是px，px 一個頁面下來就沒看見其他單位；
4.垂直居中除了單行的時候用line-height(居然單位用的也是px)，其他的多行情況，用 margin（padding）擠擠好了；
5.都鏈接需要新開一個頁面時直接target：_blank;就完事了。
6.很少看見有人用word-spacing之類的屬性，如果界面達不到效果通常就想着padding，margin,或者干脆直接把文字弄小點；
7.img元素永遠也不寫alt。
8.從一開始寫頁面就用一個長長的cssreset把所有的瀏覽器默認樣式統統干掉了，你妹呀。
9.反正css就那么點東西，布局的時候不是position，就是float。可是你告訴我為毛在移動端你也不用css3；
10.閉合浮動的時候，都是先定義好一個.clear樣式，然后加空div；
11.從來doctype都是有編輯器自己生產的，這沒關系，可是你也得分清楚你需要的是那種XHTML吧。
12.我只負責這個頁面，我就寫這個頁面，從來沒想過其他頁面怎么辦，造成維護非常困難。
13.很多人，不熟悉表格，表單，框架很多常用的屬性；
2.許多頁面明明可以用框架，但是很多人一定要用Ajax來做；
3.到處都是px，px 一個頁面下來就沒看見其他單位；
4.垂直居中除了單行的時候用line-height(居然單位用的也是px)，其他的多行情況，用 margin（padding）擠擠好了；
5.都鏈接需要新開一個頁面時直接target：_blank;就完事了。
6.很少看見有人用word-spacing之類的屬性，如果界面達不到效果通常就想着padding，margin,或者干脆直接把文字弄小點；
7.img元素永遠也不寫alt。
8.從一開始寫頁面就用一個長長的cssreset把所有的瀏覽器默認樣式統統干掉了，你妹呀。
9.反正css就那么點東西，布局的時候不是position，就是float。可是你告訴我為毛在移動端你也不用css3；
10.閉合浮動的時候，都是先定義好一個.clear樣式，然后加空div；
11.從來doctype都是有編輯器自己生產的，這沒關系，可是你也得分清楚你需要的是那種XHTML吧。
12.我只負責這個頁面，我就寫這個頁面，從來沒想過其他頁面怎么辦，造成維護非常困難。
13.很多人，不熟悉表格，表單，框架很多常用的屬性；