在读了些的前端规范后，觉得有必要自我做下笔记。毕竟大神的代码简洁优雅，高效都有一定的规范化在里面的。以下选取了自认为有用的规范。

一、基本

1.关注点分离

基于前端的特殊性，一般要求结构（HTML）、样式（css）、行为（javascript）分离。
现在三大框架基本上都是这么做的，了解就好。

2.指定编码

在 HTML中指定编码 即添加

<meta charset="utf-8">

3.html标签一律用小写

<a href=""></a><!--推荐-->
<A HREF=""></A><!--不推荐-->

4.外连接省略协议

即

<a src="www.baidu.com"></a><!--推荐-->
<a src="https://www.baidu.com"></a><!--不推荐-->

注：其它协议（ftp 等）的 URL 不省略

二、html规范

1.对于标签

(1) 尽量用少的标签实现功能 ，原因：标签太多会导致你代码冗余，多写样式，js控制难度上升
(2) 可选闭合标签 。如div、li、ul 、p等标签

<div></div> <li></li> <!--推荐-->
<div>                        <!--不推荐-->

对于自闭和标签，如 img input hr br等
个人建议加上

<!--推荐-->
<img/> 
<input/>

原因：如果可选闭合标签不闭合的话，在大型项目中，易丢失标签，查找bug是十分耗时耗力的，并且在三大框架中这类标签不闭合会报错的。

2.class和id

(1)class 应以功能或内容命名，不以表现形式命名 如：布局时的方向

<div class="left-xxx top-xxx"></div><!--不推荐-->

（ps:当然这种命名十分简单，而且快捷，但一旦要从新布局将原有的布局打乱就显得很无所适从）
应该以功能或内容命名，如：这个div标签要包含一个导航栏

<div class="nav-bar"></div><!---推荐-->
<!--一旦英文单词过长可以只取单词的前几位-->

(2)class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔
(3)使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class

3.属性顺序

id>class>name>data-XXX>src,for,type,href>title、alt>aria-xxx、role

4.引号

属性定义，统一用双引号，即

<a href="www.baidu.com">

5嵌套

严格嵌套约束是在所有浏览器下必须的规范，否者报错，语义嵌套类似约定俗成

1.语义嵌套约束

• <li>用于<ul>或者<ol>下
• <dd>、<dt>用于<dl>下
• <thread>、<tbody>、<tfoot>、<tr>、<td>用于<table>下

2.严格嵌套约束

-inline-level元素，仅可包含文本以及其他inline-level元素
-<a>标签里不可以嵌套交互式元素如<a>、<botton>、<select>。原因嘛，我想是这样的，这种交互元素的触发事件采用的是冒泡机制。一旦多个嵌套，会导致一级一级的执行事件，使得事件重复执行，或者执行出错。
-<p>里不可以嵌套块级元素，如：<div>、<h1>-<h6>、<p>、<ul>、<ol>、<li>等

布尔值属性

html5中 disabled 、checked、selected等属性不用设置

<input type="text" disabled>

未完待续.........
参考:
W3Cschool前端开发规范
2018前端开发规范
Google HTML/CSS代码规范指南