这是一个创建于 2856 天前的主题，其中的信息可能已经有所发展或是发生改变。
本文不考虑「团队规范」、「可读性」，只谈「语法」。
你了解完语法再去搞什么「团队规范」、「可读性」吧，不要本末倒置。
这里只讨论 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 哈哈~
制定过团队规范的人，必须先详细了解各种写法的弊端，然后挑选其中最合理的，写成规范。
我这篇文章就是教你「详细了解各种写法」。
我当然知道弊端了。但那不是本文的目的。
本文的目的是破除迷信 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. 自己买了台海外服务器，做点什么能把资源最大利用
就这水平，好意思呵呵我……
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 代码还以为自己是对的》
你家的团队规范该更新了。
 |
101
edsgerlin 2017-02-27 13:49:08 +08:00
虽然这些是 HTML5 规范允许的，但真这样搞就不是 valid XML 了……
|
 |
102
ZengLeiPro 2017-02-27 15:54:54 +08:00 via Android
新手求教， react 渲染的标签不闭合不是会报错吗？
|
 |
103
FrankFang128 OP @ZengLeiPro JSX 的语法属于 XML ，又不是 HTML
|
 |
104
freeminder 2017-02-27 17:47:26 +08:00
坐等下篇
|
 |
105
Arthur2e5 2017-02-28 01:28:36 +08:00
纠正一个用词：我个人其实很不喜欢“ HTML 5 ”这个叫法——各种幺蛾子版本号都是 W3C 定期把东西爬过来改个名整出来的。现在的 HTML 是 WHATWG Living Standard ，活的。看着不爽了上 GitHub 报 Issue 还可以把自己的名字丢进去。
可选标签有个 https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission 下面的表格例子，读起来超棒。 * * * @edsgerlin Valid XML 是要从 xmlns 和不用自定义元素做起的，可以说是超级难。现在没人用 XSLT ，那就不管了吧…… @murmur 分不清 DOM 这个抽象后的结构和 HTML 源码本身真是超棒的啊。要是我告诉你早期 SGML 是像 Markdown 一样让人写起来舒服的你大概能吓死？前端世界的发展史真是 When in doubt, add a transpiler 的典范。 如果一个东西是事实，那何止是一九开？完全就是零十开。 @MinonHeart 大部分的省略功能在 HTML4 甚至 HTML1 和 SGML 就有定义。早期的 HTML 甚至没有 head 、 body: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html 为了向下兼容性这些省略必须进 spec 的。 当然某著名头疼浏览器（旧版 IE ）确实在这方面有一个小问题，见 https://stackoverflow.com/questions/5641997/is-it-necessary-to-write-head-body-and-html-tags 提到的 form 例子。 @shijingshijing 有大规模实现的定义就不是 ambiguity 。如果有问题是你实现的问题。 @halden 实现有误。 @ltux 见上， HTML 本来就是写得舒服的。 @Felldeadbird 建议你考虑一下“全部都要”取否之后是“全都不要”还是“一些不要”。 @xuhai951753 @R18 不新，甚至很老。现在的“传统”很多是 XHTML 成风那会儿遗留下来半正式半缺东西的玩意儿，反正还是不能当 XHTML 用。 |
 |
108
halden 2017-02-28 02:34:14 +08:00
@Arthur2e5 那这个就是 sublime 或者我装的某个插件的锅了， dm 没这个问题，但现在基本上都用 sublime
|
 |
109
justfun 2017-03-09 11:45:37 +08:00
我决定以后属性不加引号了 哈哈哈哈
|
Select Language