知乎上關於前端工做中常常遇到的問題總結

時間 2019-12-06

原文原文鏈接

有哪些常常被誤用的 HTML、JavaScript、CSS 的元素、方法和屬性？

之前想要把一個元素（input 之類的）設成只讀的時候都是用 disabled，後來發現這是不對的。由於在 HTML 裏面，若是一個元素被設置成 disabled，那麼它的值就不會被髮送到 server 端。正確的作法應該是使用 readonly。

那麼除了這個 disabled，在 Web 開發中還有哪些東西是常常被誤用的？

添加評論分享

按票數排序按時間排序

21 個回答

一絲，專業 CSS 吐槽，下面專家

知乎用戶、釐米2014、 K NightLost 等人贊同

瀉藥！
別的我不會，僅說一下 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 好？分別有什麼優點？

以上都是片面或者不對的！
一絲

編輯於 2014-12-02 45 條評論

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
})()

不寫分號，致使粘到上一行去了

編輯於 2014-12-02 20 條評論

賀師俊，Web開發者

釐米2014、知乎用戶、 wind-stone 等人贊同

【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 等已經廢棄的用法

編輯於 2013-04-24 60 條評論

舊城，前端開發路上

沒有人、劉老煩、栗子君等人贊同

補充 @一絲的，
好比 a 和 a: link 你們會傻傻分不清楚。
好比通常人認爲 margin 只有垂直方向纔有 collapse。
好比，我之前認爲 outerline 只有在 :focus 的時候才能用。
好比，絕對定位元素的參考區域是 padding - box，若是沒有記錯的話。

發佈於 2013-04-23 10 條評論

吳釗，阿里巴巴前端

NdYAG、沒有人、知乎用戶等人贊同

在 CSS reset 或 common 的連接定義加上 :like、:visited 和 :active 處理...

瞧！那個作網站框架升級的哥們又罵娘了。

由於有人說不理解，補上我之前寫的關於連接樣式規劃的文章：
《 a 標籤的樣式規劃》

編輯於 2014-03-08 4 條評論

知乎用戶，代碼民工

李晨、 JohnBee Chen、劉老煩等人贊同

table!!

我必定要爲table正名~~table 談不上誤用，但絕對是被最被誤解的一個標籤，不管誰都在說div+css，卻沒有去注意過多的標籤的語義化，我清楚的記得我作的一東西發給別人看的時候別人用極其鄙視的口氣跟我說，竟然還用table!!

table 是用來定義表格的，因此在顯示數據表格的時候就應該用table，而不應用其餘的，事實上當你須要顯示數據表格的時候，使用table也會方便不少。

至於，table的誤用，就是用table來進行佈局，但如今幾乎不多人這麼作了，哪怕新手~

最後感謝 @一絲的答案~~~

發佈於 2014-03-07 4 條評論

糖醋排骨，不爽你就憋着

沒有人、劉老煩、席朋飛等人贊同

濫用style、濫用ID、濫用js生成html、濫用css3特效、爲了避免使用table而不使用table（用層層div+css模擬）

發佈於 2014-09-23 添加評論

盧名川，Node.js 腦殘粉

知乎用戶、劉老煩、席朋飛等人贊同

就說一個：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」字樣不在標籤中出現時。
stackoverflow上有一篇討論就是有關這個話題的：
What is the syntax for boolean attributes, e.g. a checked checkbox, in HTML?

發佈於 2014-08-31 4 條評論

FelixZYY

uyitalk、釐米2014、 Shirley 贊同

console.log()，在IE下就等着哭吧！

發佈於 2014-12-02 1 條評論

梁禮成，活到老學到老

知乎用戶、劉老煩贊同

其實佈局很在意標籤的語義，對號入座才行。
例如：產品的循環通常都用 ui li 但用dl dt dd 是比較符合語義的； a標籤有時會套用在div外面或者是塊標籤外面，其實也是不正確的；其次是忘記寫寬高等。

發佈於 2014-02-11 1 條評論

雪飛兒，高山仰止，景行行之，雖不能至，然心向往…

劉老煩、席朋飛贊同

處處都是DIV，而後用css來定義標題的效果，不用H一、H2等標題標籤，這是常常被忽略的HTML標籤使用的語義性，標題用H1..H6是有層次的，並且對頁面的抓取也有很大的影響，你們多注意吧。

發佈於 2014-04-18 3 條評論

jun lee

沒有人、劉老煩贊同

