文档介绍：WEB前端开发规范
HTML部分
遵循xhtml ：
所有标签必须结束
所有标签必须小写
标签属性必须使用成对引号（单引号或双引号）
标签属性必须有值：
<select>
<option selected="selected"></option>
</select>
<input type="checkbox" checked="checked" />
所有特殊符号必须转义（&、<、>、©、»…）
文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset="utf-8" />, 书写时利用IDE实现层次分明的缩进;
2. 非特殊情况下样式文件必须外链至<head>...</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;
标签属性命名规范
id：连接符命名法“hello-world”
class: 连接符命名法“hello-world”
name：驼峰式命名法“helloWorld”
用于结构布局的元素id命名：
主容器： main
页头： header
页脚： footer
内容区域： content
LOGO： logo
主导航： main-nav
二级导航： sub-nav
name命名：
一般用于表单元素，根据当前元素id属性值命名，去掉id属性值的前缀和所有连接符，使用驼峰式命名法命名，例如id=”id-card”，那么name=”idCard”。
合理使用标签，语义化结构
标签合理嵌套
span、strong、em、p、h1~h6等行级元素不能包含块级元素：div、ul、ol、dl、p
尽可能减少div嵌套, 如<div class="box"><div class="welcome">欢迎访问XXX, 您的用户名是<div class="name">用户名</div></div></div>完全可以用以下代码替代: <div class="box"><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;
严禁多div症、多span症、多table症，正确使用标签表现DOM结构，在文档去除css的情况下，任然具有结构和可读性，以下是html标记的使用规范：
p：文本段落；
dl：定义列表，可包括标题和内容简介的列表；
ul：无序列表；
ol：有序列表；
h1~h6：文章标题、内容区块标题，根据重要性由大到小区分，h1一个页面只出现一次；
strong/em：强调文本；
img：图像，必须加上alt属性，当图像无法显示时，可表示图像信息，背景和按钮使用css处理，不使用img元素；
table：数据网格，规则的分栏布局，尽可能显性的定宽和定高。
充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以"data-"为前缀来添加自定义属性，避免使用"data:"等其他命名方式;
书写链接地址时, 必须避免重定向，例如：href="/", 即须在URL地址后面加上“/”；
合理化表单结构
使用fieldset元素包裹相同类别的字段；
使用legend元素表示字段类别名称；
使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点；
文本框不使用size属性定义宽度，而使用css的width属性；
添加maxlength属性限制输入字符的长度。（<input type="password" id="password1" maxLength="8" />
允许输入密码8位数）
CSS部分
Css 命名规则
样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a-z）、数字（0-9）、下划线（-）组成;
可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用 …red,blue,left,right之类的（如颜色、字号大小等）矢量命名，如class=”left-news”、class=”2” ，以避免当状态改变时名称失去意义;
尽量用单个单词简单描述class名称;
双单词或多单词组合方式：形容词-名词、命名空间-名次、命名空间-形容词-名词。例如：news-list、mod-feeds、mod-my-feeds、cell-ti