AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

[译]谷歌 HTML/CSS 规范

2017-08-01 2017
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：


背景

这篇文章定义了 HTML 和 CSS 的格式和代码规范，旨在提高代码质量和协作效率。

通用样式规范

协议

省略图片、样式、脚本以及其他媒体文件 URL 的协议部分(http:,https:)，除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL，好处是无论你是使用 HTTPS 还是 HTTP 访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。


 
 
    

  
  
  1. <!-- Not recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>  
    4. 
 
 



 
 
    

  
  
  1. <!-- Recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>  
    4. 
 
 



 
 
    

  
  
  1. /* Not recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. .example { 
    4. 

  
  
  4.  
    5. 

  
  
  5. background: url(https://www.google.com/images/example); 
    6. 

  
  
  6.  
    7. 

  
  
  7. }  
    8. 
 
 



 
 
    

  
  
  1. /* Recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. .example { 
    4. 

  
  
  4.  
    5. 

  
  
  5. background: url(//www.google.com/images/example); 
    6. 

  
  
  6.  
    7. 

  
  
  7. }  
    8.

通用格式规范

缩进

一次缩进2个空格，不要使用 tab 或者混合 tab 和空格的缩进。


 
 
    

  
  
  1. <ul> 
    2. 

  
  
  2.   <li>Fantastic 
    3. 

  
  
  3.   <li>Great 
    4. 

  
  
  4. </ul>  
    5. 
 
 



 
 
    

  
  
  1. .example { 
    2. 

  
  
  2.  
    3. 

  
  
  3.     color: blue; 
    4. 

  
  
  4.  
    5. 

  
  
  5. }  
    6.

大小写

以下都应该用小写：HTML 元素名称，属性，属性值(除非 text/CDATA)，CSS 选择器，属性，属性值。


 
 
    

  
  
  1. <!-- Not recommended --> 
    2. 

  
  
  2. <A HREF="/">Home</A>  
    3. 
 
 



 
 
    

  
  
  1. <!-- Recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <img src="google.png" alt="Google">  
    4. 
 
 



 
 
    

  
  
  1. /* Not recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. color: #E5E5E5;  
    4. 
 
 



 
 
    

  
  
  1. /* Recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. color: #e5e5e5;  
    4.

结尾空格

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


 
 
    

  
  
  1. <!-- Not recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <p>What?_  
    4. 
 
 



 
 
    

  
  
  1. <!-- Recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <p>Yes please.  
    4.

通用元规范

编码

在 HTML 中通过 <meta charset="utf-8"> 指定编码方式，CSS 中不需要指定，因为默认是 UTF-8。

注释

使用注释来解释代码：包含的模块，功能以及优点。

任务项

用 TODO 来标记待办事项，而不是用一些其他的标记，像 @@。


 
 
    

  
  
  1. <!-- TODO: remove optional tags --> 
    2. 

  
  
  2. <ul> 
    3. 

  
  
  3.   <li>Apples</li> 
    4. 

  
  
  4.   <li>Oranges</li> 
    5. 

  
  
  5. </ul>  
    6.

HTML 风格规范

文档类型

HTML 文档应使用 HTML5 的文档类型：<!DOCTYPE html>。

孤立标签无需封闭自身，<br> 不要写成 <br />。

HTML 正确性

尽可能使用正确的 HTML。


 
 
    

  
  
  1. <!-- Not recommended --> 
    2. 

  
  
  2. <title>Test</title> 
    3. 

  
  
  3. <article>This is only a test.  
    4. 
 
 



 
 
    

  
  
  1. <!-- Recommended --> 
    2. 

  
  
  2. <!DOCTYPE html> 
    3. 

  
  
  3. <meta charset="utf-8"> 
    4. 

  
  
  4. <title>Test</title> 
    5. 

  
  
  5. <article>This is only a test.</article>  
    6.

语义化

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


 
 
    

  
  
  1. <!-- Not recommended --> 
    2. 

  
  
  2. <div onclick="goToRecommendations();">All recommendations</div>  
    3. 
 
 



 
 
    

  
  
  1. <!-- Recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <a href="recommendations/">All recommendations</a>  
    4.

多媒体元素降级

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


 
 
    

  
  
  1. <!-- Not recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <img src="spreadsheet.png">  
    4. 
 
 



 
 
    

  
  
  1. <!-- Recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <img src="spreadsheet.png" alt="Spreadsheet screenshot.">  
    4.

关注分离

标记、样式和脚本分离，确保相互耦合最小化。

实体引用

如果团队中文件和编辑器使用同样的编码方式，就没必要使用实体引用，如 —， ”，，除了一些在 HTML 中有特殊含义的字符(如 < 和 &)以及不可见的字符(如空格)。


 
 
    

  
  
  1. <!-- Not recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. The currency symbol for the Euro is “&eur;”.  
    4. 
 
 



 
 
    

  
  
  1. <!-- Recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. The currency symbol for the Euro is “€”.  
    4.

type 属性

在引用样式表和脚本时，不要指定 type 属性，除非不是 CSS 或 JavaScript。因为 HTML5 中已经默认指定样式变的 type 是 text/css，脚本的type 是 text/javascript。


 
 
    

  
  
  1. <!-- Not recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <link rel="stylesheet" href="//www.google.com/css/maia.css" 
    4. 

  
  
  4.  
    5. 

  
  
  5. type="text/css">  
    6. 
 
 



 
 
    

  
  
  1. <!-- Recommended --> 
    2. 

  
  
  2. <link rel="stylesheet" href="//www.google.com/css/maia.css">  
    3. 
 
 



 
 
    

  
  
  1. <!-- Not recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <script src="//www.google.com/js/gweb/analytics/autotrack.js" 
    4. 

  
  
  4.  
    5. 

  
  
  5. type="text/javascript"></script>  
    6. 
 
 



 
 
    

  
  
  1. <!-- Recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>  
    4.

HTML 格式规范

HTML 引号

属性值用双引号。


 
 
    

  
  
  1. <!-- Not recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <a class='maia-button maia-button-secondary'>Sign in</a>  
    4. 
 
 



 
 
    

  
  
  1. <!-- Recommended --> 
    2. 

  
  
  2.  
    3. 

  
  
  3. <a class="maia-button maia-button-secondary">Sign in</a>  
    4.

CSS 风格规范

ID 和 Class 命名

使用有含义的 id 和 class 名称。


 
 
    

  
  
  1. /* Not recommended: meaningless */ 
    2. 

  
  
  2. #yee-1901 {} 
    3. 

  
  
  3.  
    4. 

  
  
  4. /* Not recommended: presentational */ 
    5. 

  
  
  5. .button-green {} 
    6. 

  
  
  6. .clear {}  
    7. 
 
 



 
 
    

  
  
  1. /* Recommended: specific */ 
    2. 

  
  
  2. #gallery {} 
    3. 

  
  
  3. #login {} 
    4. 

  
  
  4. .video {} 
    5. 

  
  
  5.  
    6. 

  
  
  6. /* Recommended: generic */ 
    7. 

  
  
  7. .aux {} 
    8. 

  
  
  8. .alt {}  
    9.

