代码规范

1.<!DOCTYPE html> 统一使用HTML5的文档声明

　　推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值

　　<!DOCTYPE html>

　　页面语言LANG

　　推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值

　　团队约定

　　　　一般情况下统一使用 “UTF-8” 编码

　　　　由于历史原因，有些业务可能会使用 “GBK” 编码

　　请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”

元素及标签闭合

　HTML元素共有以下5种：

空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
原始文本元素：script、style
RCDATA元素：textarea、title
外来元素：来自MathML命名空间和SVG命名空间的元素。
常规元素：其他HTML允许的元素都称为常规元素。

为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：

所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。
空元素标签都不加 “/” 字符

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

　　HTML文本、CDATA、JavaScript、meta标签某些属性等内容可大小写混合

　　类型属性

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

　　元素属性

　　元素属性值使用双引号语法

　　元素属性值可以写上的都写上

　　代码缩进

　　统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

　　纯数字输入框

　　使用 type="tel" 而不是 type="number"

　　代码嵌套

　　元素嵌套规范，每个块状元素独立一行，内联元素可选

　　<div>

　　　　<p></p>

　　</div>

2.文件模板

　　HTML5 标准模板

　　移动端

　　PC端

3. WebApp Meta

　　Viewport Meta Tag

　　为 webapp 设置状态栏样式

　　format-detection

　　自动识别页面中有可能是电话格式的数字

4.图片格式规范　

　图片引入

　　HTML 中图片引入不需添加 width、height 属性，alt 属性应该写上

　　CSS 中图片引入不需要引号　　

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

　　CSS Sprites VS Data URIs　

CSS Sprites 使用建议

适合使用频率高更新频率低的小图标
尽量不留太多的空白
体积较大的图片不合并
确保要合并的小图坐标数值和合并后的 Sprites 图尺寸均为偶数

Data URIs（base64编码）使用建议

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

posted on 2016-07-06 19:22 Befacebook 阅读(356) 评论(0) 收藏举报