本文翻译自Mozilla Developer Network。
许多人学习HTML, CSS 和 JavaScript都是通过查看某些站点的源代码,然后复制粘贴,而不管这些网站用得正确不正确。这意味着有时候粘贴过来的代码可能已经过时了。本页将列出一些历史遗留产物,随着时间的推移我们已经没有必要再采用这样的写法了。
DOCTYPE
(X)HTML 的 doctype 大约有10种,它们之间的差异很小(甚至没有),建议使用HTML5 的 doctype:
<!DOCTYPE html>
它在任何浏览器中都会触发标准模式(也包括IE6)。
<meta> 元素和 charset 属性
很多网站中都能看到这行代码:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
将其精简一下变成下面这样,也可以在所有浏览器(包括IE6)上实现同样的功能:
<meta charset="UTF-8" />
这就是向后兼容和实用主义的体现。试着用用这个吧。
无效的<meta>元素
许多被弃用的或者不规范的代码仍然会被相互粘来粘去,尤其是注意下面这些:
<meta name="MSSmartTagsPreventParsing" content="true">
这行代码只在IE6的一个beta版本中有效,现在这个版本已经没人再使用了,而且smart tags也会被抛弃。<meta name="robots" content="all">
robots这个值可以用,但后面的all
是一个不规范的值。默认值为index, follow
,可以达到和all相同的效果,所以只需把这一句删掉。<meta name="copyright" content="…">
不存在这样的meta,应当直接删掉,新建一个版权页面或div层,然后通过<link>
加rel="copyright"
属性来链接到它。<meta name="rating" content="…">
此meta不存在,应当删掉。
脚本中的HTML注释
曾经只有一部分浏览器可以识别标签,其他的浏览器会把脚本内容当作文本输出。因此有一种做法是把脚本放在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>
这些都没必要了,现在几乎所有的浏览器都能够支持脚步,即使一些浏览器不支持,它们也会直接忽略<script>
标签。所以只要把脚本内容写在<script>
开始和结束标签之间就可以了。更好的做法是将脚本放在外部文件中,然后设置src
进行引用,并且你可以试一试defer
和HTML5的async
属性,
应该被抛弃的标签
font
应该停止使用font标签。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>
更好。