【转载】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 全螢幕).

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.

Google、微软与Netflix计划将HTML5媒体内容加密

- - HTML5研究小组
Google, Microsoft, 和 Netflix提出一项将HTML5音频和视频文件加密的Encrypted Media Extensions提案,该提案将使网络和其他地方应用程序使用密匙控制是否有权访问特定的媒体流,从而实现支持key或bit的任何格式都可以在HTML5下使用. 这将消除Adobe和其他相关提供者关于HTML5内容版权限制的异议.

Google IO 2012年 HTML5 的投影片套件

- - Tsung's Blog
GoogleIO 2012年演講時, 使用的投影片是 HTML5 寫的, 有 Open Source 出來可以讓大家修改使用. (線上 Demo 可見: Title Goes Here Up To Two Lines). 註: 如果想要製作 + 即時預覽, 建議安裝 gem、compass 來操作修改, 會比較方便.