《静态页面开发规范》由会员分享，可在线阅读，更多相关《静态页面开发规范（8页珍藏版）》请在金锄头文库上搜索。
1、静态页面 (html 及 css)开发规范规范目的：为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量且统一的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发。 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改。基本准则：符合 web 标准, 语义化 html, 结构表现行为分离, 兼容性优良。页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。主要内容：（1） 文件规范，文件位置及命名（2） Html 规范，书写规范及注意事项（3） CSS 规范，书写规范及注意事项规范内容：一
2、、文件规范1. html, css, img 文件均归档至约定的目录中；2. html 文件命名: 英文命名, 后缀.htm。同时保存好相应的设计稿放于同目录中, 若界面稿命名为中文, 请重命名与 html 文件同名, 以方便后端开发人员添加功能时查找对应页面；3. css 文件命名: 英文命名, 后缀.css. 共用 core.css, 首页 index.css, 其他页面依实际模块需求命名。二、html 书写规范1. 文档类型声明及编码: 统一为 html5 声明类型，写法如下：编码统一为 utf-8，写法如下：书写时利用 IDE 实现层次分明的缩进。2. css 文件如无特殊情况，应链接
3、至 网页头部 . 标签内 .标签之后。3. 引入外部 css 文件时，应去除类型声明，写法如下： .4. 所有编码均遵循 xhtml 标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成；且所有标签必须闭合：包括 br (), hr()，,属性值必须用双引号包括,写法如下：5. 充分利用无兼容性问题的 html 自身标签, 比如 span, em, strong, optgroup, label,等等；需要为 html 元素添加自定义属性的时候 , 首先要考虑下有没有默认的已有的合适标签去设置6. 语义化 html, 如 标题根据重要性用 h*(同一页面只能有一个 h1,h1
4、用于 logo), 段落标记用 p, 列表用 ul, 内联元素中不可嵌套块级元素；h1 请使用在 logo 上，h2-h6 应用在各级标题上。7. 尽可能减少 div 嵌套书写示例：不合理代码如下：欢迎访问 q 齐家网, 您的用户名是用户名正确写法如下：欢迎访问 XXX, 您的用户名是用户名8. 书写链接地址时, 必须避免重定向，请在 URL 地址后面加上“/”，书写示例：href=”http:/ 在页面中尽量避免使用 style 属性，即：style=.10. 必须为含有描述性表单元素(input, textarea)添加 label，书写示例：不合理代码如下：姓名: 正确写法如下：姓名:
5、11. 能以背景形式呈现的图片, 尽量写入 css 样式中。12. 重要图片必须加上 alt 属性以及 height,width 属性，避免图片加载失败而导致错位，书写示例：给重要的元素和截断的元素加上 title13. 给区块代码及重要功能(比如循环) 加上注释, 方便后台添加功能。14. 特殊符号使用: 尽可能使用代码替代，书写示例： 15. 书写页面过程中, 请考虑向后扩展性。16. class 和 id 的书写规范请参考 css 部分二、CSS 书写规范1. 编码统一为 utf-8。2. 协作开发及分工:共用 css 文件 core.css 暂时由 tech yjbao 负责维护。协作
6、开发过程中, 每个页面请务必都要引入, 此文件包含 reset 及头部底部样式, 此文件不可随意修改;3. class 与 id 的使用: id 是唯一的并是父级的, class 是可以重复的并是子级的, 所以 id仅使用在大的模块上, class 可用在重复使用率高及子级中。4. class 与 id 命名: 大的框架命名比如 header/footer/wrapper/left/right 之类的在core 中将由 yjbao 统一命名其他样式名称由 小写英文 & 数字 & _ 来组合命名 , 如 q_comment, 避免使用中文拼音, 尽量使用简易的单词组合；命名要语义化, 简明化。5
7、. 规避 class 与 id 命名相同6. 为 JavaScript 预留钩子的命名, 请尽量以 js_ 起始, 比如: js_hide, js_show。7. css 书写顺序遵循（布局定位属性 自身属性 文本属性其他属性） ，同类属性应写在一起。属性列举: 布局定位属性主要包括: marginpaddingfloat（包括 clear）position（相应的 top,right,bottom,left）displayvisibility overflow 等自身属性主要包括: width & height & background & border文本属性主要包括：font color
8、text-align text-decoration text-indent 等其他属性包括: list-style(列表样式)vertical-vligncursorz-index(层叠顺序) zoom 等书写示例：.classfloat:left;display:inline;margin-right:10px;width:100px;height:200px;border:1px solidl red;font-size:14px;font-weight:700;cursor:point;zoom:1;备注：(此处为了展示需求，进行了换行，实际书写过程中，请写在一行内)8. 书写代码前,
9、 考虑并提高样式重复使用率；充分利用 html 自身属性及样式继承原理减少代码量。9. 样式表中中文字体名, 请务必转码成 unicode 码, 以避免编码错误时乱码，书写示例：如需设置当前字体为 微软雅黑 写法如下：.txt font-family:5fae8f6f96c59ed1常用字体的对照表中文名称 Unicode新细明体 65B07EC6660E4F53细明体 7EC6660E4F53标楷体 680769774F53黑体 9ED14F53宋体 5B8B4F53新宋体 65B05B8B4F53仿宋 4EFF5B8B楷体 69774F53仿宋_GB2312 4EFF5B8B_GB2312
10、楷体_GB2312 69774F53_GB2312微软正黑体 5FAEx8F6F6B639ED14F53微软雅黑 5FAE8F6F96C59ED110. 背景图片请尽可能使用 css sprite 技术, 减小 http 请求；考虑到多人协作开发, sprite 按模块制作；并且制作完成后，使用 yahoo 图片压缩工具 smush.it 进行无损压缩。工具地址：www.smush.itsprites 之前的原图应进行保留，以备修改。Sprites 适用的基本规范（1）图片尽可能使用横向排列（2）hover 变化效果相关图片靠在一起（3）需要平铺的图片尽量不要合并在 sprites 中（4）s
11、prites 之前的原图要进行保留，合并产生的图片也应保留原图和参考线。11. 使用 table 标签时(尽量避免使用 table 标签)请不要用 width/ height/cellspacing/cellpadding 等 table 属性直接定义表现, 应尽可能的利用 table 自身私有属性分离结构与表现 , 如thead,tr,th,td,tbody,tfoot,colgroup,scope；(cellspaing 及 cellpadding 的 css 控制方法: tableborder:0;margin:0;border-collapse:collapse; table th,
12、table tdpadding:0;)12. 禁止使用 强制兼容 ie813. 用 png 图片做图片时 , 要求图片格式为 png-8 格式,若 png-8 实在影响图片质量或其中有半透明效果, 请为 ie6 单独定义背景:书写示例：_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=img/bg.png);14. 避免兼容性属性的使用, 比如 text-shadow | css3 的相关属性这些属性可在后期采用渐进增强的方式进行单独引入。关于如何
13、采用渐进增强的方式，将在后期考虑使用 Modernizr.js 来进行浏览器甄别。对支持 css3 html5 的浏览器单独写代码。这里不做具体的要求，之后会作为一个单独的项目来进行。15. 减少使用影响性能的属性,主要是定位和浮动, 比如 position:absolute | float 16. 必须为大区块样式添加注释, 小区块适量注释，以便后台人员嵌套代码。17. 要注意利用 CSS 简写，简写是书写高效 CSS 的方法之一。可以减少代码冗余。不过在书写过程中一定注意书写时的顺序问题。不然可能导致所设样式无效。Font 书写示例：font:font-style font-variant
14、 font-weight font-size/line-height font-family注意：font-style font-variant font-weight 必须按照顺序放在最前面。这三项为可选项，而之后的除了 line-height 为可选项外其他为必选项，任何一个属性被忽略，整行属性将无效。pfont-style:italic;font-variant:small-caps;font-weight:700;font-size:12px;line-height:24px;font-family:airal;简写后为：pfont:italic small-caps 700 12px
15、/24px arial;色彩值在采用 16 进制时，如果对应的三原色值相同的话就可以采用缩写。如：pcolor:#ff0000;可以简写为 pcolor:#f00;所有用到 16 进制色彩值的地方都可以使用简写，比如 background-color、border-color、text-shadow 、box-shadow 等。其他可使用简写的标签有且不限于以下：margin,padding,border,border-radius,background,list-style 等三、图片规范1. 所有页面元素类图片均放入 img 文件夹测试用图片如商品图片、广告范例先放于 img/temp 文
16、件夹，提醒后端开发人员代码嵌入将其删除。2. 图片格式仅限于 gif | png | jpg，尽量使用 png 格式的图片。3. 命名全部用小写英文字母 | 数字 | _ 的组合；不得包含汉字 | 空格 | 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解；命名分头尾两部分, 用下划线隔开, 比如 ad_left01.gif | btn_submit.gif4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间5. 尽量避免使用半透明的 png 图片如果要使用，请使用 png-8 或者 gif 格式保证向前向后兼容。 6. 运用 css sprite 技术集中小的背景图或图
