html规范
- 符合web2.0标准,语义化html,结构、表现、行为三层分离,兼容性优良,代码简洁明了有序,尽可能的减少服务器负载,快速的解析速度。
- 正确使用块级元素和内联元素嵌套,
h1、h2、h3、h4、h5、h6、P、dt
标签不能包含div
等块级元素,只能包含内联元素,li可以嵌套div,ul,ol
等块级元素,内联元素中不可嵌套块级元素。 - 正确使用
<ul><li>
无序列表(在文章列表、导航条,下拉列表、tab使用)、<ol><li>
有序列表(文章列表等根据需要使用)、<dl><dt>
(自定义列表)。 - 加粗使用
<strong>
标签, 表示关键词强调的语义化,有助于SEO。 - 不建议使用
<br/>
,用margin
进行控制。 p
标签定义段落,用来区分段落,有语义化的,文章正文使用p
标签是理所当然的,推荐在文章或者文本段落以外的地方尽量少用P
标签,不宜用来大范围的布局。- 标题要用
h*
(同一页面只能有一个h1
)。 - 标签、属性、属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括单标签。
- 尽可能减少
div
多层嵌套。 - 在html页面中尽量避免直接使用行内样式来控制标签样式,做到内容与表现分离。
- 多余代码, 比如页面注释掉不需要的代码,应该坚决删除掉。
- 指定
img
明确的宽度和高度,可以增加页面渲染速度。
css规范
- 图片尽量使用css写入样式中。
- 背景图片请尽可能使用
sprite
技术,减小http
请求。 - 链接的样式请严格按照:
a:link -> a:visited -> a:hover -> a:active(LVHA)
的顺序写。 - 合并
margin
、padding
、border
的设置,尽量使用缩写法,比如margin:0 10px 0 10px;
- 选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗,但是一定要避免覆盖全局样式设置。
- 如果没有边框时,不要写成
border:0;
,应该写成border:none;
。 - 在保持代码解析的前提下,尽量合并重复的样式,例如:
a { display:block } span{ display:block }
合并:a,span { display:block }
。 background
、font
等可以缩写的属性,尽量使用缩写形式:
background: color image repeat attachment position;
font: style weight size/lineHeight family;
- 不要直接为html标签添加css样式,比如
div {width: 100px;}
- 尽量少用
hack
,能不hack
就尽量不用hack
,为了兼容必须需要时就使用。 - 为了SEO和页面可用性,请使用
text-indent
来隐藏文本内容。 - 不要在 html 中加入标签来清除浮动,通过在浮动元素的父元素上添加
.clearfix
来清除浮动:.clearfix:dfter{content:”.”; display:block;height:0;visibility:hidden;clear:both;}
.clearfix{zoom:1} - 字体名称最好映射成对应的英文名,例如:黑体(SimHei) 宋体(SimSun) 微软雅黑(Microsoft Yahei);
- css属性书写顺序, 建议遵循布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写,但尽量保证同类属性写在一起。属性列举:
布局定位属性主要包括:float
、clear
、position
、top
、right
、bottom
、left
、display
、visibility
、overflow
等; - 自身属性主要包括:
width
、height
、margin
、padding
、background
、border
; - 文本属性主要包括:
font
、color
、text-align
、vertical-align
、text-decoration
、text-indent
、white-space
等; - 其他属性包括:
list-style
、cursor
、z-index
、zoom
等。 - 不需要重复定义可继承的值,css中,子元素自动继承父元素的属性值,如颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义,除非是为了更变当前元素样式不使用父元素的属性值,但是要注意,浏览器可能用一些默认值覆盖你的定义。
- 用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请为ie6单独定义背景:
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
javascript规范
- js每行代码结束时必须有分号;
- 引用js库文件,文件须包含库名称及版本号,以及是否为压缩版,比如jquery.1.81.min.js;引用插件,文件名为库名+插件名称,比如:jquery.cookie.js。
- 变量和函数命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如
myName
。 - 避免全局变量。
- 命名语义化, 尽可能利用英文单词或其缩写。
- 页面引用js文件和js代码放在html代码的最底部。
图片使用规范
- 图片格式仅限于
gif
、png
、jpg
。 - 如果背景图片有动画,则保存成
gif
,如果没有动画,也没有半透明效果,则保存成jpg
。 - 如果有半透明效果,则保存成
png-24
,但尽量避免使用半透明的png
图片。 - 重要图片必须加上
alt
属性,给重要的元素和截断的元素加上title
。 - 命名全部用小写英文字母、数字、和横线的组合,尽量用易懂的词汇,便于团队其他成员理解,命名分头尾两部分, 用下划线隔开, 比如
ad-left01.gif
、btn-submit.jpg
。 - 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间。
- 运用css sprite技术集中小的背景图或图标, 减小页面http请求。
注释规范
html注释:
- 注释格式
<!–这儿是注释–>
,’–’
只能在注释的始末位置,不可置入注释文字区域;
css注释:
- 单行注释:
/*中文说明*/
- 有修改者模块注释:
/* module: module by lingdu 2014-07-30 */
JavaScript注释,
- 单行注释使用:
//这儿是单行注释
- 多行注释使用:
/* 这儿有多行注释 */
我写博客为学习方便看的,如果有不对的请大家给予指教,有的是借鉴别人来的,也请不要见怪,谢谢大家配合!