ID 和 Class 命名风格

id 和 class 应该尽量简短，同时要容易理解。


 
 
    

  
  
  1. /* Not recommended */ 
    2. 

  
  
  2. #navigation {} 
    3. 

  
  
  3. .atr {}  
    4. 
 
 



 
 
    

  
  
  1. /* Recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. #nav {} 
    4. 

  
  
  4.  
    5. 

  
  
  5. .author {}  
    6.

选择器

除非需要，否则不要在 id 或 class 前加元素名。


 
 
    

  
  
  1. /* Not recommended */ 
    2. 

  
  
  2. ul#example {} 
    3. 

  
  
  3. div.error {}  
    4. 
 
 



 
 
    

  
  
  1. /* Recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. #example {} 
    4. 

  
  
  4.  
    5. 

  
  
  5. .error {}  
    6.

属性简写

尽量使用 CSS 中可以简写的属性 (如 font)，可以提高编码效率以及代码可读性。


 
 
    

  
  
  1. /* Not recommended */ 
    2. 

  
  
  2. border-top-style: none; 
    3. 

  
  
  3. font-family: palatino, georgia, serif; 
    4. 

  
  
  4. font-size: 100%; 
    5. 

  
  
  5. line-height: 1.6; 
    6. 

  
  
  6. padding-bottom: 2em; 
    7. 

  
  
  7. padding-left: 1em; 
    8. 

  
  
  8. padding-right: 1em; 
    9. 

  
  
  9. padding-top: 0;  
    10. 
 
 



 
 
    

  
  
  1. /* Recommended */ 
    2. 

  
  
  2. border-top: 0; 
    3. 

  
  
  3. font: 100%/1.6 palatino, georgia, serif; 
    4. 

  
  
  4. padding: 0 1em 2em;  
    5.

