html编码规范
原文地址https://ouvens.github.io/frontend-resource/2015/11/15/html-css-code-style.html
1.HTML规范
1.1文档类型
- 统一使用HTML5的标准文档类型：<!doctypehtml>HTML5文档类型具备前后兼容的特质，并且易记易书写
- 在文档doctype申明之前，不允许加上任何非空字符任何出现在doctype申明之前的字符都将使得你的HTML文档进入非标准模式
- 不允许添加属性强制改变文档模式避免出现不可控的问题
1.2省略type属性
- 在调用CSS和JavaScript时，可以将type属性省略不写
<link type="text/css" rel="stylesheet" href="base.css"> <script type="text/javascript" src="base.js"></script>推荐：
<link rel="stylesheet" href="base.css"> <script src="base.js"></script>因为HTML5在引入CSS时，默认type值为text/css；在引入JavaScript时，默认type值为text/javascript
1.3用双引号包裹属性值
- 所有的标签属性值必须要用双引号包裹，同时也不允许有的用双引号，有的用单引号的情况
<a href=http://www.qunar.com class=home>首页</a>推荐：
<a href="http://www.qunar.com" class="home">首页</a>1.4 属性值省略
- 非必须属性值可以省略
<input type="text" readonly="readonly"> <input type="text" disabled="disabled">推荐：
<input type="text" readonly> <input type="text" disabled>
这里的readonly和disabled属性的值是非必须的，可以省略不写，我们知道HTML5表单元素新增了很多类似的属性，如:required
1.5 嵌套- 所有元素必须正确嵌套，不允许交叉，不允许inline元素包含block元素，不允许类似在ul下出现除了li外的其它子元素等等
<span> <h1>这是一个块级h1元素</h1> <p>这是一个块级p元素</p> </span> <ul> <h3>xx列表</h3> <li>asdasdsdasd</li> <li>asdasdsdasd</li> </ul>推荐：
<div>
<h1>这是一个块级h1元素</h1>
<p>这是一个块级p元素</p>
</div>
<div>
<h3>xx列表</h3>
<ul>
<li>asdasdsdasd</li>
<li>asdasdsdasd</li>
</ul>
</div> 规则可参考： http://www.cs.tut.fi/~jkorpela/html/strict.html由于某些现实原因，在HTML5中对a元素做了一些变更，a元素除了可以包含inline元素外，也将可以包含block元素了。
1.6 标签闭合- 非自闭合标记必须关闭
<div>balabala...推荐：
<div>balabala...</div>虽然有些标记没有要求必须关闭，但是为了避免出错的几率，要求必须全部关闭，省去判断某标记是否需要关闭的时间
- 自闭合标记无需关闭<base><br><col><embed><hr><img><input><link><meta><param>...
- 为img元素加上alt属性
<img src="banner.jpg">推荐：
<img src="banner.jpg" alt="520即将到来，爱就大声说出来">alt属性的内容为对该图片的简要描述，这对于盲人用户和图像损毁都非常有意义，即无障碍
对于纯粹的装饰性图片，alt属性值可以留空，如alt=""
1.8 使用label的for属性- 为表单元素label加上for属性
<label><input type="radio" name="color" value="0">蓝色</label> <label><input type="radio" name="color" value="1">粉色</label>推荐：
<label for="blue"><input type="radio" id="blue" name="color" value="0">蓝色</label> <label for="pink"><input type="radio" id="pink" name="color" value="1">粉色</label>for属性能让点击label标签的时候，同时focus到对应的 input 和 textarea上，增加响应区域1.9 按模块添加注释
- 在每个模块开始和结束的地方添加注释
<!-- comment --> 注释内容左右两边保留和注释符号有1个空格位 在注释内容内不允许再出现中划线“-”，某些浏览器会报错 <!-- 新闻列表模块 --> <div id="news" class="g-mod" ... <!-- /新闻列表模块 --> <!-- 排行榜模块 --> <div id="topic" class="g-mod" ... <!-- /排行榜模块 -->1.10 格式
- 将每个块元素、列表元素或表格元素都放在新行
- Inline元素视情况换行，以长度不超过编辑器一屏为宜
- 每个子元素都需要相对其父级缩进
<div><h1>asdas</h1><p>dff<em>asd</em>asda<span>sds</span>dasdasd</p></div>推荐：
<div> <h1>asdas</h1> <p>dff<em>asd</em>asda<span>sds</span>dasdasd</p> </div>
1.11语义化标签
1.在合适的场景选择语义合适的标签
2.禁止使用被废弃的用于表现的标签，如center,font等
3.部分在XHTML1中被废弃的标签,在HTML5中被重新赋予了新语义,选用时请先弄清其语义,如:b,i,u等
4.元素据标记:
head,title,base,link,meta,style
5.章节标签:
html,body,section,nav,article,aside,h1-h6,hgroup,header,footer,address
6.脚本标记:
script,noscript
7.分组内容标记:
p,hr,pre,blockquote,ol,ul,li,dl,dt,dd,figure,figcaption,div
8.文本标签:
a,em,strong,small,s,time,code,var,sub,sup,i,b,u,mark,span,br,del
9.媒体标签:
img,iframe,embed,object,param,video,audio,source,track,canvas,map,area
10.互动标签:
details,summary,command,menu
11.表单标签:
form,fieldset,legend,label,input,button,select,optgroup,option,textarea,progress
12.表格标签:
table,caption,colgroup,col,thead,tbody,tfoot,tr,td,th
13.参考文档：
http://www.w3.org/TR/html5/
http://dev.w3.org/html5/markup/elements.html
1.12文档模板
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>网站项目名称-网站名称</title> <link href="*.css" rel="stylesheet"> </head> <body> <div id=”doc”> <header id="hd"> 头部诸模块 </header > <div id="bd"> 主体部分诸模块 </div> <footer id="ft"> 底部诸模块 </footer> </div> <script src="*.js"></script> </body> </html>所有的项目页面都可以直接使用上述的标准文档模板，并根据实际情况做 “加法” ，诸如meta的description, keywords之类，其中#doc级别不是必须的，视情况加减
1.13模块模板
<section class="m-xxx g-mod"> <header class="m-xxx-hd"> 头部区域 </header> <div class="m-xxx-bd"> 模块正文 </div> <footer class="m-xxx-ft"> 底部区域 </footer> </section>所有的模块默认都是上面这种固有结构，特殊情况可视场景而变，换句话说，有的时候你的某个模块可能会是一个aside。