web项目开发规范整理总结
一、类、函数、变量名命名:
1、定义类时,全部拼音的首字母必须大写;如Person,ClassDemo;(帕斯卡命名法);也可以用带下斜杆的匈牙利命名法进行命名,如 head_navigation。
2、在命名函数时,第一个单词的首字母小写,之后每个单词的首字母大写,如printInfo()方法;(驼峰命名法)
3、php的变量名的标识符:不能以数字开头,可以由英文字母、数字和下划线(_)组成,不能是保留关键字,区分大小写;但是内置结构和关键字以及用户自定义的类名和函数名都是不区分大小写的。
4、Javascript变量名称规则:变量对大小写敏感,区分大小写【y与Y是不同变量】;变量必须以字母或者下划线开头。
二、文件夹与文件名命名:
建立php程序文件名和目录名的命名均使用有意义的英文方式命名,不使用拼音或无意义的英文命名,同时必须均使用小写英文,多个词之间使用_链接。
系统结构:
三、安全规则:
1、对敏感数据的传输要采用https。
2、logs:确保对关键用户操作保存了完整的用户访问记录;
3、对内部使用或供合作者使用的产品, 要考虑增加访问控制;
4、严格的过滤和合法性验证:不推荐使用直接的$_POST和$_GET的方式进行获取参数,而是通过XXX_yiv的方式获取和过滤处理。(类似thinkPHP的I函数);
5、先声明再使用:php的代码要求先声明再使用,否则会出错。
四、html:
1、xhtml区分大小写,xhtml要求标签名、属性名、值都要小写,并且要有双引号和标签闭合。因为XHTML文档是XML应用产物,XML是区分大小写的,所以<br>和<BR>会被认为是两种不同的标签;
2、语义化:使用符合语义的标签书写 HTML 文档, 选择恰当的元素表达所需的含义;
- 结构性元素
p 表示段落. 只能包含内联元素, 不能包含块级元素;
li 本身无特殊含义, 可用于布局. 几乎可以包含任何元素;
br 表示换行符;
hr 表示水平分割线;
h1-h6 表示标题. 其中 h1 于表示当前页面最重要的内容的标题;
blockquote 表示引用, 可以包多个段落. 请勿纯粹为了缩进而使用blockquote, 大部分浏览器默认将 blockquote 渲染为带有左右缩进;
pre 表示一段格式化好的文本;
- 头部元素
title 每个页面必须有且仅有一个 title 元素;
base 可用场景:首页、频道等大部分链接都为新窗口打开的页面;
link用于引入 css 资源时, 可省去 media(默认为all) 和 type(默认为text/css) 属性;
style type 默认为 text/css, 可以省去;
script type 属性可以省去; 不赞成使用lang属性; 不要使用古老的<!– //–>这种hack脚本, 它用于阻止第一代浏览器(Netscape 1和Mosaic)将脚本显示成文字;
noscript 在用户代理不支持 JavaScript 的情况下提供说明;
- 文本元素
a 存在 href 属性时表示链接, 无 href 属性但有 name 属性表示锚点;
em,strong em 表示句意强调, 加与不加会引起语义变化, 可用于表示不同的心情或语调; strong 表示重要性强调, 可用于局部或全局, strong强调的是重要性, 不会改变句意;
abbr 表示缩写;
sub,sup 主要用于数学和化学公式, sup还可用于脚注;
span 本身无特殊含义;
ins,del 分别表示从文档中增加(插入)和删除;
- 媒体元素
img 请勿将img元素作为定位布局的工具, 不要用他显示空白图片; 必要时给img元素增加alt属性;
object 可以用来插入Flash;
- 列表元素
dl 表示关联列表, dd是对dt的解释; dt和dd的对应关系比较随意:一个dt对应多个dd、多个dt对应一个dd、多个dt对应多个dd, 都合法; 可用于名词/单词解释、日程列表、站点目录
ul 表示无序列表;
ol 表示有序列表, 可用于排行榜等;
li 表示列表项, 必须是ul/ol的子元素;
- 表单元素
推荐使用 button 代替 input, 但必须声明 type;
推荐使用 fieldset, legend 组织表单;
表单元素的 name 不能设定为 action, enctype, method, novalidate, target, submit 会导致表单提交混乱;
3、大小写,属性值:元素的标签名和属性值都必须为小写,属性值必须加双引号。
五、css:
1、缩进:使用一个tab(四个空格);
2、分号:每个属性声明末尾都要加分号;
3、空格:(1)不需要空格的情况:*属性名后;*多个规则的,前;*!important !后;*行末不要有多余的空格。
(2)需要空格的情况:*属性值前;*选择器>,+,~前后;*{ 前;*!important !前;*@else 前后;* 属性值中的,前;*注释/*后 */前;
4、空行:(1)、文件最后保留一个空行 (2)}最好跟一个空行;
5、换行:(1)不需要换行:{ 前;
(2)需要换行: *{后和}前 ; *每个属性独占一行;*多个规则的分割符,后;
6、注释:*统一用/**/; *缩进与下一行代码保持一致 ;*可位于一个代码的末尾,与代码间隔一个空格;
7、引号: *最外层统一使用双引号;*url要用双引号;*选择器中的属性值要用双引号;
8、命名:*css中的元素名称,id和类的命名也是区分大小写的 ; *类名用小写字母,以中划线-分割,匈牙利命名法;*id用驼峰命名法;
9、属性声明:相关的属性声明做分组处理,组与组之间空一行;
10、颜色:使用颜色16进制小写字母,且尽量简写 如 #666;
11、属性简写:属性简写需要你非常清楚属性值的正确顺序,而且在大多数情况下并不需要设置属性简写中包含的所有值,所以建议尽量分开声明会更加清晰;margin 和 padding 相反,需要使用简写;
12、另外项:不允许有空的规则;元素选择器要用小写;去掉小数点前面的0;属性值0后面不加单位;禁止滥用!important;无前缀的标准属性应写在有前缀的前面;尽量少使用*选择器;用border:0代替border:none。
六、图片规范
1、所有的元素类图片均放在images中;
2、命名全部用小写英文字母/数字/_的组合,其中不得包含汉字/空格/特殊字符;尽量使用易懂的词汇;
3、在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载时间;
4、运用css sprite 技术集中小的背景图或图标,减少页面http请求,但注意请务必在对应的sprite psd 源图中画参画参考线;
。。。。。。。
以后遇到一些要注意的地方会慢慢添加上。
web项目开发规范整理总结的更多相关文章
- Java Web 项目目录规范
一.项目结构 这里和其他项目区别不大,我将模板抽离出来,更容易分析和理解: 解释一下:js主要包括extends(引入第三方的js).module(项目模块自己的js).lib(引用包,这里也可以继续 ...
- WEB前端开发规范文档(转)
http://codeguide.bootcss.com/ 编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...
- 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- WEB前端开发规范文档[转]
为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...
- SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。
熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...
- amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- 转:Laravel 项目开发规范
文件介绍很好 值得细细看看 https://www.jianshu.com/p/e464a35e5ed2 https://learnku.com/docs/laravel-specification/ ...
- Web 前端开发规范手册
一.规范目的 Web 前端开发规范手册 1.1 概述 ......................................................................... ...
随机推荐
- AtomicBoolean运用
AtomicBoolean运用 首先先看如下例子 private static class BarWorker implements Runnable { private static boolean ...
- vmware中两台虚拟机互相访问
hosts文件 简单说,就是本来访问某个机器是通过其ip,在hosts文件中给ip对应一个名字,那么就可以通过名字来替代ip去访问该机器了(名字显然比ip好记) 环境:宿主机win10系统,安装了 ...
- jquery on 绑定事件
jquery on 绑定事件 1. 多个选择器绑定一个事件 2. 多个事件绑定一个函数 3. 一个选择器绑定多个事件,有两种写法: 或者 on只绑定一次事件,绑定父元素,防止初始化时数据未加载,绑定出 ...
- C++ 小工具一键解决SVN Clean Up 失败的问题
参考文章: 1.http://blog.csdn.net/luochao_tj/article/details/46358145 2.http://blog.csdn.net/segen_jaa/ar ...
- 鼠绘漫画 for wp8.1
技术规格总结: 这个APP 总体上是下载图片的一个APP 所以对图片的查看&控制上需要一定功力,至少有一个稳定的缩小,放大的图片控件. 搭载WP系统的手机,内存上大部分不是很大,所以内存的控制 ...
- 如何设置jvm内存
本文向大家简单介绍一下进行JVM内存设置几种方法,安装Java开发软件时,默认安装包含两个文件夹,一个JDK(Java开发工具箱),一个JRE(Java运行环境,内含JVM),其中JDK内另含一个JR ...
- eclipse配置项目
project facets -> dynamic web module 2.5 java -> 1.6 deployment assembly -> webapp Web Proj ...
- php7.0.12 laravel 链接sqlserver数据库
https://www.microsoft.com/en-us/download/details.aspx?id=20098 下载最后一个,然后这个工具可以将dll扩展下载下来,选择一个空白的文件夹就 ...
- redis 五种数据类型的使用场景
String 1.String 常用命令: 除了get.set.incr.decr mget等操作外,Redis还提供了下面一些操作: 获取字符串长度 往字符串append内容 设置和获取字符串的某一 ...
- 00Linux学习及角色定义
一.嵌入式Linux学习顺序 二.Linux架构 三.Linux工程师角色划分 四. 嵌入式应用工程师工作内容与所需知识点 从图 1可以知道, 嵌入式应用工程师主要从事与产品相关的嵌入式 Linux ...