那些前端程式設計師深信不疑的謠言(HTML篇)

方應杭在飢人谷發表於2017-02-26

這裡只討論 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. 英文很重要!

  2. 要看規範文件!

  3. 不求甚解要不得!

想了解 CSS 篇和 JS 篇,請關注我就行了,不用加後面奇怪的微信群。

以上。

相關文章