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

2017 年 2 月 26 日
 FrankFang128

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

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

这里只讨论 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 文档

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

14782 次点击
所在节点    HTML
109 条回复
ivvei
2017 年 2 月 27 日
哪有你说的谣言… 你列举的都是团队规范,几个人“深信”是 html5 语法的?
ltux
2017 年 2 月 27 日
@Lucups 楼主说他只讨论语法,然而他却把别人编码规范的里的东西拿出来批判一番,这楼主不就是在耍流氓么?要想说语法就好好说语法,非得弄个标题党,扯什么“谣言”,弄得好像全世界就他一个人读过 HTML5 文档似的。楼主认为别人编码时坚持闭合标签就是因为听信“谣言”就是没读过 HTML5 文档,智商很感人,楼主你怎么知道别人不是熟知 HTML5 规范但是却坚持按谨慎的方式书写闭合标签呢?毕竟这个世界上的浏览器还五花八门嘞,我国还一堆 Windows XP 嘞。
valkjsaaa
2017 年 2 月 27 日
别的楼主说的都是自洽的,但是我怎么读也没读出来为啥不带 “/” 是推荐写法。
leekafai
2017 年 2 月 27 日
op 在逼乎除了删评论还有啥高招。虽然 v 站欢迎什么人不是谁说了算的,但是你在逼乎那些高招在这行不通,还是需要学习一个。
FrankFang128
2017 年 2 月 27 日
@valkjsaaa This character has no effect on void elements

简单来说,对于 void 元素,/ 是废话
AdamChrist
2017 年 2 月 27 日
我支持楼主..看起来挺有意思的..感觉像在趣味科普文档..其实自己也难静下心来看这种文档..
AsherG
2017 年 2 月 27 日
内容本身挺有意思,涨了姿势,但是楼主一股满满的优越感, block
Clarencep
2017 年 2 月 27 日
话说类似 xml 或 xhtml 方式规范的写法是有助于提高渲染速度的。。。而且引号和标签闭合之类的不是 IDE 自动完成的吗?
gongpeione
2017 年 2 月 27 日
基本都知道
Felldeadbird
2017 年 2 月 27 日
楼主上面的说法都建立在非 IE 浏览器的支持下。

谣言 3 :所有标签必须闭合,比如 <p></p>
另外楼主试下单写一个 <pre> 标签。会发现<pre>把全部都包含了
lutasa43210
2017 年 2 月 27 日
玻璃心了 写全点没有什么不好
Lucius
2017 年 2 月 27 日
@FrankFang128

支持 LZ “不要跟傻逼争论,他会把你拉到他的水平上,然后用他的经验打败你”
hosiet
2017 年 2 月 27 日
这些内容都知道,支持楼主这个科普,毕竟是干货。不过很遗憾看了楼主的态度以后还是要添加 block 。

另:楼上的 pre 标签就别拿来说事了,那个必须闭合。“不是所有标签必须闭合”不等于“所有标签都不用闭合”。
Erskine
2017 年 2 月 27 日
像楼主这种异教徒,在古代是要绑在火型架上烧死的😂
deadEgg
2017 年 2 月 27 日
就事不就人啊。楼上的某几位话说的辣眼睛。

我觉得楼主内容是干货的。顺带一个帖子让我 block 了一堆人 ~
bullfrog
2017 年 2 月 27 日
那些老司机深信不疑的谣言:
1. 开车必须换挡
实际上,一直挂着一档,车一样可以开,没有法律规定开车必须换挡。
2....
halden
2017 年 2 月 27 日
1. 知道,但自己平时用的时候一般都加"", disable 或者比如用一些 css libaray 的时候按照他提供的 doc 走
2. 知道,问题是有些编辑器(比如 sublime )你 img 后面不加 / 会给你报 non-closing ,虽然不影响但为了顺眼起见就加上吧
3. 知道,同 2
4. 不知道,学习了

谣言不谣言我不知道,没听人这样说过,也就是以前上课或则自己学习的时候看的资料不同罢了
murmur
2017 年 2 月 27 日
@deadEgg 我其实也觉得是干货,但是这标题就想打一架

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

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

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

搞不懂你(我)们,
xuhai951753
2017 年 2 月 27 日
科普 html5 的新规范倒没啥问题。但把以前的一些经验或者习惯说成造谣感觉不是很舒服,而且还说是骗新人就感觉不是很好,毕竟这些在前端的知识领域算是很细枝末节的点,影响不大,很多人的知识体系没更新也很正常。
siteshen
2017 年 2 月 27 日
除了第二条查过文档清楚知道正确写法外,其他几个都是把“谣言”当规范在使用。

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/343238

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX