那些前端程序员深信不疑的谣言（ HTML 篇）

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Dive into HTML5

› http://diveintohtml5.org/

这是一个创建于 2826 天前的主题，其中的信息可能已经有所发展或是发生改变。

本文不考虑「团队规范」、「可读性」，只谈「语法」。

你了解完语法再去搞什么「团队规范」、「可读性」吧，不要本末倒置。

这里只讨论 HTML 5 ，不讨论 HTML 4.x 和 XHTML ，谨记！

谣言 1 ：属性一定要用引号包起来，比如 <div id="test">

正解： HTML 文档写得很清楚，属性有四种写法（突然有茴香豆既视感 /(ㄒoㄒ)/~~）

1 <input disabled>
2 <input value=yes>
3 <input type='checkbox'>
4 <input name="be evil">

有人一定会说加引号「最安全」，骗新人说「引号必须写」很省事啊。

我对此嗤之以鼻。

谣言 2 ：自闭合标签一定要以 /> 结尾，比如 <input /> <img />

正解：其实在 HTML 5 里 <input> 才是正确写法，详见 HTML 5 规范文档里的三处

Void elements only have a start tag;
Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single "/" (U+002F) character. This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.
Void elements: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

很容易推理出：对于 void elements ，<meta /> 完全可以写成 <meta>，而且是推荐写法。

谣言 3 ：所有标签必须闭合，比如 <p></p>

正解：请看 HTML 5 规范文档

A p element's end tag may be omitted if the p element is immediately followed by ...

所以以下写法完全符合要求

<p> 你好，
<p> 我是方方

谣言 4 ： HTML 5 文档里必须写 <html> <head> 和 <body> 标签

正解：在没有注释的前提下，这三个标签都是可不写的。具体看规范文档。

下面这段 HTML 是合法的 HTML 5

<!DOCTYPE html>
<title>这是一个合法的 HTML 5 文档</title>
<meta charset="UTF-8">
<p>这是一个合法的 HTML 5 文档

以上哪个谣言是你深信不疑的？

第 1 条附言 · 2017-02-26 13:03:55 +08:00

看来很多人把团队规范当做规格文档了。

第 2 条附言 · 2017-02-26 13:11:05 +08:00

我以后的文章都是标题党，受不了得快 block 我！

第 3 条附言 · 2017-02-26 13:13:21 +08:00

有些人的思路真是狭隘。看来是没制定过团队规范。

制定过团队规范的人，必须先详细了解各种写法的弊端，然后挑选其中最合理的，写成规范。

我这篇文章就是教你「详细了解各种写法」。

我当然知道弊端了。但那不是本文的目的。

本文的目的是破除迷信 O(∩_∩)O 哈哈~

第 4 条附言 · 2017-02-26 13:15:56 +08:00

这文章不比今天的 V2EX Top 10 高吗？

V2ex Top 10 如下：

1. 怎么搞个 google voice 的靓号
2. 京东的这个秘密，你一定不知道
3. vultr 选择日本节点还是美国西雅图节点
4. 来推荐个笔记本
5. 关注了一个产品经理的微博，我就在评论区点赞了别人一个评论，然后直接以被 @的形式点名攻击。点赞真的要小心！！！
6. 学校里用新 mbp 会不会被说装 X 啊
7. 使用理发器的同学要注意了
8. 怀念天朝的配送速度
9. 自己买了台海外服务器，做点什么能把资源最大利用

就这水平，好意思呵呵我……

第 5 条附言 · 2017-02-26 13:36:19 +08:00

/t/343251 各位如果有被打脸的，请对号入座。

第 6 条附言 · 2017-02-26 13:39:57 +08:00

《我来打你脸啦，你别拿着 XHTML 团队规范写 HTML 5 代码还以为自己是对的》

你家的团队规范该更新了。

109 条回复 • 2017-03-09 11:45:37 +08:00

1 2

❮

❯

ericls

2017-02-26 12:17:41 +08:00 via iPhone

哇这规范好差还好有 jsx

murmur

2017-02-26 12:18:05 +08:00

