Google HTML Style Guide

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

yaoyuan-yy

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

阅读量479

点赞数

本文链接：https://blog.csdn.net/YYecust/article/details/52249142

版权

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>

yaoyuan-yy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google HTML Style Guide

https://google.github.io/styleguide/htmlcssguide.xml协议 Protocol不要写http或者https<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
复制链接

扫一扫