WEB编码事项
标准
WEB开发标准是一系列标准的集合, 包含HTML结构标准、CSS表现标准、JS行为标准、代码标准、标准测试。
目标
WEB开发流程统一标准化,实现页面结构、表现、行为适当分离,提高页面易维护性,易拓展性。
遵循
- 结构标准:HTML5
- 表现标准:CSS2、CSS3(渐进增强)
- 行为标准:ECMAScript 262
- 代码标准:HTML编码规范、CSS编码规范、JS编码规范
- 标准测试:html validator、csslint、jshint
HTML编码规范
1. 使用标准文档DTD
<!DOCTYPE html>
2. 结构、样式、行为分离
- 内嵌样式移入到相应的样式文件中
- 内嵌脚本移入到相应的脚本文件中
- 除非需要动态修改元素样式,否则尽量别写内联样式
- 除非使用<a href="javascript:void();" ,否则尽量别写内联事件
- 样式文件使用link标签在head头部引入
- 脚本文件使用script标签在body结束标签前引入
3. 标签
- 标签名、属性名小写
- 属性值双引号括起来
- style、link的type属性没必要指定,默认为text/css
- script的type属性没必要指定,默认为text/javascript
- 空标签无自关闭斜线无结束标签,其它标签务必包含开始、结束标签
空标签: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
4. 缩进、换行
- 子元素相对于父元素缩进4个空格
- 块元素、列表元素、表格元素放在新行
5. 注释
按模块添加注释,解释清楚是什么。
<!--XX模块 START, 我是什么-->
<div class="module">
....
</div>
<!--XX模块 END -->
6. 代码有效性
使用html validator工具,检查代码。
CSS编码规范
1. id、class命名
- 名字小写
- 以破折号“-”进行分隔: .module-title
2. 样式属性、属性值
缩进四个空格, 尽量使用缩写
/* Don't */
.demo {
margin-top: 2px;
margin-right: 3px;
margin-bottom: 4px;
margin-left:;
} /* Better */
.demo {
margin: 2px 3px 4px 0;
}
属性名后紧跟“:”
属性值前有一空格,后面以“;”结束
属性值为0,不加单位
十六进制颜色值,尽量使用三个字符 #fff, 非#ffffff
url()中不使用引号
.demo {
backgound-image: url(/your/path/img);
}
3. 样式顺序
定位相关,盒模型相关,其它
.demo {
position: absolute;
top:;
left:; width: 50px;
height: 50px;
border: 1px solid #ddd; color: #fff;
}
4. 选择器
尽量不使用!important,权重最高
尽量不使用id选择器,权重比较高
尽量不使用元素标签名、id、class进行组合
/* Don't */
#header.title {
...
} /* Better */
.title {
...
}
样式针对多个选择器,每个选择器占一行
.btn,
.txt,
.hover {
....
}
5. Better CSS Hack
利用IE条件注释,在html标签的class里标识ie版本,但是尽量避免使用,且请新建一个hack.css专属文件存放hack样式。
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--><html> <!--<![endif]-->
.ie9 .demo{
...
}
.ie8 .demo{
...
}
.ie7 .demo{
...
}
.ie6 .demo{
...
}
6. Not Recommand CSS Hack
下面hack方法前提是浏览器标准模式
- “_″ 下划线是IE6专有的hack
- “+″ 下划线是IE6/IE7 生效
- “\9″ IE6/IE7/IE8/IE9/IE10 生效
- “\0″ IE8/IE9/IE10/Opera 生效
- “\9\0″ IE9/IE10 生效
这些hack方法,一般直接在原样式中混合使用,大量的hack方法,势必会造成css代码混乱,维护起来困难。
7. 注释
按模块编写注释,解释清楚做了什么
/*XX模块 START, 我做了什么*/
.module {
...
} .module .title {
...
} .module .content {
...
}
/*XX模块 END*/
8. 代码有效性
使用csslint工具,检查代码。
Javascript编码规范
1. 变量、函数
缩进四个空格
变量名、函数名使用驼峰式命名: subTitle
局部变量声明务必使用var
全局变量、枚举变量、常量全部大写,且注释注明
语句结束以“;”结尾
变量声明提前并集中
//我是做什么的
function createAudit(){ var startTime,
endTime,
auditType,
timeSpace,
progress = 0; ...
}
2. 异常处理
做异常处理,界面出错,给予用户友好提示
try{
//Do something
}catch(e){
//友好提示
}
3. eval()
只用于反序列化
4. 多行字符串
var myStr = 'blablablablablabla' +
'hlahlahlahlahlahlahla' +
'xlaxlaxlaxlaxlaxlaxla' +
'slaslaslaslaslaslasla';
5. 定义数组、对象
/*Don't*/
var arr = new Arr,
obj = new Object; /*Better*/
var arr = [],
obj = {};
6. 不修改内置对象方法、属性
不要尝试修改内置对象方法、属性,可以建立统一接口来维护公用函数。
/*Don't*/
String.prototype.newFunc = function(){ }
7. 字符串
使用单引号更好,html中使用双引号
8. 代码格式化
大括号
分号会被隐士插入到代码中,大括号和前面的代码放在同一行
if (boolean) {
//...
} else {
//...
}
数组、对象初始化
var arr = [
someVal,
anotherVal,
anotherVal,
anotherVal,
anotherVal //不要再这里加逗号,ie7,ie8会报错
]; var obj = {
someOpt: someVal,
anotherOpt: anotherVal,
anotherOpt: function () { } //不要再这里加逗号,ie7,ie8会报错
};
函数参数
尽可能将所有函数参数写在同一行,但为了保持可读性,一行超过80个字符可适当换行,甚至每个参数独立一行
very.very.very.very.lon.long.func = function (
someOpt, someOpt
anotherOpt) {
//....
} function foo (veryLongLongVariable,
veryLongLongVariable) {
//...
} function foo (
veryLongLongLongLongVariable,
veryLongLongLongLongVariable) {
//...
}
if条件,三元操作符
if (someLongLongLongVariable &&
anotherLongLongVariable) {
//...
} var y = a ?
someLongLongVariable : anotherLongLongVariable;
9. 注释
全局变量、常量、函数添加注释
10. 代码有效性
使用jshint工具,检查代码。
遵循这些规则--改进这些规则--不能没有规则
WEB编码事项的更多相关文章
- 从原理上搞定编码(二)-- Web编码
周末宅在家里睡完觉就吃饭,吃完饭接着睡觉,这日子过的实在是没劲啊.明明还有计划中的事情没有做, 为什么就是不想去做呢,这样的生活持续下去,必然会成为一个彻头彻尾的loser.上一篇写的 初识编码 ,这 ...
- spring Mvc Web 编码相关 [model 到 视图传递数据] (九)
在某种编码环境,由bean注解的参数可能会发生乱码问题. 即可页面web.xml或其他地方都设备UTF-8, 但还是会有这样的问题. 首先不要使用model传到视图的数据. 第二,不要request. ...
- ASP.NET Core 编码、web编码、网页编码 System.Text.Encodings.Web
System.Text.Encodings.Web 空间包含表示 Web 编码器的基类.表示 HTML.JavaScript 和 Url 字符编码的子类,以及表示仅允许编码特定字符.字符范围或码位的筛 ...
- 主机访问 虚拟机web注意事项
在这里, 我通过NAT的方式, 通过主机访问虚拟机. 需要做的是, 将主机中访问的端口, 映射为虚拟机的'编辑->虚拟网络编辑器->vmnet8', 如下图 在弹出的'映射传入端口'界面中 ...
- web编码(转)
问题2.浏览器编码方式是根据“响应标头-response header”中的键为“Content-Type”的值来自动选择判断,而不会简单的根据你在html中看到的标签值<meta http-e ...
- web编码
1各种编码 A .1 html编码 -HTML标签 this.Response.Write(this.Server.HtmlEncode("<h1>的作用将文本设置为标题样式! ...
- 关于解决web编码问题的总结
网页的编码问题,一般分为两个方面 1 是网页本身的编码格式, 一般不同的操作系统网页文件存取的编码是不一样的, 但一般来说, 新建网页文件一般都和IDE有关,因为我们平时我是使用编辑工具新建网页文件. ...
- Pyhon编码事项
1. 永远不要使用import * Pylint代码审查:Wildcard import XXX 如果函数名重名,或者要导入的内容里面包含了from datetime import datetime, ...
- Django国际化注意事项
涉及两部分内容: py/html文件国际化.外部js文件国际化 步骤 1. settings.py 激活相应的配置 2. 针对py文件,需要注意被翻译代码的编写方式 3. 针对html文件,需要注意被 ...
随机推荐
- getElementById返回的是什么?串讲HTML DOM
1. getElementById()返回的是什么? 这个函数使用的最普遍,但是你有没有深入探究下,这个函数究竟返回的是什么么?我们来一起看看. var mydivEle = document.get ...
- 动态规划——K背包问题
Problem DescriptionNow you are asked to measure a dose of medicine with a balance and a number of we ...
- 【protobuf进阶】读取proto实体里的extensionObject对象的方法
//设置扩展对象 ProtoBuf.Extensible.AppendValue //读取扩展对象 ProtoBuf.Extensible.GetValue 最近通过C#的TcpClient调用jav ...
- android scrollview组件禁止滑动的方法
xml配置: android:id="@+id/sc_freement" android:layout_width="fill ...
- [连载]JavaScript讲义(03)--- JavaScript面向对象编程
- C#中MessageBox使用方法大全(附效果图)
我们在程序中常常会用到MessageBox. MessageBox.Show()共同拥有21中重载方法.现将其常见使用方法总结例如以下: 1.MessageBox.Show("Hello~~ ...
- Java8特性详解 lambda表达式 Stream
1.lambda表达式 Java8最值得学习的特性就是Lambda表达式和Stream API,如果有python或者javascript的语言基础,对理解Lambda表达式有很大帮助,因为Java正 ...
- Android(java)学习笔记217:开发一个多界面的应用程序之清单文件
清单文件的重要参数: <intent-filter> 代表的应用程序的入口界面 <action android:name=&quo ...
- OD: Kernel Exploit - 1
第 22 章,内核漏洞利用技术 首先编写具有漏洞的驱动 exploitme.sys,再展开内核漏洞利用思路和方法: /***************************************** ...
- dede 标签调用
调用当前栏目名字 {dede:type}[field:typename /]{/dede:type} 调用某栏目名字 {dede:type typeid='1'}[field:typename /]{ ...