WEB前端规范--HTML规范
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
提倡使用语义化标签
不推荐：
<div class="head">头部</div>
<div class="body">body</div>
<div class="foot">尾部</div>
推荐：
<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
以上是关于WEB前端规范--HTML规范的主要内容，如果未能解决你的问题，请参考以下文章