前言

在日常工作中，为了将我们的代码进行统一有效的管理以及方便阅读。因此，有必要对我们得编码进行规范性要求。

$文档声明

首行声明，统一使用html5标准，

<!DOCTYPE html>

Note： <！DOCTYPE html>作用请参考：Doctype

$meta标签

根据项目需求,对meta标签进行调整删减，参考cool-head

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Note： meta标签的作用：参考meta

$关键字与描述

描述一般不超过70字，关键字在5个以内

<meta name="description" content="sentence" /> 
<meta name="keywords" content="words.." />

$样式链接

<link rel="stylesheet" href="output/css/*.css"/>

$脚本链接

<script type="text/javascript" src="output/js/*.js"><script> 

// 统计代码的位置在离 <head/> 最近的位置 
<script type="text/javascript"> 
//Google Baidu 
</script>

$书写规范

  • 1.缩进使用4个空格(1个soft tab)
  • 2.嵌套的节点必须缩进
  • 3.文档中尽量不要使用&nbsp；,使用id进行缩进控制
  • 4.在文档属性中使用双引号，不要使用单引号
  • 5.为<img/>标签加上alt属性
  • 6.为<label/>标签加上for属性
  • 7.文档中，不同的id只允许出现一次
  • 8.如果当前页面有动态数字或文字时，为其包裹上一个标签
  • 9.标签有需要应用的数据时，为其添加data-*前缀的属性
  • 10.当页面有需要使用到html特殊字符时，用转义符输出

$标签使用规范

  • < form/>标签的使用 使用异步方式提交数据时,避免存在无用的< form/>标签。
  • < h1/>标签的使用 文档中只可能出现一次h1标签。
  • < img/>标签的使用以及css背景设置 img标签使用环境：如用户头像，用户上传图片等具有上下文意义的图片， 其他情况，一律使用背景图片进行设置。
  • < label/>标签的使用 label标签应该和input配合使用，并且应该添加for属性进行指定。
  • 行内元素与块级元素 内联元素不允许包含块级元素，不允许存在空的table,ul,ol标签，p标签不允许包含任何块级元素。

$注释规范

在模块的前后声明注释

<!-- module start --> 
<div class="mod mod-name">
     ...... 
</div> 
<!-- module end --> 
<!-- header start --> 
<div class="header"> 
    ...... 
</div> 
<!-- header end -->