小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

HTML规范

代码规范

1、HTML文件必须加上DOCTYPE声明，并统一使用HTML5的文档声明

<!DOCTYPE html>

2、页面语言lang

<html lang="zh-CN">

推荐使用zh-CN(中国大陆)，浏览器和操作系统的兼容性好；同时可以避免浏览器的自动翻译功能

3、编码方式

<meta charset="UTF-8">

尽量统⼀写成标准的 UTF-8 , 不要写成 utf-8 或者 UTF8

4、元素及标签闭合

所有具有开始标签和结束标签的元素都要写上起⽌标签，某些允许省略开始标签和结束标签的元素也都要写上；
空标签都加 / 字符

<!-- 不推荐 -->
<section>
	<p>这是⼀个段落。
	<p>这是⼀个段落。
	<img src="a.jpg">
</section>

<!-- 推荐 -->
<section>
	<p>这是⼀个段落。</p>
	<p>这是⼀个段落。</p>
	<img src="a.jpg" />
</section>

5、书写风格

HTML标签名、类名、标签属性和⼤部分属性值统一用小写

<!-- 不推荐 -->
<div class="DEMO"></div>

<DIV CLASS="DEMO"></DIV>

<!-- 推荐 -->
<div class="demo"></div>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

类型属性，不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含

<!-- 不推荐 -->
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>

<!-- 推荐 -->
<link rel="stylesheet" href="" >
<script src=""></script>

元素属性
元素属性值使用双引号语法
元素属性值可以写上的都写上

<!-- 不推荐 -->
<input type=text>
<input type='text'>
<input type="radio" name="name" checked >

<!-- 推荐 -->
<input type="text">
<input type="radio" name="name" checked="checked" >

特殊字符在 HTML 中不能使⽤⼩于号 “<” 和⼤于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使⽤字符实体

<!-- 不推荐 -->
<a href="#">more>></a>

<!-- 推荐 -->
<a href="#">more&gt;&gt;</a>

纯数字输入框使⽤ type="tel" ⽽不是 type="number"

<!-- 推荐 -->
<input type="tel">

代码嵌套每个块状元素独⽴⼀⾏，内敛元素可选

<!-- 不推荐 -->
<div>
   <h1></h1><p></p>
</div>

<!-- 推荐 -->
<div>
	<h1></h1>
	<p></p>
</div>
<p><span></span><span></span></p>

段落元素与标题元素只能嵌套内联元素

<!-- 不推荐 -->
<h1><div></div></h1>
<p><div></div><div></div></p>

<!-- 推荐 -->
<h1><span></span></h1>
<p><span></span><span></span></p>

注释规范

1、单行注释

<!-- Comment Text -->

2、模块注释

一般用于描述模块的名称以及模块开始与结束的位置模块与模块之间相隔一行

<!-- S Comment Text A -->
<div class="mod_a">
 ...
</div>
<!-- E Comment Text A -->

<!-- S Comment Text B -->
<div class="mod_b">
 ...
</div>
<!-- E Comment Text B -->

图片规范

1、HTML 中图⽚引⼊不需添加 width、height 属性，alt 属性应该写上

<!-- 不推荐 -->
<img src="" width="" height="" >

<!-- 推荐 -->
<img src="" alt="" >

2、CSS 中图⽚引⼊不需要引号

.jdc {
 background-image: url(icon.png);
}

3、CSS Sprites使⽤建议

适合使⽤频率⾼更新频率低的⼩图标尽量不留太多的空⽩体积较⼤的图⽚不合并确保要合并的⼩图坐标数值和合并后的 Sprites 图尺⼨均为偶数

4、base64 使⽤建议

适合更新频率⾼的⼩图⽚，如某些具备⾃定义功能的标题icon等转换成 Base64 编码的图⽚应⼩于 2KB 移动端不使⽤ Base64 编码要兼容 IE6/IE7 的不使⽤

前端开发规范（一）——HTML & 图片规范

HTML规范

代码规范

注释规范

图片规范