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

V2EX = way to explore

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

现在注册

已注册用户请登录

Dive into HTML5

› http://diveintohtml5.org/

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

刚才我发了一篇《那些前端程序员深信不疑的谣言（ HTML 篇）》科普文，有人说我不懂团队规范，这些符号怎么能省呢？

那我来跟你扯一扯团队规范。

Google Style Guide 关于 HTML/CSS 的 Style Guide ：

可忽略标签

For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.

(This approach may require a grace period to be established as a wider guideline as it ’ s significantly different from what web developers are typically taught. For consistency and simplicity reasons it ’ s best served omitting all optional tags, not just a selection.)

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

html/head/body 标签写了么？
p 标签闭合了吗？

注意这个团队规范有点激进，目前是 optional ，还在兼容 IE 的团队测试后再采用。

关于 <br /> 的Style Guide

Although fine with HTML, do not close void elements, i.e. write <br>, not <br />.

以上。

52 条回复 • 2017-03-12 13:12:57 +08:00

FrankFang128

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

被打脸的请对号入座。

Zzzzzzzzz

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

google 从来没卵过 w3c 的规范，以前 xhtml 时代就是, 当时的理由是省流量......吹规范的是 amazon......

FrankFang128

2017-02-26 13:38:43 +08:00

我说语法你们跟我谈「团队规范」，我说「团队规范」你又扯历史。
V2ex 的人，没法聊。

FrankFang128

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

下次在 V2EX 发帖就专门发钓鱼文了。

Rice

2017-02-26 13:44:36 +08:00 via iPhone

不好解析

airyland

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

正确节点： https://www.v2ex.com/go/flamewar

FrankFang128

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

@Rice HTML 5 ：怪我咯

FrankFang128

2017-02-26 13:46:03 +08:00

@airyland 意味不明啊

FrankFang128

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

我在等人回复「 Google Style Guide 算个屁」。

Rice

2017-02-26 13:49:05 +08:00 via iPhone

@FrankFang128 其实对前端来说无所谓的，怎么写都无所谓，最后是给浏览器的。

Perry

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

每个团队有不一样的规范，难不成所以的团队都要和 Google 一样？他们的团队不能省符号没毛病。

Perry

2017-02-26 13:51:16 +08:00

所有*

Kei

2017-02-26 13:51:39 +08:00

写文写得一身戾气……开心么

FrankFang128

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

@Kei 我的文章从来都是戾气，求 block

FrankFang128

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

@Perry 他们说我有毛病，我就要发文怼一怼了。 V2EX 上现在的人啊，不怼一下不老实。

imn1

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

历史是这样的：
上世纪末至本世纪初
w3c 打算在 html4 终结 html 规范，然后以 xhtml 取代
由于 xhtml 太过严谨，一个标签写错了就报错导致整个网页不能显示
而现实中，写 html 的很多是初级程序员，甚至非程序员（很多个人网站是自写 html 的）
造成大量网页不能显示，而用户不明就里只怪责浏览器太差，浏览器厂商中的已经不是手枪，而是机关枪
浏览器厂商忍无可忍，由 google 牵头，集合 mozilla, opera 等，私下组成联盟，指定新的 html 标准，并各家取舍实现
这就是 html5 的雏形，最终 w3c 被迫接受，重新启动 html5 的制定（当时主管人也是 google 的）
xhtml 逐步被放弃

Kei

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

@FrankFang128 别求我，离我远点

murmur

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

@imn1 但是 chrome 的审查依然是标签闭合带引号这就很尴尬了

imn1

2017-02-26 14:03:45 +08:00

xhtml 是基于 xml 的， xml 很微小的错误都会报错，甚至是仅仅因为某个字符编码处理不当

imn1

2017-02-26 14:05:53 +08:00

@murmur
易入难出，这是程序员需要遵循的，生产的时候严谨是应该的，但运行时要高容错

shijingshijing

2017-02-26 14:07:42 +08:00

Google 自己的东西都喜欢变来变去，而且 Google 的就一定是最好的么，参考可以，迷信就算了吧。 Google 的访问量在那里，他 HTML 里面少一两个字符，这么大的访问量，能省不少流量，这个 argument 确实 make sense ，你自己做个站，有百万的访问量么？ Google 是大户，可以不 care 小众客户，可以强迫用户升级，你自己做产品了怕是丢一个客户都伤心的要死吧。角色不同，地位不同，做事的方法当然不同，就跟 facebook 用 PHP 一样，自己有技术有人力有财力能够 overhaul 整个 PHP ，你能做么？

holyghost

2017-02-26 14:08:59 +08:00

扎心了老铁

FrankFang128

2017-02-26 14:11:06 +08:00

还真有人回复： Google Style Guide 算个屁

shijingshijing

2017-02-26 14:21:53 +08:00

@FrankFang128 世界上又不是只有 Google 一家公司，互联网又不等于 Google ，做 IT 的最重要是自己独立思考，开放包容精神，你说的有道理，那我起码还要看看是不是适合我，然后再决定采不采用。

我要是告诉你，在我接手的很多项目里， C 和 C++最重要的 new ， recursion ， polymorphism 都被禁止使用，连 Inheritance 都被严格限制层级。按照你的意思， C99 和 C++11 的规范可没这些个规定啊。这些项目名头说出来你也会大吃一惊的，最这些东西的都是跟 google 一个等级，能改变世界的公司，难道按你说的就是被打脸了么？

