WEB前端规范（一）--HTML规范

保持良好的编程习惯，遵守代码规范，是每一个coder的必修课。至此WEB前端规范（一）就开始了。

文件名

1 所有的文件名都应该遵守相同的命名规范。

2 文件名以小写字母开头，避免数字开头

3 文件名最好全部是小写字母，如果分为几个部分，就以“-”分割开。

4 如果某些部分是作为一个文件的扩展名，则使用“.”进行连接。例:my-validate.min.js 。

不推荐：

MyScript.js
myCamelCaseName.css
i_love_underscores.html
1001-scripts.js
my-file-min.css

推荐：

my-script.js
my-camel-case-name.css
i-love-underscores.html
thousand-and-one-scripts.js
my-file.min.css

链接名我们一般忽略不写协议（http: https:）对于图片链接，a标签，或者其他媒体元素。当然如果如果不是这两种协议，需要写上。

不推荐：

.example {
  background: url(http://static.example.com/images/bg.jpg);
}

<script src="http://cdn.com/foundation.min.js"></script>

推荐：

.example {
  background: url(//static.example.com/images/bg.jpg);
}

<script src="//cdn.com/foundation.min.js"></script>

注释：

注释一定要写清楚代码的意图，这样写的原因等等，而不是简单的几个标识，最后自己都不知道是什么意思

不推荐：

var offset = 0;

if(includeLabels) {
  // Add offset of 20
  offset = 20;
}

推荐：

var offset = 0;

if(includeLabels) {
  // If the labels are included we need to have a minimum offset of 20 pixels
  // We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1
  offset = 20;
}

HTML规范正式部分

使用HTML5的文本类型申明.<!DOCTYPE html>

不要将没有内容的标签闭合，如<br>而不是<br />。

使用有效的正确的HTML元素

不推荐：

<title>Test</title>
<article>This is only a test.

推荐：

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

脚本加载：

一般将脚本文件放在body的底部，除了一些现代浏览器。

现代浏览器允许：

<html>
  <head>
    <link rel="stylesheet" href="main.css">
    <script src="main.js" async></script>
  </head>
  <body>
    <!-- body goes here -->
  </body>
</html>

所有浏览器：

<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <!-- body goes here -->

    <script src="main.js" async></script>
  </body>
</html>

提倡使用语义化标签

不推荐：

推荐：

　　　　 <header>头部</header>
        <article>正文</article>
        <footer>尾部</footer>

多媒体文件加载失败的补充显示。

不推荐：

<img src="luke-skywalker.jpg">

推荐：

<img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">

不要使用超过两个样式表

不要使用超过两个脚本文件（学会脚本合并）

不要使用内联样式 <style>.no-good {}</style>

不要使用内部样式 <hr style="border-top: 5px solid black">

不使用行内脚本（<script>alert('no good')</script>）

不要让非内容信息污染了你的 HTML，打乱了HTML结构。而是使用before:伪类元素

不推荐：

<!-- We should not introduce an additional element just to solve a design problem  -->
<span class="text-box">
  <span class="square"></span>
  See the square next to me?
</span>

.text-box > .square {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

推荐：

<!-- That's clean markup! -->
<span class="text-box">
  See the square next to me?
</span>

// We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content
.text-box:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

type属性

不推荐：

<link rel="stylesheet" href="main.css" type="text/css">
<script src="main.js" type="text/javascript"></script>

推荐：

<link rel="stylesheet" href="main.css">
<script src="main.js"></script>

格式化规则

在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格要另起一行。

（如果由于换行的空格引发了不可预计的问题，那将所有元素并入一行也是可以接受的，格式警告总好过错误警告）。

推荐：

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>

<ul>
  <li>Moe</li>
  <li>Larry</li>
  <li>Curly</li>
</ul>

<table>
  <thead>
    <tr>
      <th scope="col">Income</th>
      <th scope="col">Taxes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$ 5.00</td>
      <td>$ 4.50</td>
    </tr>
  </tbody>
</table>

使用双引号

不推荐：

<div class='news-article'></div>

推荐：

<div class="news-article"></div>

至此HTML部分的规范已经写完了，当然不同公司有不同的规范，具体情况具体分析。

原文地址：https://github.com/gionkunz/chartist-js/blob/develop/CODINGSTYLE.md

NEC规范：http://nec.netease.com/standard

posted @ 2016-03-12 16:37 DJL箫氏阅读(772) 评论(0) 编辑收藏举报

刷新页面返回顶部

DJL箫氏

WEB前端规范（一）--HTML规范

公告