文件规范
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
书写规范