HTML5 属性值加不加引号?

在 HTML4 的时候,语法是很宽松的,HTML 的属性值(attribute value)既可以加引号也可以不加。到了 XHTML 的时候,为了更好地兼容 XML 格式,又引入了严格的语法,规定属性值必须用双引号括起来。眼下 XHTML 大势已去,我们终于可以忘掉那些繁琐的限制了,HTML5 回归了宽松的语法,属性值加单引号、双引号还是不加,全看程序员的喜好。你随便写,剩下的只要交给浏览器去解析。

选择不加引号,的确能省下键盘敲击次数,还能省下一部分字节,这是好的一方面,不过也并不是在所有情况下都可以省略引号,例如:

<p class=important warning>

这个 p 元素在浏览器看来,class 值为 important,另外还有一个属性 warning,尽管不是 W3C 标准里的属性,但浏览器会把它当做一个自定义的布尔属性。所以如果属性值里含有空格时必须加引号。另外,含有以下字符时都必须括起来:单引号')、双引号")、大小于号<>)、等号=)、反引号`)。

如果你是不加引号党,就要注意这几个坑。不加引号有不加引号的好处,但如果保持一个用引号的习惯,就不需要费时间去考虑以上这些问题。主要看个人或团队的习惯。

阅读全文 »

Google HTML/CSS代码风格指南

本文翻译自Google HTML/CSS Style Guide

Google发布过各种编程语言的代码风格指南,今天看了一下关于HTML/CSS的,顺便整理翻译了下其中有用的东西,放在这里。Google的东西看一下还是会受益很多的,遵守这些规则,能够渐渐帮你形成良好的代码风格,同时在性能方面也很有益。留作参考吧。

通用风格守则

协议

把图片、媒体文件、样式表和脚本URL中的协议部分(http:,https:)省略掉,除非文件使用的不是这两种协议。这种方法使URL变成相对地址,可以避免混合内容的问题,同时略微地减少代码量。

【注:关于混合内容的问题(mixed content issues),可以看另一篇文章《关于URL中协议的省略》。】

<!-- 不推荐 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 不推荐 */
.example {
  background: url(http://www.google.com/images/example);
}
/* 推荐 */
.example {
  background: url(//www.google.com/images/example);
}

通用格式化守则

缩进

使用两个空格来缩进。不要使用tab或者tab跟空格混合使用。

<ul>
  <li>Fantastic
  <li>Great
</ul>/
.example {
  color: blue;
}

大小写

所有代码都用小写字母,包括:元素名、属性名、属性值(除了text/CDATA)、选择器、CSS属性值,当然字符串中可以用大写。

<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png" alt="Google">

末尾空格

去掉所有的末尾空格,它们是不必要的,有时候会带来麻烦。
阅读全文 »

HTML5的语法变化

现在HTML5可以说是烫手山芋,一大片的人都在追随这项新技术,虽然正式的标准还没放出来,但浏览器们早已经开始对HTML5进行了实现,大批的前端人员也正在恶补新知识。上个月W3C刚刚宣布了HTML5规范正式定稿。据W3C说完整的HTML5技术标准将在今年正式出炉,预计将会在2014年完成HTML5网络环境的整体部署。可以说HTML5的时代真的近了,对IT人来说,Web App、LBS这些新机会就要来了。

HTML5有大量的新特性。重要的是它完全兼容HTML4和XHTML1,语法上很宽松,完全允许你按照以前的习惯来写,所以,把原先的doctype换成<!DOCTYPE html>,就马上变成了一个HTML5网页。语法上还有一些其他变化,先来看一下。

DOCTYPE

HTML5的doctype非常简洁:

<!DOCTYPE html>
<!-- 大小写不敏感 -->
<!doctype html>

指定字符编码

这个也同样简洁,原来你可能这样写:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML5的是这样:

<meta charset="UTF-8">
<!-- 小写也没问题 -->
<meta charset="utf-8">

具有布尔值的属性

disabled和checked这类属性是具有布尔值的,当只写属性名而不指定属性值时,表示属性为true;如果想要设为false,可以不使用该属性,或者将属性名设定为属性值,或者设为空字符串。
阅读全文 »

HTML中应该抛弃的书写习惯

本文翻译自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注释里面,这样,能够识别脚本的浏览器将会执行脚本,而其他的浏览器则忽略。
阅读全文 »

flight