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

！-不推荐-script src=' https://www . Google.com/js/gweb/analytics/autotrack . js '/script

！-推荐-脚本src='//www . Google.com/js/gweb/analytics/autotrack . js '/脚本

/*不推荐*/。示例{

background : URL(https://www . Google.com/images/example)；

}

/*推荐*/。示例{

background : URL(//www . Google.com/images/example)；

}

通用格式规范

缩回

一次缩进2个空格，不要使用制表符或混合制表符和空格的缩进。

ullifantistaligreat/ul。示例{

颜色：蓝色；

}

情况

以下内容应以小写形式出现：

HTML元素名称，属性，属性值(文本/CDATA除外)，CSS选择器，属性，属性值。

！-不推荐- A HREF='/'家/A

！-推荐-img src=' Google . png ' alt=' Google '

/*不推荐*/

color : # E5E 5；

/*推荐*/

color: # e5e5e5

结尾空格

结尾空格不仅多余，而且比较代码的时候比较麻烦。

！-不推荐-什么？_

！-推荐-请给我派斯。

通用元规范

编码

编码方法是在HTML中指定的，而不是在CSS中指定的，因为UTF-8是默认的。

给…作注解

用注释说明代码：包含的模块，功能和优点。

任务项目

用TODO标记待办事项，而不是像@ @这样的其他标记。

！- TODO:移除可选标签- ul

li应用程序/li

li范围/li/ul

HTML样式规范

文件类型

HTML文档要用HTML5文档类型：DOCTYPE html .孤立标签不需要自行关闭，br请勿写入br/。

HTML正确性

尽可能使用正确的HTML。

！-不推荐-标题测试/标题文章这只是一个测试。

！-推荐-！DOCTYPE html meta charset=' utf-8 ' title TeSt/title article这只是一个测试。/article

语义化

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

！-不推荐-div onclick=' GoToRecordinations()；'所有建议/div

！-推荐- a href='建议/'所有建议/a

多媒体元素被降级

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

！-不推荐- img src='电子表格. png '

！-推荐- img src='电子表格. png' alt='电子表格截图'

专注于分离

标签、样式和脚本是分开的，以确保相互耦合最小化。

实体引用

如果团队中的文件和编辑器使用相同的编码方式，就不需要使用实体引用，比如mdash，rdquo，x263a除了HTML中一些有特殊含义的字符(如和)和不可见的字符(如空格)。

！-不推荐-欧元的货币符号为ldquo欧元；rdquo。

！-推荐-欧元的货币符号是“”。

类型属性

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

！-不推荐- link rel='样式表' href='//www . Google.com/CSS/maia . CSS '

type='text/css '

！-推荐- link rel='样式表' href='//www . Google.com/CSS/maia . CSS '

！-不推荐-脚本src='//www . Google.com/js/gweb/analytics/autotrack . js '

type='text/javascript'/script

！-推荐-脚本src='//www . Google.com/js/gweb/analytics/autotrack . js '/脚本

HTML格式规范

HTML引号

属性值用双引号引起来。

！-不推荐- a class='主要-按钮主要-按钮次要'登录/a

！-推荐-a class=' maia-button maia-button-secondary '登录/a

半铸钢钢性铸铁(铸造半钢)风格规范

身份和班级命名

使用有含义的编号和班级名称。

/*不推荐：无意义*/

#yee-1901 {}

/*不推荐：演示*/。按钮-绿色{}。清除{}

/*推荐：特定*/

#gallery {}

#登录{}。视频{}

/*推荐：通用*/。aux {}。alt {}

身份和班级命名风格

编号和班级应该尽量简短，同时要容易理解。

/*不推荐*/

#导航{}。atr {}

/*推荐*/

#nav {}。作者{}

选择器

除非需要，否则不要在编号或班级前加元素名。

/*不推荐*/

ul #示例{}

div.error {}

/*推荐*/

#示例{}。错误{}

属性简写

尽量使用半铸钢钢性铸铁(铸造半钢)中可以简写的属性（如字体),可以提高编码效率以及代码可读性。

/*不推荐*/

边框-top-style : none；

font-family: palatino，georgia，serif

font-size : ；

线高： 1.6;

衬垫-底部： 2em

左衬垫： 1em

填充-右侧： 1em

填充-top : 0；

/*推荐*/

border-top : 0；

font: /1.6 palatino，乔治亚州，衬线

padding: 0 1em 2em

0 和单位

值为0 时不用添加单位。

边距：0；

padd : 0；

开头的0

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

font-size :8 em

16进制表示法

/*不推荐*/

color: # eebbcc

/*推荐*/

color: # ebc

前缀

使用带前缀的命名空间可以防止命名冲突，同时提高代码可维护性。adw-help {} /* AdWords */

#maia-note {} /* Maia */

身份和班级命名分隔符

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

/*不推荐：不区分"演示"和"图像"*/。demoimage {}

/*不推荐：使用下划线代替连字符*/。错误_状态{}

/*推荐*/

#video-id {}。广告-示例{}

半铸钢钢性铸铁(铸造半钢)格式规范

书写顺序

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

背景：紫红色；

border: 1px固体；

-moz-border-radius : 4px；

-web kit-border-radius : 4px；

border-radius : 4px

颜色：黑色；

文本-对齐：中心；

text-缩进： 2em

块级内容缩进

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

@媒体屏幕，投影{

html {

背景# fff

颜色： # 444

}

}

声明结束

每行半铸钢钢性铸铁(铸造半钢)都应以分号结尾。

/*不推荐*/。测试{

显示器：块；

高度： 100px

}

/*推荐*/。测试{

显示器：块；

高度： 100px

}

属性名结尾

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

/*不推荐*/

h3 {

font-weight : bold；

}

/*推荐*/

h3 {

font-weight : bold；

}

声明样式块的分隔

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

/*不建议：缺少空格*/

#视频{

页边距-顶部： 1em

}

/*不建议：不必要的换行*/

#视频

{

页边距-顶部： 1em

}

/*推荐*/

#视频{

页边距-顶部： 1em

}

选择器分隔

每个选择器都另起一行。

/*不推荐*/

a:focus，a:active {

相对位置：top: 1px

}

/*推荐*/

h1，

h2，

h3 {

font-weight :正常；

线高： 1.2;

}

规则分隔

规则之间都用空行隔开。

html {

背景# fff

}

body {

margin:自动

宽度： 50%;

}

半铸钢钢性铸铁(铸造半钢)引号

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

/*不推荐*/

@导入URL('//www .谷歌。com/CSS/maia。CSS’)；

html {

font-family: 'open sans '，arial，sans-serif；

}

/*推荐*/

@导入URL(//www .谷歌。com/CSS/maia。CSS)；

html {

font-family: 'open sans '，arial，sans-serif；

}

半铸钢钢性铸铁(铸造半钢)元规则

分段注释

用注释把半铸钢钢性铸铁(铸造半钢)分成各个部分。

/*表头*/

#adw-header {}

/*页脚*/

# adw-页脚{}

/*画廊*/。adw-gallery {}