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,1057540638@qq.com"/> <!-- 搜索引擎抓取 --> <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.函数返回的数据应该统一类型。
相关推荐
在B/S开发模式中,Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写。每个团队都有自己的风格和规范,此文仅作参考,并非权威。
javascript编码规范、HTML编码规范、CSS编码规范
适用于公司的前端开发人员的规范,可以作为公司的前端开发人员的编码约束准则,同时对于所有前端开发人员是一份学习的文档,当前公司用的就是这份文档,我们所有开发人员入职的时候必须阅读的这一份文档,
Web 前端开发代码规范介绍,包括html,javascript,css 的代码规范。适用于团队开发。
web前端开发的规范文档,适合三四个人的开发规范。
Web前端开发规范手册 提高团队协作效率 便于前端开发以及后期优化维护 方便新进的成员快速上手 输出高质量的代码
前端编码规范
WEB前端编码规范_计算机软件及应用_IT/计算机_专业资料。web前端代码编写规范,主要包括CSS、HTML和JS的编写要求和基本规范
前端代码规范总结(3篇),包括HTML、CSS、JAVASCRIPT等代码规范的总结心得!
web前端开发规范,内含前端代码编写规范等内容,有需要的下载
web前端命名规范,可以很好的控制后期代码的更改,或者是项目移交,以及后期项目的维护
前端 编码规范 , JS , CSS , HTML
如果一段特定的代码不符合规范的话,它有可能只是代码风格错误,而也有可能会是bug。早期指定规范就使得代码审核得以更好的开展,并且可以更精确的地定位到错误。只要开发者们能够保证源代码源文件都严格遵循规范,...
阿里巴巴前端开发规范.docx
WEB前端开发规范文档 基本准则 符合web标准,语义化html, 结构、表现、行为分离, 兼容性优良。 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。
有常用的标签命名规范,和项目结构设计规则,文件命名规则,css 书写规范,html书写规范,这是在网上找到的,来源已经忘了,不过看着十分不错,对于写出规范的代码帮助很大
html+js+css, 编写高质量代码-web...为编写易于维护的Web 前端代码打下坚实的基础。这不是一本单纯的“技术”书籍,没有系统地 讲解Web 前端开发的基础知识,它更专注于“技巧”,探索如何为“技术”提供最佳“技巧”。
前端开发基本准则:符合web标准,语义化HTML,结构表现行为分离,兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证解析速度。
WEB前端开发规范, 帮助你规范化自己的代码,特别适合初、中层次的前端攻城师