谷歌 HTML/CSS 规范

[h1]来自：Web Develop - SegmentFault[/h1]链接：https://segmentfault.com/a/1190000007023192（点击尾部阅读原文前往）
原文：https://google.github.io/styleguide/htmlcssguide.xml

[h1]背景[/h1]这篇文章定义了 HTML 和 CSS 的格式和代码规范，旨在提高代码质量和协作效率。
[h1]通用样式规范[/h1][h2]协议[/h2]省略图片、样式、脚本以及其他媒体文件 URL 的协议部分（http:,https:），除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL，好处是无论你是使用   HTTPS 还是 HTTP 访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。

复制代码

复制代码

1. /* Not recommended */
2. .example {
3.   backgroundnull:url(https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-1d051329605f0f096e66a15dfaef368a);
4. }

复制代码

1. /* Recommended */
2. .example {
3.   background: url(//www.google.com/images/example);
4. }

复制代码

[h1]通用格式规范[/h1][h2]缩进[/h2]一次缩进2个空格，不要使用 tab 或者混合 tab 和空格的缩进。

2.   Fantastic
3.   Great

复制代码

1. .example {
2.   color: blue;
3. }

复制代码

[h2]大小写[/h2]以下都应该用小写：
HTML 元素名称，属性，属性值（除非 text/CDATA），CSS 选择器，属性，属性值。

2. Home

复制代码

复制代码

1. /* Not recommended */
2. color: #E5E5E5;

复制代码

1. /* Recommended */
2. color: #e5e5e5;

复制代码

[h2]结尾空格[/h2]结尾空格不仅多余，而且在比较代码时会更麻烦。

2. What?_

复制代码

2. Yes please.

复制代码

[h1]通用元规范[/h1][h2]编码[/h2]在 HTML 中通过指定编码方式，CSS 中不需要指定，因为默认是 UTF-8。
[h2]注释[/h2]使用注释来解释代码：包含的模块，功能以及优点。
[h2]任务项[/h2]用 TODO 来标记待办事项，而不是用一些其他的标记，像 @@。

3.   Apples
4.   Oranges

复制代码

[h1]HTML 风格规范[/h1][h2]文档类型[/h2]HTML 文档应使用 HTML5 的文档类型：。
孤立标签无需封闭自身，

1. [/code] 不要写成 [code]。

复制代码

[h2]HTML 正确性[/h2]尽可能使用正确的 HTML。

2. Test
3. This is only a test.

复制代码

4. Test
5. This is only a test.

复制代码

[h2]语义化[/h2]根据使用场景选择正确的 HTML 元素（有时被错误的称为“标签”）。例如，使用  h1 元素创建标题，p 元素创建段落，a 元素创建链接等等。正确的使用 HTML 元素对于可访问性、可重用性以及编码效率都很重要。

2. All recommendations

复制代码

2. All recommendations

复制代码

[h2]多媒体元素降级[/h2]对于像图片、视频、canvas 动画等多媒体元素，确保提供其他可访问的内容。图片可以使用替代文本（alt），视频和音频可以使用文字版本。

复制代码

复制代码

[h2]关注分离[/h2]标记、样式和脚本分离，确保相互耦合最小化。
[h2]实体引用[/h2]如果团队中文件和编辑器使用同样的编码方式，就没必要使用实体引用，如

1. 鈥�

复制代码

，

1. 鈥�

复制代码

，

1. 鈽�

复制代码

，除了一些在 HTML 中有特殊含义的字符（如 < 和 &）以及不可见的字符（如空格）。
[quote][code]
The currency symbol for the Euro is 鈥