谷歌 HTML/CSS 规范

相关文章推荐

纯真的芒果 · VS2019找不到Afxwin.h文件 - ...· 1 年前 ·

瘦瘦的棒棒糖 · 使用Python实现屏幕截图的两种方法_py ...· 1 年前 ·

大鼻子的水龙头 · .NET Core 和 ASP.NET ...· 2 年前 ·

威武的茶叶 · 树莓派为什么检测不到 I2C 模块地址？ - 知乎· 2 年前 ·

爱运动的小狗 · TaskExtensions Class ...· 2 年前 ·

<!-- Not recommended -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

/* Not recommended */
.example {
  background: url("https://www.google.com/images/example");
}

/* Recommended */
.example {
  background: url("//www.google.com/images/example");
}

<ul>
  <li>Fantastic
  <li>Great
</ul>

.example {
  color: blue;
}

<!-- Not recommended -->
<A HREF="/">Home</A>

<!-- Recommended -->
<img src="google.png" alt="Google">

/* Not recommended */
color: #E5E5E5;

/* Recommended */
color: #e5e5e5;

<!-- Not recommended -->
<p>What?_

<!-- Recommended -->
<p>Yes please.

<!-- TODO: remove optional tags -->
  <li>Apples</li>
  <li>Oranges</li>
</ul>

<!-- Not recommended -->
<title>Test</title>
<article>This is only a test.

<!-- Recommended -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

<!-- Not recommended -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- Recommended -->
<a href="recommendations/">All recommendations</a>

<!-- Not recommended -->
<img src="spreadsheet.png">

<!-- Recommended -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

<!-- Not recommended -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.

<!-- Recommended -->
The currency symbol for the Euro is “€”.

<!-- Not recommended -->
<link rel="stylesheet" href="//www.google.com/css/maia.css"
  type="text/css">

<!-- Recommended -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">

<!-- Not recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
  type="text/javascript"></script>

<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- Not recommended -->
<a class='maia-button maia-button-secondary'>Sign in</a>

<!-- Recommended -->
<a class="maia-button maia-button-secondary">Sign in</a>

/* Not recommended: meaningless */
#yee-1901 {}
/* Not recommended: presentational */
.button-green {}
.clear {}

/* Recommended: specific */
#gallery {}
#login {}
.video {}
/* Recommended: generic */
.aux {}
.alt {}

/* Not recommended */
#navigation {}
.atr {}

/* Recommended */
#nav {}
.author {}

/* Not recommended */
ul#example {}
div.error {}

/* Recommended */
#example {}
.error {}

/* Not recommended */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* Recommended */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

margin: 0;
padding: 0;

font-size: .8em;

/* Not recommended */
color: #eebbcc;

/* Recommended */
color: #ebc;

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
.error_status {}

/* Recommended */
#video-id {}
.ads-sample {}

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

@media screen, projection {
  html {
    background: #fff;
    color: #444;
}

/* Not recommended */
.test {
  display: block;
  height: 100px
}

/* Recommended */
.test {
  display: block;
  height: 100px;
}

/* Not recommended */
  font-weight:bold;
}

/* Recommended */
  font-weight: bold;
}

/* Not recommended: missing space */
#video{
  margin-top: 1em;
/* Not recommended: unnecessary line break */
#video
  margin-top: 1em;
}

/* Recommended */
#video {
  margin-top: 1em;
}

/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}

/* Recommended */
  font-weight: normal;
  line-height: 1.2;
}

html {
  background: #fff;
body {
  margin: auto;
  width: 50%;
}

/* Not recommended */
@import url("//www.google.com/css/maia.css");
html {
  font-family: "open sans", arial, sans-serif;
}

/* Recommended */
@import url(//www.google.com/css/maia.css);
html {
  font-family: 'open sans', arial, sans-serif;
}

/* Header */
#adw-header {}
/* Footer */
#adw-footer {}

用户1667431

谷歌 HTML/CSS 规范

通用样式规范

协议

通用格式规范

缩进

大小写

结尾空格

通用元规范

编码

注释

任务项

HTML 风格规范

文档类型

HTML 正确性

语义化

多媒体元素降级

关注分离

实体引用

type 属性

HTML 格式规范

HTML 引号

CSS 风格规范

ID 和 Class 命名

ID 和 Class 命名风格

选择器

属性简写

0 和单位

开头的 0

16进制表示法

前缀

ID 和 Class 命名分隔符

CSS 格式规范

书写顺序

块级内容缩进

声明结束

属性名结尾

声明样式块的分隔

选择器分隔

规则分隔

CSS 引号

CSS 元规则

分段注释