【转载】Google推荐的15条军规:HTML5代码规范

标签: HTML5 技术博文 | 发表时间:2012-07-02 21:37 | 作者:HTML5研究小组
出处:http://www.mhtml5.com

今天无意间看到了Google的HTML/CSS编码规范,发现了不少自己很容易忽略的问题,特意仔细看了看,将其整理翻译出来分享给大家。Google规范的原文链接大家可以访问: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

1.协议头:

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<br>
<!-- Not recommended不推荐 --><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的朋友,可以参考。当然,不同团队还会整理出适合自己的代码规范,上述应该来说属于比较基本的规则内容。

转载自: http://www.mxria.com/html5/h201205111471.htm#692247-tsina-1-91726-5107e6f77b82ec694fc855c201a77269

相关 [google html5 代码] 推荐:

【转载】Google推荐的15条军规:HTML5代码规范

- - HTML5研究小组
今天无意间看到了Google的HTML/CSS编码规范,发现了不少自己很容易忽略的问题,特意仔细看了看,将其整理翻译出来分享给大家. Google规范的原文链接大家可以访问: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml.

Google Swiffy把Flash变成HTML5

- Caiwangqin - 36氪
由于Flash被苹果拒之门外,很多开发者在开发产品时都不得不在Flash和HTML5之间做出选择. 今天Google发布的一个新工具让天平再次偏向HTML5这边,它就是Swiffy. Swiffy可以把Flash文件转换成HTML5标准. 该项目源于Google移动广告团队,开发动机就是有些设备不支持Adobe的格式,因此无法显示Flash动画.

Google发布chrome HTML5应用

- Amom - Solidot
游戏番茄 写道 "早在5月份Google就宣布旗下产品Gmail、Calendar、Docs将支持基于HTML5离线的访问. 如今终于实现了,上述Web服务以应用的方式发布在Chrome商店. 现在进入相关产品页面会提示是否开启离线功能,并引导安装离线版产品应用. 安装后启动新的chrome窗口会显示已安装的新应用,这样即使你离线的情况下,你仍然可以正常访问和使用已经保存在本地数据库的内容.

Google 的 HTML5 投影片用 Template

- 董玉伟 - Tsung&#39;s Blog
我喜歡將投影片作成 HTML, 主要是任何環境都可以讀取、修改, 做起來也快.. 之前都使用 S5, Google 最近公開一套可以使用 - html5slides - A Google HTML5 slide template.. Demo: html5slides Presentation (可以 左右鍵 切換下一頁, F5 Reload, F11 全螢幕).

【转载】从Mozilla的HTML5游戏Browser Quest看代码漏洞

- - HTML5研究小组
声明:作弊并不是什么好事,我不提倡作弊. 我也不想讽刺Mozilla的代码质量(实际上其代码糟透了). 我不是超级黑客,也不想在此唱高调. 只是想演示一下我在Mozilla新游戏上是如何作弊的,以后大家在编写HTML5游戏时要注意避免这些问题. 为了将Bard’s Tale游戏通过磁盘编辑器进行编辑并存入我的Apple 2e,我不得不学习16进制.

百行 HTML5 代码实现四种双人对弈游戏

- - 博客 - 伯乐在线
简介: 本文是一个非常具有挑战性的编程,因为 100 行代码,约莫 10000 个字符左右,将实现围棋、五子棋、四子棋和翻转棋四种双人对弈游戏. 请注意,这四个对弈游戏不是初级编程者的习作,而是有着棋盘、立体棋子、事件、走棋规则判断、输赢判断的完整对弈游戏,并且可以离线存储到 iPad、Android 平板中,试想一下,把这种游戏下载到平板中,就可以在火车,旅游景区,等没有信号的地方进行对弈,是不是扩展了平板电脑的功能,是不是一种很惬意的事情.

Google 新发布 Gmail HTML5 Chrome 应用,支持离线使用

- pestwave - 36氪
Google 很早之前曾通过 Gears 提供过离线访问 Gmail, 日历和文档的功能,但是 Gears 已经不再被支持,今天,Google 宣布,通过 HTML5 Chrome Web 应用,他们重建了对这些服务的离线访问. Gmail 离线访问今天就可以使用,日历和文档会在接下来几周内依次推出.

Android 阻挡了 Google 拥抱 HTML5 的步伐?

- 橙子 - 爱范儿 · Beats of Bits
Strobe 是一个为移动应用构建提供开源框架的初创公司. 该公司负责商业开发的高级副总裁 Matt Asay 曾是 Canonical(发行 Ubuntu 的公司)的首席运营官, 也曾担任过 Alfresco 公司的副总裁,在开源领域有着 10 多年的经验. Matt Asay 在 The Register 网站有个两周一次的专栏“开放……和封闭”(Open… and Shut),专注于软件开发中的开放和封闭之争.

迈向HTML5的路上,苹果扯了一下Google的蛋

- Hans - cnBeta.COM
如果可以有一家公司在移动互联网领域击败苹果,那么应该只有Google. 苹果对本地应用的死忠正是web之王Google的矛头所指. 一份分析指出,web和html5将在接下来的四年里面将苹果的经营利润削掉30%,因为应用开发者们正在开发跨设备的基于浏览器的应用.

不必學語法!Google 幫你把 Flash 轉成 HTML5

- Rei - T客邦
儘管 iPhone、iPad 不斷推陳出新,但是這些 iOS 的裝置,還是堅持不支援 Flash 的 swf 格式檔. 幸好 Flash 所能呈現的效果,HTML5 格式也幾乎都能支援. 貼心的 Google 提供了 Swiffy 轉檔功能,幫我們把 Flash 直接轉成 HTML5. 官方網址:http://swiffy.googlelabs.com.