Google HTML Style Guide

最新推荐文章于 2022-02-07 23:55:49 发布

原创最新推荐文章于 2022-02-07 23:55:49 发布 · 541 阅读

0 ·

CC 4.0 BY-SA版权

本文档详细介绍了HTML和CSS的编码规范，包括协议使用、格式化标准、字母大小写规定、行尾空格处理、元信息设置、注释及行动项的编写建议等。此外还强调了HTML5文档类型的正确声明方式，以及语义化的重要性。

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

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>