background image

文件规范

1. html 文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命

名与

html 文件同名, 以方便后端添加功能时查找对应页面; 

2. css 文件命名: 英文命名, 后缀.css. 共用 base.css, 首页 index.css, 其他页面依实际模块需求命名.; 

3. Js 文件命名: 英文命名, 后缀.js. 共用 common.js, 其他依实际模块需求命名. 

html

 

书写规范

1. 文档类型声明及编码: 统一为 html5 声明类型<!DOCTYPE html>; 编码统一为
<meta charset=”utf-8″ />, 书写时利用 IDE 实现层次分明的缩进; 

2. 非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下 JavaScript 文件必须外链

至页面底部

;

3. 引入样式文件或 JavaScript 文件时, 须略去默认类型声明, 写法如下: 

   <link rel="stylesheet" href=""/>

   <style>...</style>

   <script src="..."></script>

 

4. 引入 JS 库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如 jquery-1.4.1.min.js; 引入插件, 

文件名格式为库名称

+插件名称, 比如 jQuery.cookie.js;

5. 所有编码均遵循 xhtml 标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签

必须闭合

, 包括 br (<br />), hr(<hr />)等; 属性值必须用双引号包括;

6. 充分利用无兼容性问题的 html 自身标签, 比如 span, em, strong, optgroup, label,等等; 需要为 
html 元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使

用须以

data-”

 

为前缀来添加自定义属 性,避免使用

data:”等其他命名方式;

7. 语义化 html, 如 标题根据重要性用 h*(同一页面只能有一个 h1), 段落标记用 p, 列表用 ul, 内联元素中

不可嵌套块级元素

;

8. 尽可能减少 div 嵌套, 如

<div class=”box”& gt;<div class=”welcome”>欢迎访问 XXX, 您的用

户名是

<div class=”name”>

 

用户 名

</div></div></div>完全可以用以下代码替代:

 <div class=”box”& gt;<p>欢迎访问 XXX, 您的用户名是<span>用户名</span></p>< /div>

;

9. 书写链接地址时, 必须避免重定向,例如:href=”http://itaolun.com/”, 即须在 URL 地址后面加上
“/”;

10. 在页面中尽量避免使用 style 属性,即 style=”…”;

11. 必须为含有描述性表单元素(input, textarea)添加 label, 如

<p> 姓名:

 <input type=”text” id=”name” name=”name” /></p>须写成:< p><label for=”name”>

: </label>< input type=”text” id=”name” /></p>

12. 能以背景形式呈现的图片, 尽量写入 css 样式中;

13. 重要图片必须加上 alt 属性; 给重要的元素和截断的元素加上 title;

14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;

15. 特殊符号使用: 尽可能使用代码替代: 

 

比如

<(<) & >(>) & 空格( ) & »(») 等等; 

16. 书写页面过程中, 请考虑向后扩展性; 

css

 

书写规范