在读了些的前端规范后，觉得有必要自我做下笔记。毕竟大神的代码简洁优雅，高效都有一定的规范化在里面的。以下选取了自认为有用的规范。
一、基本
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代码规范指南
