https://google.github.io/styleguide/htmlcssguide.xml
协议 Protocol
不要写http或者https
<!-- 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);
}
格式 Formatting
缩进
用两个空格缩减 不用TAB
<ul>
<li>Fantastic
<li>Great
</ul>
.example {
color: blue;
}
字母
只用小写,包括16进制
<!-- 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
Meta
编码
用UTF-8(no BOM)
也就是写
<meta charset="utf-8">
注释
想写就写
Action Item
想写就写
HTML
Document Type
用HTML5
也就是
<!DOCTYPE html>
这个打头
不要闭合空元素
i.e.
写 <br>, 不写 <br />
HTML合法性
https://validator.w3.org/nu/
用这个来检验
语义化
尽可能的语义化
<!-- Not recommended -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- Recommended -->
<a href="recommendations/">All recommendations</a>
富媒体替代
用alt,为盲人提供方面
<!-- Not recommended -->
<img src="spreadsheet.png">
<!-- Recommended -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
Separation of Concerns
HTML CSS JS分开来
Entity References
就用实体,不要转义
可选技巧
可选的元素
不用可选的元素
https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission
类型熟悉
不加
<!-- 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>
HTML Formatting Rules
General Formatting
在块,列表,表格元素换行
<blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Moe
<li>Larry
<li>Curly
</ul>
<table>
<thead>
<tr>
<th scope="col">Income
<th scope="col">Taxes
<tbody>
<tr>
<td>$ 5.00
<td>$ 4.50
</table>
引号
用双引号,对应的JS用单引号
<!-- Not recommended -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- Recommended -->
<a class="maia-button maia-button-secondary">Sign in</a>