TAT.Kinvix Google 推荐的 HTML5 代码规范
In 未分类 on 2012年07月09日 by view: 10,059
4

Google 作为业界的领头羊，为 HTML5 代码规范作出了详尽实用的规范，一起来学习吧！

1. 协议头：

建议在指向图片或其他媒体文件、样式表和脚本的 URL 地址中省略 http：https: 协议部分，除非已知相应文件不能同时兼容 2 个协议。

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

注：这个倒是真正平日不注意的，只要是绝对地址，http：总是带着。如果仔细想一想，还真有道理。

2. 缩进：每次缩进使用双空格
不要使用 tab 制表符或制表符加空格的混合方式缩进

1
2
3
4
5
6
7
<ul><br>
  <li>mxria.com<br>
  <li>www.mxria.com<br>
</ul><br>
.example {<br>
  color: blue;<br>
}

3. 大小写：只使用小写

所有的代码都应是小写的，包括元素名称、属性，属性值（除非 text 或 CDATA 的内容）、选择器、css 属性、属性值（字符串除外）

1
2
3
4
5
<br>
<!-- Not recommended 不推荐--><br>
<A HREF="/">Home</A><br>
<!-- Recommended 推荐--><br>
<img src="mxria.png" alt="MXRIA">

4. 尾随空格
尾随空格是不必要的，容易搞复杂 diff 文件。这个绝对是经验教训的总结！！！

1
2
3
4
<!-- Not recommended --><br>
<p>What?_<br>
<!-- Recommended --><br>
<p>Yes please.

5. 编码格式：使用 UTF-8

请确保您的编辑器使用的字符编码?? 为 UTF-8，没有字节顺序标记。在 html 模板或文档中通过 <meta charset="utf-8"> 来

定义编码格式。关于编码格式参考 Character Sets & Encodings in XHTML, HTML and CSS

6. 注释
根据需要解释代码，这个就不多说了，团队开发这个非常重要，尽管很多时候大家不愿意遵守，但确实重要！！！

7.TODO 待定项
尚未实现的或待定的内容一定要标识强调出来，利用 TODO 辨识，而非其他诸如 @@来强调。
在 todo 项中如果有必要列明联系人，比如负责人
在 TODO 后追加一个冒号作为行动内容，例如 TODO：为美瑞网增加 html5 模板

8. 文档类型：使用 HTML5

使用<!DOCTYPE html>.HTML（text/html）类型文件相对 XHTML（alication/xhtml+xml）文件，在浏览器及框架支持上和优化空间上都要好很多。
9.HTML 合法性验证

合法的使用 HTML，并利用 w3c 的工具（W3C HTML validator）进行检查。唯一例外就是因为性能原因需要压缩文件大小。
原文如下：Use valid HTML code unless that is not possible due to otherwise unattainable performance goals  regarding file size. 但这个确实很难想象，省略标签节省的文件大小能有多少字节？但带来的问题可是风险居高哦！

1
2
3
4
5
6
7
8
9
<br>
<!-- Not recommended 不推荐--><br>
<title>Test</title><br>
<article>This is only a test.<br>
<!-- Recommended 推荐--><br>
<!DOCTYPE html><br>
<meta charset="utf-8"><br>
<title>Test</title><br>
<article>This is only a test.</article>

10. 语义性
根据目的来合理使用 HTML，这点对于 HTML5 而言尤为重要。下面例子可以对比，能实现同样的结果，但效率和可读性却有很大差别。

1
2
3
4
5
<br>
<!-- Not recommended --><br>
<div onclick="goToRecommendations();">All recommendations</div><br>
<!-- Recommended --><br>
<a href="recommendations/">All recommendations</a>

对于 HTML5 而言，例如 header、footer、nav、section 等跟 div 能实现的功能基本类似，但是语义性上有着天壤之别。

11. 多媒体后备：为多媒体提供备选内容

这个属于老生长谈的内容，典型就是为 img 添加 alt 内容。

12. 关注点分离
这点很重要，严格遵守将组织结构 (markup)、表现样式 (style) 和行为动作 (script) 分开处理的原则，并且尽量使三者之间的关联度降到最小。这主要是基于维护性的考虑，通常，更新 style 文件或脚本文件比更改 HTML 文件的代价要小很多，试想一下，对于一个有超过 10 万页面的网站进行局部颜色调整，是每个 html 文件修改容易还是修改一个 style 文件容易？

12. 可选 Tags：省略可选的标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<strong><br>
</strong><!-- Not recommended --><br>
<!DOCTYPE html><br>
<html><br>
  <head><br>
    <title>Spending money, spending bytes</title><br>
  </head><br>
  <body><br>
    <p>Sic.</p><br>
  </body><br>
</html><br>
<!-- Recommended --><br>
<!DOCTYPE html><br>
<title>Saving money, saving bytes</title><br>
<p>Qed.

13. 实体引用
假定开发团队内，文件和编辑器都是使用同样的编码格式（UTF-8），则没有必要使用实体引用的方式，例如&mdash;,

&rdquo;, or &#x263a; 除非一些 HTML 中具有特定含义的字符，如"<", 或不可见字符如空格

14.Type 属性：省略
将样式表和脚本中的 Type 省略，除非你不是用的 css 或 javascript，在 HTML5 中，该值默认是 text/css 和 text/javascript

1
2
3
4
5
6
7
8
9
10
11
<br>
<!-- Not recommended --><br>
<link rel="stylesheet" href="//www.google.com/css/maia.css"<br>
  type="text/css"><br>
<!-- Recommended --><br>
<link rel="stylesheet" href="//www.google.com/css/maia.css"><br>
<!-- Not recommended --><br>
<script src="//www.google.com/js/gweb/analytics/autotrack.js"<br>
  type="text/javascript"></script><br>
<!-- Recommended --><br>
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

15.block，list 或 table 元素
针对每个 block，list 或 table 元素另起一行，并在每个子元素前缩进。这样可读性好，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<blockquote><br>
  <p><em>Space</em>, the final frontier.</p><br>
</blockquote><br>
<ul><br>
  <li>Moe<br>
  <li>Larry<br>
  <li>Curly<br>
</ul><br>
<table><br>
  <thead><br>
    <tr><br>
      <th scope="col">Income<br>
      <th scope="col">Taxes<br>
  <tbody><br>
    <tr><br>
      <td>$ 5.00<br>
      <td>$ 4.50<br>
</table>

对于使用 HTML5 的朋友，可以参考。当然，不同团队还会整理出适合自己的代码规范，上述应该来说属于比较基本的规则内容。

原创文章转载请注明：

转载自AlloyTeam：http://www.alloyteam.com/2012/07/google-recommends-the-html5-code-specifications/

如果你觉得我们Alloyteam团队的博客和开源项目给你带来价值，可以通过捐赏支持我们
有你的支持，我们会做得更好！
分享到:0

  2. 遥遥 2012 年 10 月 29 日

    代码太乱了，能整理下吗，原文在哪？

    回复

  3. 碌木 2012 年 7 月 25 日

    代码段里面的各种
    对于专业的前端团队来说, 不删除真的可以吗?

    回复

    • 碌木 2012 年 7 月 25 日

      代码段里面的各种＜ｂｒ＞

      回复

发表评论到 小议前端代码规范 | 神刀安全网

点击这里取消回复。