應該避免的過時語法
介紹
許多人藉由觀看原始碼,然後複製貼上來學習 HTML、CSS 及 JavaScript。然而他們並沒有考慮到原本的網站,是否正確實做過。這意味著他們延續了一些過去必要,但現在不需要的程式慣例。這篇文章就是要列出那些隨著時間,變得不必要、或糟糕的程式語法。
Doctype
大約有十來種 (X)HTML文件類型描述(doctype),他們之間的差異非常細微(甚至沒差別),我們建議你使用以下 HTML5 的文件類型宣告:
<!DOCTYPE html>
如此會觸發所有瀏覽器使用標準模式(甚至包含 Internet Explorer 6)。
<meta>
元素與 charset
屬性
如同以下的原始碼寫法並不少見:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
然而,就算你把它縮減成這樣,所有的瀏覽器還是會做出相同判定(甚至包括Internet Explorer 6):
<meta charset="UTF-8" />
這些知識已經透過逆向工程(reverse engineering)與實用主義(pragmatism)證實。用就對了。
不存在的 <meta>
元素
許多被棄用或不標準的值,常常因為從某個頁面被複製到另個頁面,而延續了它們的利用。儘管這些元件被廣為利用,它們其實不符合規範、也不會有效用。特別是,不要去使用:
<meta name="MSSmartTagsPreventParsing" content="true">
這個只有在其中一個 beta 版的 Internet Explorer 6 是有用處的。這個 beta 版已經不再使用,而且這版本的特色聰明標籤(smart tags)已經被移除,也不會再被加回來。<meta name="robots" content="all">
雖然robot
屬性是存在且確實合法的,但請不要去使用根本不存在的值,像是all
。robots
預設的值為index, follow
,其實這就是你寫的all
想要做的事。因此請直接移除整個<meta>
標籤即可。<meta name="copyright" content="…">
這個 meta 並不存在。移除它並創建一個版權頁面或div
,或是使用rel="copyright"
的<link>
HTML 元素之連結。<meta name="rating" content="…">
這個 meta 並不存在。只要移除整個<meta>
即可。
HTML 腳本的註解
曾經有一段時間有些瀏覽器了解 <script>
標籤,但有些則否。這有時導致瀏覽器把應該作為腳本的文字,解讀成純文字。有個自然的想法,使得腳本成為 HTML 的註解。這方法,可以讓能執行腳本的瀏覽器做動、而不了解的瀏覽器忽略。
從這時起,我們繼承了:
<script> <!-- var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E")); //--> </script>
或是:
<script type="text/javascript"> <!--//--><![CDATA[//><!-- Blabla.extend(MyFramework.settings, { "basePath": "/" }); //--><!]]> </script>
如今,這只會在 strict XML 驗證下,因為註解避開不帶引號標記的誤報,而有所幫助。除此之外,是完全無用的。甚至不執行腳本的瀏覽器,也只會忽略 <script>
標籤。簡單起見,只要把你的腳本寫在 <script>
的開頭與結尾之間就行。更理想的話,把你的腳本變成獨立的檔案,並透過 src
屬性連結。如果你在寫腳本,考慮使用 HTML5 async
與 defer
屬性。
不應再使用的元素
font, basefont
這些元素不應再使用。針對元素排版外觀,應當優先考慮 CSS,並藉由元素、ID、或 class 屬性控制目標。
b, i, u
這些往往比較有爭議,但是當有相應的話,盡量去使用個別的 <strong>
、<em>
或是 <span>
和 CSS (text-decoration:underline
)。
斟酌考慮使用哪個元素。有些以發展為導向的頁面,建議以簡單的 <strong>
取代 <b>
、還有 <em>
取代 <i>
。遵從這個建議不是好主意。<strong>
是用作強調陳述,而 <em>
只是加粗文字。例如,使用 <em>
去簡單完成斜體不是好主意。非強調的斜體文字可以透過你頁面 CSS 的 font-style:italic
完成。類似的,書的標題和藝術作品傳統上都被轉成斜體,但針對這些東西使用 <cite>
元素可以給出比 <em>
或 <i>
更語意的標記。
acronym
acronym 元素不應該再使用。要表示縮寫應當用 <abbr>
。
tt, xmp
不要使用這些元素。要表現出電腦程式碼的片段,使用 <code>
。要表現出預格式化的文字,使用 <pre>
。如果只是想要 monospace 字型,在 CSS 使用 font-family: monospace
。
applet
這個元素不應再使用。更通用的 <object>
才是首選。