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.函数返回的数据应该统一类型。