html页面原则：
1.保证代码规范，结构表现行为相互分离，有一套html规范。
2.保证代码的最简化，避免多余的空格、空行，保持代码的语义化，尽量使用具有语义的元素，避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。
3.按照标准，但是不能违背实用性。
4.开发同一个项目时，共用一套代码规范，这样就像是一个人写的
页面规范：
1.缩进与换行：使用4个空格作为一个缩进层级，不允许使用两个或tab字符；
2.命名：
a.使用驼峰命名
b.使用单词拼接（单词字母小写）中间以-分隔 ，命名必须代表相应模块或者内容功能，id必须是页面唯一的，在能描述清楚的前提下尽可能短，在同一个项目中命名风格必须保持一致；
3.标签的使用：
a.标签名必须小写字母，对于不需要自闭合的标签，不要自闭合（input ，br ，img ，hr），
b.标签允许省略的闭合标签，不能省略闭合标签;
c.标签使用必须符合标签嵌套规则；（如：tbody必须放在table中）；
d.标签使用遵守标签的语义：
p -- 段落
h1， h2，h3，h4，h5，h6 -- 层级标题
strong ，em -- 强调
ins -- 插入
del -- 删除
abbr -- 缩写
code -- 代码标识
cite -- 引述来源作品的标题
blockquote -- 一篇和长篇应用
ul li -- 无序列表
ou li -- 有序列表
dl dt dd -- 定义列表
e.在用css能实现的情况下不要用table来进行布局
4.使用 HTML5的doctype来启用标准模式，建议使用大写的DOCTYPE;
5.meta标签的应用：
<!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!-- 页面描述 --> <meta name="description" content="不超过150个字符"/> <!-- 页面关键词 --> <meta name="keywords" content=""/> <!-- 网页作者 --> <meta name="author" content="guo,[email protected]"/> <!-- 搜索引擎抓取 --> <meta name="robots" content="index,follow"/> <!-- 为移动设备添加 viewport --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densityDpi=medium-dpi, minimal-ui" /> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --> <!-- iOS 设备 begin --> <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） --> <meta name="apple-mobile-web-app-capable" content="yes"/> <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 --> <!--meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" --> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <!-- 设置苹果工具栏颜色 --> <meta name="format-detection" content="telphone=no, email=no"/> <!-- 忽略页面中的数字识别为电话，忽略email识别 --> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 不让百度转码 --> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no">
6.有文本标题的控件必须使用label标签将其与其标题相关联
<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label> <label for="username">用户名：</label> <input type="textbox" name="username" id="username">
7.使用button input元素时必须指明type的属性值；
8.尽量不要使用按钮元素的name属性，由于浏览器兼容性问题，使用按钮的 name 属性会带来许多难以发现的问题。
css的规范：
1.全局：common.css 或 global.css 全站共用的，页面基础的，必须包含的就放入这里；
2.模块：module.css 项目功能模块多，可以放开放入便以以后维护；
3.主题：themes.css 或 index.css
4.命名规范：
头：header 内容：content/containe
尾：footer 导航：nav
侧栏：sidebar 栏目：column
登录条：loginbar 页面外围控制整体布局宽度：wrapper
左右中：left right center 标志：logo
广告：banner 页面主体：main
热点：hot 新闻：news
下载：download 子导航：subnav
菜单：menu 子菜单：submenu
搜索：search 友情链接：friendlink
页脚：footer 版权：copyright
滚动：scroll 内容：content
标签页：tab 文章列表：list
提示信息：msg 小技巧：tips
栏目标题：title 加入：joinus
指南：guild 服务：service
注册：regsiter 状态：status
投票：vote 合作伙伴：partner
功能命名：
标志：logo 广告：banner
登陆：login 登录条：loginbar
注册：regsiter 搜索：search
功能区：shop 标题：title
加入：joinus 状态：status
按钮：btn 滚动：scroll
标签页：tab 文章列表：list
提示信息：msg 当前的: current
小技巧：tips 图标: icon
注释：note 指南：guild
服务：service 热点：hot
新闻：news 下载：download
投票：vote 合作伙伴：partner
友情链接：link
js的规范
1.代码缩进
代码缩进为四个空格，不要使用tab缩进（不同浏览器中tab缩进没有一个长短的标准）。
2.注释
记得写注释，给以后需要理解你的代码的人们（自己）留下信息是非常有用的，注释要清晰明了。
3.变量的申明
所有的变量必须在使用前申明，让程序容易阅读，一般将var放在函数的首部；
4.变量，函数，类命名规范
使用有意义的命名，清晰易懂
5.函数返回的数据应该统一类型。