那些前端程序員深信不疑的謠言（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 篇，請關注我就好了，不用加後面奇怪的微信羣。

以上。

相關標籤/搜索