前端代码规范

前端代码规范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。。。。

合理使用标签

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

严禁多div，多span

标签属性命名规范

id和class的名称一律小写，必须增加前缀fd—（公司统一要求），多个单单词以连字符“-”连接，如id：连接符命名法id="fd-hello-world"
name:采用驼峰命名法name="helloWorld"
对于作为js钩子的id和class命名规则以"js-"开头，后面加上原有的命名，在使用class的时候需要放在最前面，如：class="js-tab-01 fd-tab-01" （注意：钩子，不允许在css中定义任何文本的样式效果）~不太理解的一条。
id和class的命名基本能原则：内容优先，表现为辅。首先根据内容来命名。如：header，footer，nav

对于状态类名不需要增加"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>

常用状态名字，此类命名不需要增加前缀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>
<!--新闻列表模块-->

文档模板

此处省略。。。。。

代码检测

验证代码有效性

不全后续补充