不懂的看时间场合对象，一味的膜，最终吃亏的还是你自己。

shijingshijing

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

r #24 [最] 这些东西 -> [做] 这些东西-

FrankFang128

2017-02-26 14:25:14 +08:00

@shijingshijing 你应该不知道最初是一帮键盘侠不包容我，我也没认为 Google Style Guide 最好。

我认同你的观点。

otakustay

2017-02-26 14:26:44 +08:00

> For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.

一个团队居然需要人肉写代码的时候做 file size optimization 而不是工具来解决，管他是 google 还是哪家我都给 2 个字：垃圾

vCleaner

2017-02-26 14:32:55 +08:00

@sparanoid @Livid /go/flamewar

FrankFang128

2017-02-26 14:37:39 +08:00

@vCleaner 这个 tag 重命名为撕逼我就理解了

FrankFang128

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

@otakustay 那你知不知道很多前端团队「为了压缩代码时不出错」，强制写 JS 时每行加引号。
真的是很垃圾。

FrankFang128

2017-02-26 14:39:53 +08:00

@otakustay *每行加分号*

otakustay

2017-02-26 14:44:09 +08:00

@FrankFang128 你真的理解么？在 JS 中每行加分号是为了人在读代码的时候保持一致性，不会因为某一行突然以分号开始而使流畅阅读产生停顿，不是为了压缩时不出错
正确的为了压缩时不出错的规范是：在行首字符为[、{、(时，在行首插入分号
这个规范是有很多团队采用的

imn1

2017-02-26 14:46:03 +08:00

其实我不明白这帖子（及前一个相关帖子）争论点在哪？

LZ 说的几点“谣言”修正都正确， w3c 上面都是这样写的，并非完全是 google 标准，为何要扯到 google 上面
至于 google 建议，那是个 guide ，不是 standard ，在 google 相关产品上使用没问题，各个团队根据自己需求取舍呗

https://www.w3.org/TR/html5/
https://www.w3.org/TR/html5/text-level-semantics.html#the-br-element
这里有写<br>写法

https://www.w3.org/TR/html5/document-metadata.html#the-head-element
Tag omission in text/html:
A head element's start tag may be omitted if the element is empty, or if the first thing inside the head element is an element.
A head element's end tag may be omitted if the head element is not immediately followed by a space character or a comment.
这里有写<head>可省略

https://www.w3.org/TR/html5/sections.html#the-body-element
Tag omission in text/html:
A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element.
A body element's end tag may be omitted if the body element is not immediately followed by a comment.
这里也有写<body>可省略

LZ 建议更新规范没问题啊，他是说更新，又不是说不要规范
只是语气激了点～

sodatea

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

哈哈，因为屏蔽了太多人，看你这两个帖子时经常没看懂你在和谁怼。看来我的屏蔽名单还是有用的

otakustay

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

编码规范只应该针对 2 个方面优化：

1. 人阅读时的体感感受
2. 基于子串和正则的简单分析脚本的实现便捷性

其它方面的，包括文件体积、程序可分析、搜索引擎等等，都应该是工具来解决的领域，为什么要让人来做这个事情？

我不反对如本题主贴中所述的这类编码规范，但我坚决反对主贴中所述的得出这一编码规范的理由，人机不分离绝对是不可取的事情

FrankFang128

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

@sodatea 我有一天不小心把屏蔽清空了，就悲剧了……看来又要重新 block

chimingphang

2017-02-26 14:51:37 +08:00

呖咯，巴闭咯

FrankFang128

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

@imn1 嗯，我也不知道那些人为什么要反驳我那些从规范里抄来的东西，可能是习惯性怼我吧

sodatea

2017-02-26 14:56:58 +08:00

其实在浏览器的世界里， HTML 是一等公民，很多情况下 XHTML 只是被当成错误的 HTML 然后被浏览器容错纠正了而已。

https://webkit.org/blog/68/understanding-html-xml-and-xhtml/

说实话在写 JSX 之前我已经很多年没写过闭合 img 标签了……

breeswish

2017-02-26 15:46:49 +08:00

写 js 加分号原因是防止压缩时出错的团队真的有那么多？难道不是大多数是基于统一风格 / 避免 return 等情况缺失分号的坑等原因吗……

chocotan

2017-02-26 16:06:41 +08:00

看了半天并没有看到有谁说楼主所贴的“规范”是错的。。。

FrankFang128

2017-02-26 17:03:06 +08:00

@chocotan 直接人身攻击了，被管理员删了。

FrankFang128

2017-02-26 17:03:31 +08:00

@chocotan 估计很多人被你 block 了，你看不到。

tnx2014

2017-02-26 20:34:43 +08:00

我不是前端，本来不该管这事，以一个旁观者的角度来说，楼主前一个帖子只是说有多种写法都是符合语法的，这本身没问题，语法本就是人定的，在不引起混乱的情况下，编译器可接受，运行出想要的结果，也不是大问题，大家自己规定一些东西，也是怕万一编译之后运行有些情况下输出不是自己预想的结果，楼主的意思是让人别那么死板，但是语气不大好，顶多算是误区，而不是谣言，弄得别人好像犯了多大错误一样，当然会有人不舒服，有些人说话偏激是不对的，但楼主也不用因此嘲笑 top10 之类的，如果这里真的是纯技术讨论社区的话，争论只会更多。

楼主也不用太计较了。