没事总搞这些用不着的加了不算错他又支持传承下来的东西就算是错的大家都执行就成了标准了
另外标准是什么东西？标准有时候是反人类的东西，尤其是 html css js 这种最终解释权在做浏览器和引擎的人手中的时候
打开你的 chrome 调试工具所有的属性加引号了没有？
不要总学公众号动不动就加个大新闻
就跟 js 的命名规范一样，写 c 和 php 的用下划线命名，写 java 的用驼峰命名，写 c#的驼峰首字母都大写，有何不可？

FrankFang128

2017-02-26 12:18:41 +08:00

我就是标题党，有问题么……

kindjeff

2017-02-26 12:19:10 +08:00

这些都是我的 IDE 深信不疑的！

FrankFang128

2017-02-26 12:19:13 +08:00

写点科普文而已，有些人就不高兴了。

SuperMild

2017-02-26 12:21:57 +08:00

只有 <p> 那个不知道，其它早知道了。其中不用写 head body 这个特性好极了，自从知道后就不写了。

murmur

2017-02-26 12:23:34 +08:00

几大撕逼话题：要不要加分号大括号要不要换行用单引号还是双引号期待下一篇你看我都开始猜题了

另外你难道没发现么没引号的东西加亮都没识别出来？可选可不选的东西有时候大家选了要是为了一些标准之外的东西

我在给你找个话题 python 2 的是 print 还是 print()?

Zzzzzzzzz

2017-02-26 12:23:38 +08:00

这些问题是因为以前流行 xhtml, 然后被 html5 一朝翻天

忍不住又要 @laogui 一下

murmur

2017-02-26 12:24:47 +08:00

@SuperMild 那我想问你，如果你动态往页面尾部插入一个元素，你用什么指令呢，没有 body 给你用， html 你也省略了，难道自己写一个大 div 替代 body ？

otakustay

2017-02-26 12:24:57 +08:00

语法 spec 和工程还是两回事，工程要考虑的事情太多了，比如猪队友、猪队友以及猪队友

FrankFang128

2017-02-26 12:27:24 +08:00

@murmur 浏览器自动加 body

murmur

2017-02-26 12:28:40 +08:00

@FrankFang128 很有意思，那再请问如果属性中有空格怎么处理呢，比如 class 有空格太正常了吧

FrankFang128

2017-02-26 12:32:03 +08:00

@murmur 本文说了四种方法，你选一种作为你坚持的用法就好了。

本文在讲「可以怎样」，而不是「必须怎样」。
你们在讨论「必须怎么」。

> 属性一定要用引号包起来，比如 <div id="test">

这种用谣言来「恐吓」新人的行为，我嗤之以鼻。

所以我不知道怎么回复这些人了。

murmur

2017-02-26 12:33:59 +08:00

@FrankFang128 讲真哎，你说单双引号、命名规范这些有的撕，但是我看了那么多源码，也没见过 html 不写引号的， webpack 打出来的 html 是我见到第一个不加引号的

当一个东西五五开的时候叫可以当一个东西一九开就成了必须了

ksco

2017-02-26 12:34:18 +08:00

有个统一的写法是好事，选择多反而不好。

另外这是直接从知乎拷贝过来的吧，所有的链接都要走一遍知乎。。

tracyone

2017-02-26 12:34:56 +08:00 via iPhone

虽然哥不是前端，也不是后端的，但是加引号的的作用还是清楚的，那就是能让编辑器区分什么字符串什么是关键字

FrankFang128

2017-02-26 12:35:02 +08:00

@murmur 「见没见过」和「可不可以」是两回事吧。
所以标题说有些人已经「深信不疑」了。

MinonHeart

2017-02-26 12:35:17 +08:00 via iPhone

代码可以正确运行就行
浏览器为了向下兼容，有些功能跟 spec 的实现都不一样

/前空格原因源于此：
<br id=id>
<br id=id/>
<br id=id />

FrankFang128

2017-02-26 12:35:39 +08:00

@ksco 知乎的也是我写的。

本文不考虑「团队规范」、「可读性」，只谈「语法」。

zkd8907

2017-02-26 12:35:49 +08:00

不管这些能不能跑，我们团队里有人这么写， Code Review 我一定会打回。

FrankFang128

2017-02-26 12:36:09 +08:00

@zkd8907 本文不考虑「团队规范」、「可读性」，只谈「语法」。

FrankFang128

2017-02-26 12:37:01 +08:00

