前端代码指南(一) —— HTML

发表于 | 分类于

本文翻译自bendc的《Frontend Guidelines》，由于篇幅过长，这里我分成了三篇，分别为HTML、CSS、Javascript，主要介绍了HTML/CSS/Javascript的代码指南，文章中所提出的指南也并不绝对，一切从实际出发，大家可以根据自己所需来取舍。说实话，英语真的不好,请见谅，欢迎大家纠错，Thanks。

前端代码指南(一)
前端代码指南(二)
前端代码指南(三)

语义化

HTML5为我们提供了大量的语义化标签使我们可以准确地描述内容，所以请使用这些语义化标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 糟糕的 -->
<div id="main">
  <div class="article">
    <div class="header">
      <h1>Blog post</h1>
      <p>Published: <span>21st Feb, 2015</span></p>
    </div>
    <p>…</p>
  </div>
</div>
<!-- 推荐的-->
<main>
  <article>
    <header>
      <h1>Blog post</h1>
      <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
    </header>
    <p>…</p>
  </article>
</main>

但是请确保你了解你使用的语义化标签。如果错误地使用语义化标签还不如不用。

1
2
3
4
5
6
7
8
9
10
11
<!-- 糟糕的 -->
<h1>
  <figure>
    <img alt=Company src=logo.png>
  </figure>
</h1>
<!-- 推荐的 -->
<h1>
  <img alt=Company src=logo.png>
</h1>

简洁

保持代码简洁，忘记你XHTML的旧习惯。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- 糟糕的 -->
<!doctype html>
<html lang=en>
  <head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
    <title>Contact</title>
    <link rel=stylesheet href=style.css type=text/css />
  </head>
  <body>
    <h1>Contact me</h1>
    <label>
      Email address:
      <input type=email placeholder=you@email.com required=required />
    </label>
    <script src=main.js type=text/javascript></script>
  </body>
</html>
<!-- 推荐的 -->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Contact</title>
  <link rel=stylesheet href=style.css>
  <h1>Contact me</h1>
  <label>
    Email address:
    <input type=email placeholder=you@email.com required>
  </label>
  <script src=main.js></script>
</html>

可访问性

可访问性不是事后才解决的。你不需要成为一个WCAG专家才能提高你网站的可访问性,你可以通过修复一些小细节来实现,比如：

  • 学会正确使用alt属性;
  • 确保标记你的超链接和按钮(即让别人看到就明白那个地方是超链接或按钮)
  • 不要仅使用色彩来传达意思(主要考虑视力障碍者)
  • 显式地标记(label)字段(使用label标签)
1
2
3
4
5
<!-- 糟糕的 -->
<h1><img alt="Logo" src="logo.png"></h1>
<!-- 推荐的 -->
<h1><img alt="My Company, Inc." src="logo.png"></h1>

语言

虽然声明语言和字符编码是可选的,但是强烈建议在文档内声明(即使他们已经在HTTP头内指定)。编码格式建议优先考虑utf-8。

1
2
3
4
5
6
7
8
9
10
<!-- 糟糕的 -->
<!doctype html>
<title>Hello, world.</title>
<!-- 推荐的 -->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Hello, world.</title>
</html>

性能

除非某个脚本必须在内容之前加载,否则不要让js阻止页面的呈现。如果你的css文件很大，请将这个css文件分离为俩个css文件(需要首先加载的和可延迟加载的)。俩个http请求虽然比一个慢得多，但是”感官上的速度”才是最重要的因素。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 糟糕的 -->
<!doctype html>
<meta charset=utf-8>
<script src=analytics.js></script>
<title>Hello, world.</title>
<p>...</p>
<!-- 推荐的 -->
<!doctype html>
<meta charset=utf-8>
<title>Hello, world.</title>
<p>...</p>
<script src=analytics.js></script>