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

时间 2019-12-02

原文原文链接

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

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

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

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

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

我对此嗤之以鼻。java

谣言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, wbrspa

很容易推理出：对于 void elements，<meta /> 彻底能够写成 <meta>，并且是推荐写法。code

谣言3：全部标签必须闭合，好比 <p></p>xml

正解：请看 HTML 5 规范文档htm

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 文档复制代码

总结

英文很重要！
要看规范文档！
不求甚解要不得！

想了解 CSS 篇和 JS 篇，请关注我就好了，不用加后面奇怪的微信群。

以上。