@MinonHeart 你不写 / 不就好了……

zkd8907

2017-02-26 12:37:31 +08:00

这些容错 /多套规范写法相互混杂的做法，对于浏览器 parser 是非常有意义的，除此之外没有任何讨论的意义。所以我为什么要回复这帖子。。。好蛋疼。

ksco

2017-02-26 12:42:00 +08:00

@FrankFang128 我倒是觉得语法之类的是次要的，糟粕的东西不了解也罢。

peesefoo

2017-02-26 12:56:50 +08:00 via Android

全部深信并坚持

loading

2017-02-26 12:58:23 +08:00

建议面向 IE6 诡异模式编程，会自动纠正， 233

murmur

2017-02-26 12:58:38 +08:00

顺便，那些前端程序员深信不疑的谣言第 0 点，不是必须用 osx+vim 么

gamexg

2017-02-26 13:04:01 +08:00

非前段，记得 xhtml 就有那些要求，必须引号，必须有 /> 闭合等等。
鬼知道下个版本 html 又要折腾什么。

sox

2017-02-26 13:06:05 +08:00

蛤蛤，想起了以前某人讨论 Vue 的时候说，「先说好，我不和你讨论 vue ，我是外行。」然后吐槽了一堆 Vue

你这个「本文不考虑「团队规范」、「可读性」，只谈「语法」」也差不多了

yimity

2017-02-26 13:06:24 +08:00

1. 请先理解“谣言”的意思。
2. 最恶心标题党。
3. 呵呵

FrankFang128

2017-02-26 13:06:24 +08:00 via Android

@zkd8907 写在规范里了，那么规范里的才是对的。
团队规范优先级更高没错，但是有些人不看规格文档就会写出一些自大的代码。
比如自己实现 html parser 的时候。

FrankFang128

2017-02-26 13:07:35 +08:00 via Android

@ksco 你很诚实。不过我不认为那些是糟粕。

FrankFang128

2017-02-26 13:08:21 +08:00 via Android

@sox 我是的哪一点错了？指出来呗

FrankFang128

2017-02-26 13:08:45 +08:00 via Android

@yimity 求 block

FrankFang128

2017-02-26 13:09:14 +08:00 via Android

@FrankFang128 说的

Kei

2017-02-26 13:24:21 +08:00

为什么一个科普文会引起那么多人的反感……大概他们觉得不符合规范就是错误吧……

这些我都有了解，但还是会加引号，纯粹心理安全，而且多个属性情况下就要加引号，一些有一些没有会导致强迫症发作。另外虽然我的 sublime 能高亮，但是分享给别人不高亮的话会引起阅读障碍。

/> 这点真的看心情……

starvedcat

2017-02-26 13:26:52 +08:00

楼主的文章对本菜鸟很有帮助。附言写的更好，尤其第四条，喷了。。。。怎么这么搞笑

freestyleyoo

2017-02-26 13:27:11 +08:00 via Android

@FrankFang128 你是个恶心的标题党

FrankFang128

2017-02-26 13:34:33 +08:00

@freestyleyoo @Livid 这个人骂人

FrankFang128

2017-02-26 13:36:06 +08:00

/t/343251 各位如果有被打脸的，请对号入座。

FrankFang128

2017-02-26 13:37:35 +08:00

/t/343251 各位如果有被打脸的，请对号入座。
@starvedcat @Kei @peesefoo @murmur @zkd8907 @ksco @otakustay @ericls

lianyue

2017-02-26 13:45:26 +08:00

不光 <p>

<tr> 什么的也是很多标签不能连续嵌套的会自动闭合

acmetal

2017-02-26 13:47:32 +08:00

其他的不做评论，第四条附言写得好，对比三四年前的 V2 ，水越来越多，干货几近消失。

FrankFang128

2017-02-26 13:50:35 +08:00

@acmetal 现在是一群器材党。以前都是大牛。

shijingshijing

2017-02-26 13:58:00 +08:00

@FrankFang128 不要默认所有浏览器都能自动替你做事情，这种有头没尾的东西是绝壁会被我家的 Software Coding Standard 给 prohibit 掉的，跟需求里面的 Dangling Requirements 一样， ambiguity 会在一开始 review 的时候就给挑出来并干掉，否则通不过。所有的东西，都必须 defined and determined ，软件最不需要的就是各种 surprise

