此为前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性。
符合web标准,&语义化html,&结构表现行为分离,&兼容性优良.&页面性能方面,&代码要求简洁明了有序,&尽可能的减小服务器负载,&保证最快的解析速度。
1.忽略（Omit）协议：如&background:&url(http://www.google.com/images/example);&应该写background:&url(//www.google.com/images/example);以方便http与https协议切换，除非必须使用某个协议
2.书写时利用IDE实现层次分明的缩进。tab键用四个空格代替。
因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你自己设定了tab键所占的位置长度）。
如sublime&text，在这个工具中可以对tab键进行设置。
3.标签属性使用小写
4.尾部不要留有空格，以防diff
5.使用&UTF-8&(no&BOM)，文档中也加入&&meta&charset=&utf-8&P&
6.文件命名统一使用小写&.js&，同时推荐&-&而不是&_&
7.TODO(contact)&以及TODO:&action&item，不要使用@@
HTML&细化规范
1.使用html5的规范&!DOCTYPE&html&
2.&img&标签默认缺省格式：&img&src="xxx.png"&alt="缺省时文字"&/&&避免出现src=""&问题
3.&a&标签缺省格式：&a&href="###"&title="链接名称"&xxx&/&&注：target="_blank"&根据需求决定
4.&a&标签预留链接占位符使用###，参见：
5.书写链接地址时,&必须避免重定向，例如：href=&http://itaolun.com/&,&即须在URL地址后面加上&/&
6.所有标签需要符合XHTML标准闭合
7.一律统一标签结尾斜杠的书写形式：&br&/&&&hr&/&&注意之间空格
8.避免使用已过时标签，如：&b&&&u&&&i&&而用&&strong&&&em&等代替
9.使用data-xxx来添加自定义数据，如：&input&data-xxx="yyy"/&
10.避免使用style="xxx:"的内联样式表
特殊符号使用参考
11.必须为含有描述性表单元素(input,&textarea)添加label,&如&p&姓名:&&input&type=&text&&id=&name&&name=&name&&/&&/p&须写成:&p&&label&for=&name&&姓名:&&/label&&input&type=&text&&id=&name&&/&&/p&
CSS&细化规范
1.&每个样式属性后加&";"
方便压缩工具"断句"。
2.&Class命名，采用&&-&&[减号连接符]&对class中的字母分隔：
用"-"隔开比使用驼峰是更加清晰。
产品线-产品-模块-子模块，命名的时候也可以使用这种方式
&&&&ID:&&&如：
&&&&firstName&topBoxList&&footerCopyright
3.&空格的使用，以下规则执行：
&.hotel-content&{
&&&&&font-weight:&
选择器与&{&之前要有空格
属性名的&:&后要有空格
属性名的&:&前（禁止）加空格
一个原因是美观，其次IE&6存在一个bug，&戳
4.&（推荐）属性的书写顺序,&举个例子:
.hotel-content {
/* 定位 */
/* 盒模型 */
height: 50
margin: 10
/ *其他* /
定位相关,&常见的有：display&position&left&top&float&等
盒模型相关,&常见的有：width&height&margin&padding&border&等
&&按照这样的顺序书写可见提升浏览器渲染dom的性能
简单举个例子，网页中的图片，如果没有设置width和height，在图片载入之前，他所占的空间为0，但是当他加载完毕之后，那块为0的空间突然被撑开了，这样会导致，他下面的元素重新排列和渲染，造成重绘（repaint）和回流（reflow）。我们在写css的时候，把元素的定位放在前头，首先让浏览器知道该元素是在文本流内还是外，具体在页面的哪个部位，接着让浏览器知道他们的宽度和高度，border等这些占用空间的属性，其他的属性都是在这个固定的区域内渲染的，差不多就是这个意思吧~
推荐文章：
&&&&&&&&&&&&&&
5.&（推荐）当编写针对特定html结构的样式时，使用元素名&+&类名
/* 所有的nav都是针对ul编写的 */
".a&div"和".a&div.b"，为什么后者好？如果需求有所变化，在".a"下有多加了一个div，试问，开始的样式是不是会影响后来的div啊~
6.&（不推荐）ie使用filter,（&禁止）使用expression
这里主要是效率问题，应该当格外注意，要少用烧CPU的东西~
7.&CSS注释用&/*&*/&表示，单行注释时，被注释对象与前后注释符各保留一个空格，且单独占一行；多行注释时，开始注释符和结束注释符各占一行。例如：
/* 注释CSS */
border-collapse:
JS细化规范
每行代码应少于120个字符，多于这个数量时，可以考虑换行，&.&或&+&这类操作符应放在行尾，换行后的代码必须在换行前多一层缩进。
如果函数或方法中的参数较长，要进行适当的划分。
禁止在return关键字及要返回的表达式之间换行。例如：
// 实际是返回的是undefined，不是1
function test() {
禁止把多个短语句写在一行中，即一行只写一条语句。
if、for、do、while、switch、case、default、break、continue等语句自占一行。
if、for、do、while等所有的循环体和判断体的执行语句部分都需要用"{}"括起来，禁止省略花括号。例如：
if (i & 5) i += 1;
if (i & 5) {
代码块的分界符{}，&{&跟随在上一行，并且前边有一空格隔开，&}&应独占一行并且位于同一列，同时与引用它们的语句左对齐。
在函数体的开始、类的定义以及if、for、do、while、switch、case语句中的程序都要采用如上的缩进方式。
关键字之后必须有空格，以突出关键字。
函数名、方法名与左括号&(&之间不能保留空格，例如：
function getInfo () {
function getInfo() {
在声明函数表达式时，function与左括号&(&之间不能保留空格，例如：
var user = function () {
var user = function() {
逗号后面加空格。
赋值操作符、比较操作符、算术操作符、逻辑操作符、位域操作符，如&=&、&+=&&&&=&、&&=&、&+&、&*&、&%&、&&&&、&||&等二元操作符的前后应当加空格。
"!"、"~"、"++"、"--"、"&"（地址运算符）等单目操作符前后不加空格。
"."、"[]"前后不加空格。
在每个类声明之后、每个函数定义结束之后都要加空行。
在一个函数体内，逻揖上密切相关的语句之间不加空行，其它地方应加空行分隔。
6.使用严格的条件判断符。用===代替==，用!==代替!=
7.避免额外的逗号。如：var&arr&=&[1,2,3,]&
8.语句必须都有分号结尾，除了for，function，if，switch，try，while。
9.左花括号置于行末，右花括号置于行首。
10.下面类型的对象不建议用new构造：new&Number，new&String，new&Boolean，new&Object(用{}代替)，new&Array(用[]代替)。
11.数组成员间的&,&后面需要保留一个空格。
12.禁止在js/json中使用javascript保留关键字词命名，在IE中容易造成错误。关键字（break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with），关键词（abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile）。
13.建议使用&+&作为换行连接符，而不是使用&\&。
14.提示信息禁止使用概括笼统的语言描述，应该简洁明了，看到信息立即能定位到错误，如提示用户信息报错用&该用户不存在&，而不是用&后台返回数据有误&、&网络超时&。
阅读(...) 评论()web前端开发规范2014_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&100W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
web前端开发规范2014
阅读已结束，下载本文需要
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩17页未读，
定制HR最喜欢的简历
你可能喜欢&>&web前端开发规范文档（大牛级别）
web前端开发规范文档（大牛级别）
上传大小：32KB
web前端开发规范文档，大牛级别，适合前端开发人员，非常经典。
综合评分：1
30积分/C币
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有1条
30C币上当了
zhang_baba
综合评分：
积分/C币：5
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
web前端开发规范文档（大牛级别）
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*投诉人姓名：
*投诉人联系方式：
*版权证明：
*详细原因：
web前端开发规范文档（大牛级别）扫一扫体验手机阅读
WEB前端开发规范整理
<span type="1" blog_id="1407167" userid='
96篇文章，7W+人气，0粉丝
企业级网安运维
￥51.0036人订阅
鸟瞰Web应用开发
￥51.0021人订阅Web前端开发规范手册
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。
文件命名规则
文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。
HTML的命名原则
主页统一使用index.htm、index.html或index.asp文件名（小写）
各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如：
关于我们 --& aboutus 信息反馈 --& feedback 产品 --& product
如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示；
每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm、index.html或index.asp；
图片的命名原则
图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质
例如：广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名： banner
标志性的图片取名为： logo
在页面上位置不固定并且带有链接的小图片我们取名为 button
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu
装饰用的照片我们取名： pic
不带链接表示标题的图片我们取名： title
范例：banner_sohu.png、banner_sina.png、menu_aboutus.png、menu_job.png、title_news.png、logo_police.png、 logo_national.png、pic_people.png
鼠标感应效果图片命名规范为"图片名+_+on/off"。
例如：menu1_on.png、menu1_off.png
java的命名原则
例如：广告条的java文件名为 ad.js 弹出窗口的java文件名为 pop.js
动态语言文件命名原则
以性质_描述，描述可以有多个单词，用“_”隔开，性质一般是该页面得概要。
范例：register_form.asp、register_post.asp、topic_lock.asp
文件存放位置规范//项目目录(都不是必须存在的目录) cn 存放中文HTML文件 en 存放英文HTML文件 flash 存放Flash文件 images 存放图片文件 imagestudio 存放PSD源文件 flashstudio 存放flash源文件 inc 存放include文件 library 存放库文件 media 存放多媒体文件 project 存放工程项目资料 temp 存放客户原始资料 js 存放Java脚本 css 存放CSS文件CSS书写规范基本原则：
CSS样式可细分为3类：自定义样式、重新定义HTML样式、链接状态样式。
自定义样式为设计师自定义的新CSS样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样式名为“.”+“相应样式效果描述的单词或缩写”，例： .shadow，文字样式样式名为“.word”+“字号”+“行距”+“颜色缩写”，例：.word12、.word12-24、.word12-24-red
重新定义HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。样式名为HTML标签，例：hr { border: 1px dotted #333333 }
链接状态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接，该样式写法有2种：a.nav:link、nav.a:link，第一种只能修饰&a&标签中；第二种可以修饰所有包含有&a&标签的其他标签。
页面内的样式加载必须用链接方式&link rel="stylesheet" type="text/css" href="xxx/xxx.css"&
注意细则：
协作开发及分工: Me(前端负责人，主开发人员，以下简称Me)会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构、表现、行为; 共用css文件base.css由Me书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;
class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由Me分发框架文件时命名的, 为Java预留钩子的除外;
为Java预留钩子的命名, 请以js_起始, 比如:js_hide、js_
class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在 2 中由Me统一命名.其他样式名称由 小写英文、数字、_来组合命名(不能以数字开头), 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.
规避class与id命名(此条重要, 请及时与Me沟通): a、 通过从属写法规避, 示例见d; b、 取父级元素id/class命名部分命名, 示例见d; c、 重复使用率高的命名, 请以自己代号加下划线起始, 比如Me_ d、 a,b两条, 适用于在 2 中已建好框架的页面, 如, 要在 2 中已建好框架的页面代码&div id="mainnav"&&/div&中加入新的div元素://按a命名法则&div id="mainnav"&&div class="firstnav"&...&/div&&/div&//样式写法#mainnav .firstnav{.......}//按b命名法则&div id="mainnav"&&div class="main_firstnav"&...&/div&&/div& //样式写法.main_firstnav{.......}
css属性书写顺序, 建议遵循布局定位属性--&自身属性--&文本属性--&其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin、padding、float（包括clear）、position（相应的 top,right,bottom,left）、display、visibility、overflow等；自身属性主要包括: width、height、background、 文本属性主要包括：font、color、text-align、text-decoration、text-indent等；其他属性包括: list-style(列表样式)、vertical-align、cursor、z-index(层叠顺序) 、zoom等，所列出的这些属性只是最常用到的, 并不代表全部;
书写代码前, 考虑并提高样式重复使用率;
充分利用html自身属性及样式继承原理减少代码量, 比如:&ul class="list"&&li&这儿是标题列表&span&&/span&&/ul&，定义ul.list li{position:relative} ul.list li span{position: right:0}，即可实现日期居右显示。
样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;
背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;
使用table标签时(尽量避免使用table标签), 请不要用width/height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如thead,tr,th,td,tbody,tfoot,colgroup, (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:} table th, table td{padding:0;}, 一般base.css文件中Me会初始化表格样式)
用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:background:_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
避免兼容性属性的使用, 比如text-shadow、css3的相关属性;
减少使用影响性能的属性, 比如position:absolute、
必须为大区块样式添加注释, 小区块适量注释;
代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化Me会统一处理;
头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：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
注释的写法:
/* Footer */ 内容区 /* End Footer */
页面结构 容器: container 页头：header 内容：content container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center
导航 导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary
功能 标志：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 版权：copyright
基本样式：
/* CSS Document */body {margin:0; padding:0; font:12px "5B8B4F53",san-background:#}div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} table,td,tr,th{font-size:12}li{list-style-type:}img{vertical-align:border:0;}ol,ul {list-style:}h1,h2,h3,h4,h5,h6 {font-size:12 font-weight:}address,cite,code,em,th {font-weight: font-style:}.fB{font-weight:}.f12px{font-size:12}.f14px{font-size:14}.left{float:}.right{float:}a {color:#2b2b2b; text-decoration:}a:visited {text-decoration:}a:hover {color:#ba2636;text-decoration:}a:active {color:#ba2636;}//重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！
中英文混排时，我们尽可能的将英文和数字定义为verdana 和 arial 两种字体。
HTML书写规范
head区代码规范
head区是指HTML代码的&head&和&/head&之间的内容。
必须加入的标签:
公司版权注释 &!--- The site is designed by xxx 04/2018 ---&
网页显示字符集简体中文：&META HTTP-EQUIV="Content-Type" CONTENT="text/ charset=gb2312"&繁体中文：&META HTTP-EQUIV="Content-Type" CONTENT="text/ charset=utf-8"&英 语：&META HTTP-EQUIV="Content-Type" CONTENT="text/ charset=utf-8"&
网页制作者信息 &META name="author" content=""&
网站简介 &META NAME="DEION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx"&
搜索关键字 &META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,"&
网页的css规范 &LINK href="xxx/xxx.css" rel="stylesheet" type="text/css"&
网页标题 &title&xxxxxxxxxxxxxxxxxx&/title&
可以选择加入的标签:
设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。 &META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb ：57 GMT"&
禁止浏览器从本地机的缓存中调阅页面内容。 &META HTTP-EQUIV="Pragma" CONTENT="no-cache"&
用来防止别人在框架里调用你的页面。&META HTTP-EQUIV="Window-target" CONTENT="_top"&
自动跳转。&META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.keyup.top"&5指时间停留5秒
网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。&META NAME="robots" CONTENT="none"& CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
收藏夹图标 &link rel = "Shortcut Icon" href="favicon.ico"&
所有的java的调用尽量采取外部调用. & LANGUAGE="Java" SRC="/xxxxx.js"&&/&
附&body&标签： &body&标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景&body bgcolor="#FFFFFF"&
在设定字体样式时对于文字字号样式和行间距应必须使用CSS样式表。禁止在页面中出现 &font size=?& 标记。
在网页中中文应首选使用宋体。英文和数字首选使用verdana 和arial 两种字体。一般使用中文宋体的9pt 和11pt 或12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt 和14.7px 的字号比较合适。
为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用&br&来人工干预分段。
不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
请不要在网页中连续出现多于一个的空格，也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent, padding, margin, hspace, vspace 以及透明的gif图片来实现。
行距建议用百分比来定义，常用的两个行距的值是line-height:120% line-height:150%。
排版中我们经常会遇到需要进行首行缩进的处理，不要使用空格或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2 } 然后给每一段加上 &p& 标记，注意，一般情况下，请不要省略 &/p& 结束标记 。
网站中的链接路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：&a href=”aboutus/index.htm”& 而应该这样：&a href=”aboutus/”&，所有内页指向首页的链接写成&a href=”/”&
在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端，从而影响用户正常的阅读内容，我们用代码java:void(null)代替原来的“#”标记
1px表格style="border-collapse: collapse"
实例如下：
&table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse"bordercolor="#000000" cellpadding="0"& &tr& &td&&/td&&/tr&&/table&
设置亮、暗边框颜色
表格有亮边框（bordercolorlight）和暗边框（bordercolordark）两个属性可以对表格样式设置。
&table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF"&
在写 &table& 互相嵌套时，严格按照的规范，对于单独的一个&table&来说，&table&&tr&对齐，&td& 缩进两个半角空格，&td& 中如果还有嵌套的表格，&table&也缩进两个半角空格，如果&td&中没有任何嵌套的表格，&/td& 结束标记应该与 &td& 处于同一行，不要换行，
如我们注意在源代码中不应有这样的代码：
&td&&img src=”../images/sample.gif”&&/td&
而应该是这样的：
&td&&img src=”../images/sample.gif”&&/td&
这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：
&td&&img src=”../images/sample.gif”& &/td&
一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 &tbody&标记，以便能够使这个大表格分块显示
首页Flash 网页大小应限定在
，尽可能的使用矢量图形和Action来减小动画大小。非首页静态页面含图片大小应限定在70K左右，尽可能的使用背景颜色替换大块同色图片。
asp标准写法 &!--#include file="inc/index_top.asp" --&
jsp标准写法 &%@ include file="../inc/index_top.jsp" %&
Alt和Title
都是提示性语言标签，请注意它们之间的区别。
在我们浏览网页时，当鼠标停留在图片对象或文字链接上时，在鼠标的右下角有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合，它的作用是很重要的。
alt用来给图片来提示的。title用来给链接文字或普通文字提示的。
用法如下：
&p Title="给链接文字提示"&文字&/p& &a href="#" Title="给链接文字提示"&文字&/a& &img src="图片.gif" alt="给图片提示"& 缓存
&META HTTP-EQUIV="pragma" CONTENT="no-cache"& &META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"& &META HTTP-EQUIV="expires" CONTENT="0"&
Response.Expires = -1 Response.ExpiresAbsolute = Now() - 1 Response.cachecontrol = "no-cache"浏览器兼容性
创建站点时，应该明白访问者可能使用各种 Web 浏览器。在已知的其他设计限制下，尽可能将站点设计为具有最大的浏览器兼容性。目前使用的 Web 浏览器有二十多种，大多数已发行了多个版本。即使您只针对使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多数 Web 用户，但您应明确并不是每个人都在使用这两种浏览器的最新版本。您的站点越复杂（在布局、动画、多媒体内容和交互方面），跨浏览器兼容的可能性就越小。例如，并非所有的浏览器都可以运行Java。不使用特殊字符的纯文本页面或许能够在任何浏览器中正确显示，但比起有效地使用图形、布局和交互的页面，这样的页面在美感上可能要差得多。所以，应尽量在最佳效果设计和最大浏览器兼容性设计之间取得平衡。所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写&a href=”url”& 而不是 &a href=url&.
全尺寸banner为468X60px，半尺寸banner为234X60px，小banner为88X31px。另外120X90，120X60也是小图标的标准尺寸。全尺寸banner不超过14K。普遍的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140次级页的pip尺寸360X300，336X280游标:100X100或120X120
LOGO的国际标准规范
为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：88*31这是互联网上最普遍的LOGO规格。120*60这种规格用于一般大小的LOGO。120*90这种规格用于大型LOGO。
页面修饰图片处理
图片经过优化以加快下载的速度,有较佳的视觉空间效果，用图要与页面风格、页面内容相符；制作精美，细节处理得当。
Java书写规范
书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...);
库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;
变量命名: 驼峰式命名. 原生Java变量要求是纯英文字母, 首字母须小写, 如iTaoL jQuery变量要求首字符为_, 其他与原生Java 规则相同, 如: _iTaoL 另, 要求变量集中声明, 避免全局变量.
类命名: 首字母大写, 驼峰式命名. 如 ITaoL
函数命名: 首字母小写驼峰式命名. 如iTaoLun();
命名语义化, 尽可能利用英文单词或其缩写;
尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerT
后期优化中, Java非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
代码结构明了, 加适量注释. 提高函数重用率;
注重与html分离, 减小reflow, 注重性能.
所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;
图片格式仅限于gif || png ||
命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.
在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);
运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.
html注释: 注释格式 &!--这儿是注释--&, '--'只能在注释的始末位置,不可置入注释文字区域;
css注释: 注释格式 /*这儿是注释*/;
Java注释, 单行注释使用//这儿是单行注释 ,多行注释使用 /* 这儿有多行注释 */;
浏览器兼容性 CSS hack
一、标识区别：
区别IE6,IE7,IE8,FF。
1．IE6和firefox的区别：background:*background:意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景色是蓝色.
2.IE6和IE7的区别：background:green !background:意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色3.IE7和FF的区别：background: *background:意思指的是:火狐浏览器的背景颜色是橙色,而IE7的背景颜色是绿色4.FF，IE7，IE6的区别：background:*background:green !*background:意思是火狐浏览器的的背景橙色,IE7浏览器的背景颜色是绿色,而IE6浏览器的颜色是蓝色.
via：https://segmentfault.com/a/7104
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点