0 和单位

值为 0 时不用添加单位。


 
 
    

  
  
  1. margin: 0; 
    2. 

  
  
  2. padding: 0;  
    3.

开头的 0

值在 -1 和 1 之间时，不需要加 0。


 
 
    

  
  
  1. font-size: .8em; 
    2.

16进制表示法


 
 
    

  
  
  1. /* Not recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. color: #eebbcc; 
    4. 
 
 



 
 
    

  
  
  1. /* Recommended */  
    2. 

  
  
  2.   
    3. 

  
  
  3. color: #ebc;  
    4.

前缀

使用带前缀的命名空间可以防止命名冲突，同时提高代码可维护性。


 
 
    

  
  
  1. .adw-help {} /* AdWords */ 
    2. 

  
  
  2. #maia-note {} /* Maia */  
    3.

ID 和 Class 命名分隔符

选择器中使用连字符可以提高可读性。


 
 
    

  
  
  1. /* Not recommended: does not separate the words “demo” and “image” */ 
    2. 

  
  
  2. .demoimage {} 
    3. 

  
  
  3.  
    4. 

  
  
  4. /* Not recommended: uses underscore instead of hyphen */ 
    5. 

  
  
  5. .error_status {}  
    6. 
 
 



 
 
    

  
  
  1. /* Recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. #video-id {} 
    4. 

  
  
  4.  
    5. 

  
  
  5. .ads-sample {}  
    6.

CSS 格式规范

书写顺序

按照属性首字母顺序书写 CSS 易于阅读和维护，排序时忽略带有浏览器前缀的属性。


 
 
    

  
  
  1. background: fuchsia; 
    2. 

  
  
  2. border: 1px solid; 
    3. 

  
  
  3. -moz-border-radius: 4px; 
    4. 

  
  
  4. -webkit-border-radius: 4px; 
    5. 

  
  
  5. border-radius: 4px; 
    6. 

  
  
  6. color: black; 
    7. 

  
  
  7. text-align: center; 
    8. 

  
  
  8. text-indent: 2em;  
    9.

块级内容缩进

为了反映层级关系和提高可读性，块级内容都应缩进。


 
 
    

  
  
  1. @media screen, projection { 
    2. 

  
  
  2.  
    3. 

  
  
  3.   html { 
    4. 

  
  
  4.     background: #fff; 
    5. 

  
  
  5.     color: #444; 
    6. 

  
  
  6.   } 
    7. 

  
  
  7.  
    8. 

  
  
  8. }  
    9.

声明结束

每行 CSS 都应以分号结尾。


 
 
    

  
  
  1. /* Not recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. .test { 
    4. 

  
  
  4.  
    5. 

  
  
  5. display: block; 
    6. 

  
  
  6.  
    7. 

  
  
  7. height: 100px 
    8. 

  
  
  8.  
    9. 

  
  
  9. }  
    10. 
 
 



 
 
    

  
  
  1. /* Recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. .test { 
    4. 

  
  
  4.  
    5. 

  
  
  5. display: block; 
    6. 

  
  
  6.  
    7. 

  
  
  7. height: 100px; 
    8. 

  
  
  8.  
    9. 

  
  
  9. } 
    10.

属性名结尾

属性名和值之间都应有一个空格。


 
 
    

  
  
  1. /* Not recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. h3 { 
    4. 

  
  
  4.  
    5. 

  
  
  5. font-weight:bold; 
    6. 

  
  
  6.  
    7. 

  
  
  7. }  
    8. 
 
 



 
 
    

  
  
  1. /* Recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. h3 { 
    4. 

  
  
  4.  
    5. 

  
  
  5. font-weight: bold; 
    6. 

  
  
  6.  
    7. 

  
  
  7. }  
    8.

声明样式块的分隔

在选择器和 {} 之间用空格隔开。


 
 
    

  
  
  1. /* Not recommended: missing space */ 
    2. 

  
  
  2. #video{ 
    3. 

  
  
  3.   margin-top: 1em; 
    4. 

  
  
  4. } 
    5. 

  
  
  5.  
    6. 

  
  
  6. /* Not recommended: unnecessary line break */ 
    7. 

  
  
  7. #video 
    8. 

  
  
  8. { 
    9. 

  
  
  9.   margin-top: 1em; 
    10. 

  
  
  10. }  
    11. 
 
 



 
 
    

  
  
  1. /* Recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. #video { 
    4. 

  
  
  4.  
    5. 

  
  
  5. margin-top: 1em; 
    6. 

  
  
  6.  
    7. 

  
  
  7. }  
    8.

选择器分隔

每个选择器都另起一行。


 
 
    

  
  
  1. /* Not recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. a:focus, a:active { 
    4. 

  
  
  4.  
    5. 

  
  
  5. position: relative; top: 1px; 
    6. 

  
  
  6.  
    7. 

  
  
  7. }  
    8. 
 
 



 
 
    

  
  
  1. /* Recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. h1, 
    4. 

  
  
  4.  
    5. 

  
  
  5. h2, 
    6. 

  
  
  6.  
    7. 

  
  
  7. h3 { 
    8. 

  
  
  8.  
    9. 

  
  
  9. font-weight: normal; 
    10. 

  
  
  10.  
    11. 

  
  
  11. line-height: 1.2; 
    12. 

  
  
  12.  
    13. 

  
  
  13. }  
    14.

规则分隔

规则之间都用空行隔开。


 
 
    

  
  
  1. html { 
    2. 

  
  
  2.   background: #fff; 
    3. 

  
  
  3. } 
    4. 

  
  
  4.  
    5. 

  
  
  5. body { 
    6. 

  
  
  6.   margin: auto; 
    7. 

  
  
  7.   width: 50%; 
    8. 

  
  
  8. }  
    9.

CSS 引号

属性选择器和属性值用单引号，URI 的值不需要引号。


 
 
    

  
  
  1. /* Not recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. @import url("//www.google.com/css/maia.css"); 
    4. 

  
  
  4.  
    5. 

  
  
  5. html { 
    6. 

  
  
  6.  
    7. 

  
  
  7. font-family: "open sans", arial, sans-serif; 
    8. 

  
  
  8.  
    9. 

  
  
  9. }  
    10. 
 
 



 
 
    

  
  
  1. /* Recommended */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. @import url(//www.google.com/css/maia.css); 
    4. 

  
  
  4.  
    5. 

  
  
  5. html { 
    6. 

  
  
  6.  
    7. 

  
  
  7. font-family: 'open sans', arial, sans-serif; 
    8. 

  
  
  8.  
    9. 

  
  
  9. }  
    10.

CSS 元规则

分段注释

用注释把 CSS 分成各个部分。


 
 
    

  
  
  1. /* Header */ 
    2. 

  
  
  2.  
    3. 

  
  
  3. #adw-header {} 
    4. 

  
  
  4.  
    5. 

  
  
  5. /* Footer */ 
    6. 

  
  
  6.  
    7. 

  
  
  7. #adw-footer {} 
    8. 

  
  
  8.  
    9. 

  
  
  9. /* Gallery */ 
    10. 

  
  
  10.  
    11. 

  
  
  11. .adw-gallery {}  
    12.

结语

坚持遵循代码规范。

写代码前先看看周围同事的代码，然后决定代码风格。

代码规范的意义在于提供一个参照物。这里提供了一份全局的规范，但是你也得参照公司内部的规范，否则阅读你代码的人会很痛苦。


作者：张宗正

来源：51CTO

文章标签：
前端开发
JavaScript
HTML5
移动开发
关键词：
HTML CSS
CSS规范
HTML规范
CSS html
HTML谷歌
行者武松
目录
相关文章
二二*一一
|
28天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
48 1
土木林森
|
13天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
26 6
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
42 1
[HTML、CSS]细节与使用经验
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
33 1
[HTML、CSS]知识点
aliyun8599273441-30642
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
278 65
LALA
|
27天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
LALA
49 12
温轻舟
|
23天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
102 1
蓝易云
|
28天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
41 3
疯狂的猿
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
101 6
游客44yag4ft7nckq
|
1月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式，通过&lt;head&gt;部分的&lt;style&gt;标签定义；外部样式表适用于多个页面，通过&lt;link&gt;标签引用外部CSS文件；&lt;style&gt;定义样式，&lt;link&gt;引用资源；已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;，属性有color和bgcolor。
游客44yag4ft7nckq
25 0