popu111

2017-02-26 13:59:25 +08:00

嘛。。。个人习惯而且能用就好了

shijingshijing

2017-02-26 14:01:10 +08:00

就跟做编译器一样，你不能期待编译器给你自动去做一些事情，虽然 IDE 和编译器能帮你做不少事情，也有容错机制，但是如果你就此产生依赖，相信我，总有一天你会 pay-off 的。

narrowei

2017-02-26 14:22:40 +08:00

科普的很棒啊，学到了很多。支持楼主！

seeker

2017-02-26 14:40:04 +08:00

原来如此，谢谢楼主。

FrankFang128

2017-02-26 14:40:57 +08:00

@narrowei
@seeker
像你们这样的回复就很好嘛 O(∩_∩)O 哈哈~
上面都是戾气

starvedcat

2017-02-26 14:43:52 +08:00

。。。。。。。。。。。。。。。。。。。。。
我说你文章写的对，你专程 @ 我说打脸了。我真心搞不懂了

Jordan

2017-02-26 14:52:05 +08:00 via Android

这是一份写给浏览器的规范

rogerchen

2017-02-26 15:00:32 +08:00

DO NOT be a language lawyer.
Whenever you get confused, RTFM.

FrankFang128

2017-02-26 15:00:51 +08:00

@starvedcat 没有啦，我把回复的全都 at 了，让大家自己看脸有没有被打。不好意思哈~~~

FrankFang128

2017-02-26 15:01:40 +08:00

@rogerchen RTFM 是编程圣经啊，尤其是 F 这个词用得好。

iEverX

2017-02-26 15:38:39 +08:00

我有个问题，这些所谓的谣言，在说的时候是指语法规范吗？我觉得更多的是代码格式规范。。

比如许多人就说，写 Python 是必须用空格缩进。
不是说用 tab 不行。语法上有 tab 没有问题。那么这算谣言吗？

yoke123

2017-02-26 16:16:47 +08:00

属性单引号和双引号的区别是？科普下

leesudo

2017-02-26 16:17:56 +08:00

不谈技术，从标题到内容到回帖，没看出来是来认真讨论问题的，一副好为人师的姿态。关键讨论的内容又并不是什么高深尖端的东西，何必。。。

zkd8907

2017-02-26 17:22:13 +08:00

@FrankFang128 您开心就好咯已 block ，勿 @ :)

binux

2017-02-26 17:28:25 +08:00 via Android

@shijingshijing 编译器那叫未定义行为，而这个是标准定义了的行为。任何一个符合 HTML5 标准的浏览器都会帮你这么解析的，不要放在一起。

hoythan

2017-02-26 17:35:07 +08:00

科普归科普,上面竟然还有人说要学的是什么情况?对前端工作已经放弃希望了吗?

widewing

2017-02-26 17:57:46 +08:00 via Android

茴香豆的茴有这么多种写法啊😯

shijingshijing

2017-02-26 18:00:18 +08:00

@binux 你说的对，我只是举个例子。

刚好想到，这样写的话对爬虫也有影响吧。如果只写个<p>开头，展开成 DOM 树的时候，没有影响么？毕竟解析器是解析器，浏览器是浏览器。

又 PS ：我还有好多 PySpider 的问题要问呢。。。你们的官方 Q&A 哪个是经常用的？是 org 那个网站还是 v2 直接 @召唤？要最迅速的那种

binux

2017-02-26 18:02:34 +08:00

@shijingshijing #63 标准的 HTML5 解析器行为是和浏览器一样的，这比以前好， HTML5 标准为这些行为定义了展开形式。
发邮件

GoBeyond

2017-02-26 18:19:48 +08:00 via Android

第三个太不能接受了
感觉就像写 c 花括号写一半一样
另外，最近 v2 上撕逼风气怎么越来越严重了

RobertYang

2017-02-26 18:34:57 +08:00 via Android

能显示出来的都是好 html

ltux

2017-02-26 19:14:23 +08:00

所以各大浏览器不得不忍受“不听信谣言的人”写出来的垃圾代码，导致 html 解析动不动就出现各种让人摸不着头脑的怪异行为。还是 xml 好。

