前端代码规范

前端代码规范html

黄金定律

语法

• 用四个空格代替tab
• 嵌套元素应当缩进四个空格
• 属性的定义要加双引号
• 不要在自闭合标签里加 /

兼容模式

<meta http-equiv='X-UA-Compatible' content='IE=edge，chrome=1'>

引入css和js文件

• H5项目不用写type

属性顺序

• class
• id，name
• data-
• src，for，type，href，value，mac-length，，，，，

布尔属性

• checked，seclected等不用写true

语义化标签

• nav
• header
• section。。。。

合理使用标签

1. 内联元素不能嵌套块级元素
2. li用于ul或ol下
3. dd，dt用于dl下
4. thead，tbody，tfoot,tr,td,用于table下
5. a标签里不可以嵌套交互式元素a，button。select等
6. ，p，h1-h6不可以嵌套块级元素div，h1-h6，p，ul，ol。li

严禁多div，多span

标签属性命名规范

1. id和class的名称一律小写，必须增加前缀fd—（公司统一要求），多个单单词以连字符“-”连接，如id：连接符命名法id="fd-hello-world"

2. name:采用驼峰命名法name="helloWorld"

3. 对于作为js钩子的id和class命名规则以"js-"开头，后面加上原有的命名，在使用class的时候需要放在最前面，如：class="js-tab-01 fd-tab-01" （注意：钩子，不允许在css中定义任何文本的样式效果）~不太理解的一条。

4. id和class的命名基本能原则：内容优先，表现为辅。首先根据内容来命名。如：header，footer，nav

5. 对于状态类名不需要增加"fd-"前缀，但是不允许单独写css样式，必须和其他非状态类的类名一块使用

     <ul >
           <li class="fd-item active">选中</li>
           <li  class="fd-item">未选中</li>
       </ul>
       <style>
               ul .fd-item{
               color: red;
           }
           	ul .fd-item.active{
               color: green;
           }
       </style>
   

6. 常用状态名字，此类命名不需要增加前缀fd-.以下就disable可单独使用，其他禁止单独使用

   • hover 划过时

   • visited 访问过后

   • waring 警告

   • default 默认

   • current 当前的

   • selected 选中的

   • disabled 禁用的

   • focus 获得焦点

   • blur 失去焦点

   • success 成功

   • checked 选中（checkbox）

   • error 出错

   • active 激活

禁忌

  1. 结构层，行为层，表现层，分离这是基本原则，页面中不允许出现css内容（包括行内样式和style）
  2. js必须放到body结束标签前，禁止放到head标签里面
  3. 尽量不要用 `<br>`来换行
  4. 原则上img禁止来人为干预图片显示的尺寸，尽可能发挥浏览器自身的功能
  5. 不同语种之间加半角空格
  6. 严禁使用`<font size=?>`标识，已经废弃了

按模块添加注释

在每个模块开始和结束的地方添加注释

<!--新闻列表模块-->
	<div class='news'>
	...
	</div>
<!--新闻列表模块-->

文档模板

此处省略。。。。。

代码检测

验证代码有效性

不全后续补充