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

2017-02-26 12:08:41 +08:00
 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 文档

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

12247 次点击
所在节点    HTML
109 条回复
ericls
2017-02-26 12:17:41 +08:00
哇 这规范好差 还好有 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
虽然哥不是前端，也不是后端的，但是加引号的的作用还是清楚的，那就是能让编辑器区分什么字符串什么是关键字
FrankFang128
2017-02-26 12:35:02 +08:00
@murmur 「见没见过」和「可不可以」是两回事吧。
所以标题说有些人已经「深信不疑」了。
MinonHeart
2017-02-26 12:35:17 +08:00
代码可以正确运行就行
浏览器为了向下兼容，有些功能跟 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 我一定会打回。

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

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

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

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

© 2021 V2EX