g0thic

2017-02-26 19:16:38 +08:00

我都知道啊，然后呢？

g0thic

2017-02-26 19:17:53 +08:00

再说这些不是看了本 HTML5 的书或者一些规范都应该知道的吗？不要总想搞个大新闻啊

yuankui

2017-02-26 19:26:35 +08:00

所以还是楼主厉害咯?

ltux

2017-02-26 19:28:32 +08:00

这玩艺儿不叫谣言，这玩艺儿叫谨慎，毕竟世界上还有一堆人在用不能完全支持 html 5 的浏览器。然而楼主很鸡贼，说只讨论 html5 ，那你还讨论个鸡卜，你丫先把别人说话的语境给排除掉，然后说别人的写法是由于听信谣言所致。请问怎么形容这种行为呢？一个字，贱！

R18

2017-02-26 19:39:24 +08:00 via Android

造谣？旧的规范被新的规范代替了就变成了造谣了啊

ihuguowei

2017-02-26 19:45:58 +08:00 via Android

楼主说的对，但然并卵呀，习惯了 XHTML 规范了啊， HTML5 放宽了而已。拿这个大书特书，闲得慌，死鱼切图狗观后感。

ihuguowei

2017-02-26 19:49:16 +08:00 via Android

看了楼主其他贴，看来您很喜欢跟人“辩论”啊，哎呀，有这时间陪陪老婆孩子不挺好么，然而我是一直单身狗。

stabc

2017-02-26 20:09:08 +08:00

学到了，感谢 LZ 。虽然以后还是会按照先前的规范写，但知道多点东西总是好。
PS ：不用理会某些对人不对事的评论，现在 V2 人很杂。

ltux

2017-02-26 20:22:13 +08:00

我觉得楼主应该是这样：之前一直是按“谣言”写的，但是最近终于读了一下 HTML 5 规范，结果发现原来不按“谣言”写也是可以的，于是怒从心中起，认为自己被骗了这么多年之后终于掌握了宇宙真理，并想当然地认为一定会有很多人不知道“原来规范是这个样子的”，于是赶紧屁巅儿地跑来发个贴，并把自己原来不知道的东西放大为很多人都不知道的东西，称之为“谣言”，得到了心理满足。

konakona

2017-02-26 20:46:17 +08:00

虽然我都支持，但我还是支持一下楼主。
楼主并不是鼓励大家无视开发规范，有些基础知识要知道的还是得知道。
本身 HTML 就很松散，怎么写都可以啊。但是谣言要知道是谣言。

Tonni

2017-02-26 21:28:20 +08:00

论前端开发规范的重要性。

nomemo

2017-02-26 22:01:35 +08:00

虽然不写前端，但我知道 LZ 不错

Lucups

2017-02-27 00:01:45 +08:00

同情楼主。
楼主第一句就说了 “本文不考虑「团队规范」、「可读性」，只谈「语法」。”
可是有些人非要跟楼主讲规范。
你跟他讲道理，他跟你耍流氓。。。
不知道这些耍流氓的人平时是怎么跟人交流的。

ivvei

2017-02-27 00:13:03 +08:00 via Android

哪有你说的谣言… 你列举的都是团队规范，几个人“深信”是 html5 语法的？

ltux

2017-02-27 00:35:20 +08:00

@Lucups 楼主说他只讨论语法，然而他却把别人编码规范的里的东西拿出来批判一番，这楼主不就是在耍流氓么？要想说语法就好好说语法，非得弄个标题党，扯什么“谣言”，弄得好像全世界就他一个人读过 HTML5 文档似的。楼主认为别人编码时坚持闭合标签就是因为听信“谣言”就是没读过 HTML5 文档，智商很感人，楼主你怎么知道别人不是熟知 HTML5 规范但是却坚持按谨慎的方式书写闭合标签呢？毕竟这个世界上的浏览器还五花八门嘞，我国还一堆 Windows XP 嘞。

valkjsaaa

2017-02-27 05:23:32 +08:00

别的楼主说的都是自洽的，但是我怎么读也没读出来为啥不带 “/” 是推荐写法。

leekafai

2017-02-27 08:23:41 +08:00 via Android

op 在逼乎除了删评论还有啥高招。虽然 v 站欢迎什么人不是谁说了算的，但是你在逼乎那些高招在这行不通，还是需要学习一个。

FrankFang128

2017-02-27 08:36:54 +08:00 via Android

@valkjsaaa This character has no effect on void elements

简单来说，对于 void 元素，/ 是废话

AdamChrist

2017-02-27 08:56:56 +08:00

我支持楼主..看起来挺有意思的..感觉像在趣味科普文档..其实自己也难静下心来看这种文档..

AsherG

2017-02-27 09:06:09 +08:00

内容本身挺有意思，涨了姿势，但是楼主一股满满的优越感， block

Clarencep

2017-02-27 09:08:03 +08:00

话说类似 xml 或 xhtml 方式规范的写法是有助于提高渲染速度的。。。而且引号和标签闭合之类的不是 IDE 自动完成的吗？

gongpeione

2017-02-27 09:10:17 +08:00

基本都知道

Felldeadbird

2017-02-27 09:22:31 +08:00

楼主上面的说法都建立在非 IE 浏览器的支持下。

谣言 3 ：所有标签必须闭合，比如 <p></p>
另外楼主试下单写一个 <pre> 标签。会发现<pre>把全部都包含了

lutasa43210

2017-02-27 09:59:34 +08:00

玻璃心了写全点没有什么不好

Lucius

2017-02-27 10:05:51 +08:00

@FrankFang128

支持 LZ “不要跟傻逼争论，他会把你拉到他的水平上，然后用他的经验打败你”

hosiet

2017-02-27 10:09:16 +08:00 via Android

这些内容都知道，支持楼主这个科普，毕竟是干货。不过很遗憾看了楼主的态度以后还是要添加 block 。

另：楼上的 pre 标签就别拿来说事了，那个必须闭合。“不是所有标签必须闭合”不等于“所有标签都不用闭合”。

iRiven

2017-02-27 10:17:32 +08:00 via Android

像楼主这种异教徒，在古代是要绑在火型架上烧死的😂

deadEgg

2017-02-27 10:19:34 +08:00

就事不就人啊。楼上的某几位话说的辣眼睛。

我觉得楼主内容是干货的。顺带一个帖子让我 block 了一堆人 ~

bullfrog

2017-02-27 10:31:39 +08:00

那些老司机深信不疑的谣言：
1. 开车必须换挡
实际上，一直挂着一档，车一样可以开，没有法律规定开车必须换挡。
2....

halden

2017-02-27 10:45:27 +08:00

1. 知道，但自己平时用的时候一般都加""， disable 或者比如用一些 css libaray 的时候按照他提供的 doc 走
2. 知道，问题是有些编辑器（比如 sublime ）你 img 后面不加 / 会给你报 non-closing ，虽然不影响但为了顺眼起见就加上吧
3. 知道，同 2
4. 不知道，学习了

谣言不谣言我不知道，没听人这样说过，也就是以前上课或则自己学习的时候看的资料不同罢了

murmur

2017-02-27 10:52:58 +08:00

@deadEgg 我其实也觉得是干货，但是这标题就想打一架

某些程序员总喜欢脱离实际看问题，比如说哪些讨论比特币数学多优越的，（后面纯水不针对任何人）就跟语法上你说 CNM 是没问题的，但是实际上你说 CNM 会被打，脱离环境讨论问题有什么意义？理论上能干的事多了

项目组一样，你写这样风格的代码不被打回去就怪了，索性不知道不更好？

前端程序员真是好奇怪，你们要复杂，你们要 java 的强类型，你们要 TS ，结果现在又要在 html 上省字节

搞不懂你（我）们，

xuhai951753

2017-02-27 12:02:17 +08:00

科普 html5 的新规范倒没啥问题。但把以前的一些经验或者习惯说成造谣感觉不是很舒服，而且还说是骗新人就感觉不是很好，毕竟这些在前端的知识领域算是很细枝末节的点，影响不大，很多人的知识体系没更新也很正常。

100

siteshen

2017-02-27 13:15:57 +08:00

除了第二条查过文档清楚知道正确写法外，其他几个都是把“谣言”当规范在使用。

ps ：支持下题主，主题都说明白了只谈“语法”，还有一堆不好好看文章的人拿“规范”说事。

1 2

❮

❯