知乎上关于前端工做中常常遇到的问题总结

时间 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 条评论