見過<a><table></a>的，算不算

發佈於 2014-09-28 添加評論

匿名用戶

yuan song、知乎用戶、劉老煩贊同

幾個很常見的，以下：

類型聲明：type 多餘.

結尾處的逗號： {a:0,}、[1,2,]

語義：p標籤包含div.

衝突：如 #wrap span{...}.

人民幣符號：￥少一橫.

濫用：!important、$.ajax()

情緒化命名：.sb、#sb_box 、lj.png

緩存：304 不更新.

發佈於 2014-10-08 3 條評論

知乎用戶

東京不熱、劉老煩贊同

有個疑問，表單元素前面設置一段空格是用text-indent仍是用padding-left，哪一個比較好？

發佈於 2014-10-10 4 條評論

沙筆

知乎用戶、逯子洋贊同

沒開始幹這行以前，我就抱着那本老厚的《js高級程序設計》來回啃了兩三遍，深受啓發和影響，覺得寫程序就該那麼樣，注重穩定、兼容、性能等等。
真幹上之後發現還真不是這麼回事，就一切圖工，而後不斷跟着需求重複、來回地改代碼。須要什麼直接上網找現成，搬代碼，根本沒有一點鑽研精神。
咱們的組長工資估計也上w了吧，但是連基礎js都不會，前些天搞個字符串拼串搞半天，最後實在啃不下來才一臉很差意思地問我，搞得我我還踹踹不安覺得他有什麼難題要考我
感受本身都要被慢慢腐蝕了，我得趕忙跳出這個怪圈子。。

發佈於 2014-12-02 2 條評論

杜瑤，始終致力於web前端開發技術

於江水、知乎用戶贊同

這些東西被誤用的狀況，不勝枚舉，其更深層次的緣由在於編寫者不求甚解抑或是沒有這種意識不太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條，這麼作過的童鞋共勉，沒作過的童鞋讚美一下。總之實際工做中誤用亂用的例子實在太多，就不一一列舉，但願引發你們關注並改善相似狀況。

編輯於 2014-12-03 1 條評論

莊澤進，碼農。近期項目http://purple.heineiuo.com

釐米2014、劉老煩贊同

列一些本身犯過的錯誤（我的感受冷門的）：

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

發現真要寫還寫不出幾個冷門的 = =，有空再說

發佈於 2014-04-16 8 條評論

高楠，怦然心動。

劉老煩贊同

<textarea class="qcn_txdd_table_textarea">
</textarea>

乍看相同，可實際上顯示效果是不一樣的。前者鼠標選中textarea框框時，閃爍符會出如今鼠標點擊的位置，而不是textarea的最左邊。當用後面一段代碼時，則閃爍符在內容爲空時始終出如今最左邊.

<textarea class="qcn_txdd_table_textarea">
</textarea>

太神奇了。我把textarea標籤加了2個回車，效果又不同了。你們能夠試一試。（囧，我也不知爲啥是這種狀況。）
<--------------------------------------------------- 2014.12.04 分割線 ------------------------------------------------->

<input type="file" class="input_style" />

若是直接設置input的css按鈕效果，會發現當upload文件後，文件名稱也會出現的按鈕效果，違背了設計初衷。查閱後發現能夠經過設置input隱藏等來曲線解決，可是不認爲這是好的解決方案，本人也未想出更好的辦法。

編輯於昨天 21:11 添加評論

蘇宇

如今基本上都是ajax了吧，你的項目還在用form提交數據嗎？

disabled和readonly在顯示效果上也是有區別的。前者不能得到焦點，後者能夠得到焦點。默認的顯示樣式也是有區別的。

一個只讀數據不能輸入的話它是由什麼規則生成的？若是能由其餘數據根據某個規則生成，那麼該數據就不是必要的，也不須要提交到服務端。由於其值經過其餘數據能夠直接生成出來。

若是其值是由其餘數據生成，而且和其餘數據有嚴格的邏輯關聯，該數據提交到服務端直接保存不經驗證的話是不安全的。由於請求是能夠僞造，直接保存可能會保存通過篡改的混亂數據。

若是驗證的話也是和其餘關聯數據作比較，徹底沒有必要。因此我以爲這個地方多是你的服務端處理有問題。

發佈於 2014-12-03 3 條評論

匿名用戶

駱泉、劉老煩、席朋飛等人贊同

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.不少人，不熟悉表格，表單，框架不少經常使用的屬性；

編輯於 2014-09-04 9 條評論