编写时项目规范

-

目录

目录结构参考  

HTML 书写规范

  文档类型声明及编码：

 书写规范：

语义化 HTML：

合理嵌套HTML标签：

保证结构与表现相分离：

css 书写规范

编码：

书写代码前

书写代码时

类名命名参考

css 属性书写顺序：

---

根据项目名称创建项目文件夹。如：u_course

- html、css、img、js 文件均归档至项目名称目录中

- HTML 文件、根据页面内容以英文命名，首页或只有一个页面通常命名为index.html
- ==文件夹和文件起名字两个单词 _下划线链接==
- css 文件以英文命名，

  - 公用样式通常命名为reset.css（常用的浏览器样式），

  - common.css（多个页面时的公共模块的样式，或多次重复使用字体、字号、间距等样式），
  - 首页通常命名为index.css, 其他页面依实际模块或功能需求命名
- 图片文件命名尽量与其模块样式名称保持关联，尽量使用小写命名
  - （如登录框的背景与图片：login_bg.jpg、login_user_ico.gif 等）
  - 常用图片格式 gif 、png 、jpg

 

目录结构参考  

---

---/html/
|---- /user/                    与用户相关的页面  
|---- /user/login.html          登录页
---/css/
|---- /reset.css                 重置浏览器样式    
|---- /page                        其他页面的css
|---- /page/pagename.css         单独某个页面的css
|---- /common.css                  css通用样式库
---/js/
|---- /lib                      公用组件
|---- /lib/jquery.2.2.3.min.js  调用jq库文件 
|---- /page                          其他页面的js
|---- /page/pagename.js         单独书写的js
|---- /common.js                公用方法
---/img/
|---- /page                     其他页面对应的图片
|---- /page/wap                 手机端图片夹
|---- /page/wap/wap_icon.png    手机端图标
|---- /logo.png                 公用图片

 

HTML 书写规范

---

  文档类型声明及编码：

• 统一为 html5 声明类型；

• 编码统一为 utf-8

 书写规范：

• 书写时根据页面结构实现层次分明的缩进；

• 标签必合

• 属性值必须用双引号包括

• 通常小写字母 

语义化 HTML：

• 根据页面结构选择合适的标签，

  • 如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用 p、结构简章重复的部分用 ul、li标签

  • 页面中重要的图片内容要添加 alt=””替换文本，以便图片丢失时，用户可以根据替换文本了解页面内容

• 根据模块内容定义class和id名称，

  • 如包含logo和搜索框等在内的头部标签用.header,包含联系信息，版权等的模块用footer或copyright. 

合理嵌套HTML标签：

• 合理嵌套HTML标签，

  • ul和li是固定嵌套，ul直接子元素必须是li;

  • dl和dt,dd是固定嵌套，dl的直接子元素必须是dl和dd;

  • p标签不允许嵌套p标签;a标签不允许嵌套a

• 尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能

保证结构与表现相分离：

• CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。

• 在页面中尽量避免使用行内样式即 style=”…”或行间属性，尽量使用 class 或者 id

 

css 书写规范

---

编码：

编码统一为 utf-8

书写代码前

（1）确定版心（页面有效区）

（2）考虑样式表规划，提高样式重复使用率；

（3）提前沟通页面中模棱两可的需求和交互效果，方便后续合理布局；

（4）布局时考虑后续交互效果处理的便利性，必要时预留出交互效果中涉及到的样式类。

（如鼠标点击后的样式等）

书写代码时

（1）添加注释：应该为大区块样式添加注释 , 小区块适量注释；

（2） class - 与 id_ 的命名

命名要语义化、简明化

• CSS命名时要加前缀*zg*如：.zg_top{}

  • 常用命名方法一：样式名称由小写英文、数字和 _ 来组合命名：

    • 如 top_left、top_nav;

    • 避免使用中文拼音 , 尽量使用简易的单词组合

• 常用命名方法二：首字母大写，驼峰式命名

  • 如：topNav

（3）代码格式

• 保持代码缩进与格式

• 建议单行书写

( 4 ) 选择器

• 尽可能不使用通配符选择器 *

• 合理使用id选择器（页面中唯 一的元素，如头部，底部）

• 避免使用标签限定id或者类选择器

  • 如：div#test { } p.box {}

• 避免层集嵌套

 

类名命名参考

---

main 页面主体

tag 标签

msg message 提示信息

tips 小技巧

vote 投票

friendlink友情链接

title 标题

summary 摘要

login_bar 登录条

search_input 搜索输入框

hot 热门热点

search 搜索

search_output 搜索输出和搜索结果相似

search_bar 搜索条

search_results 搜索结果

copyright 版权信息

branding 商标

logo 网站LOGO标志

site_info 网站信息

site_info_legal 法律声明

site_info_credits 信誉

join_us 加入我们

partner 合作伙伴

service 服务

regsiter 注册

arr arrow 箭头

guild 指南

site_map 网站地图

list 列表

index 首页

sub_page 二级页面子页面

tool, toolbar 工具条

drop 下拉

dorp_menu 下拉菜单

status 状态

scroll 滚动

tab 标签页

left right center 居左、中、右

news 新闻

download 下载

 

css 属性书写顺序：

---

• 建议遵循 :

• （1）布局相关属性display,overflow,float,position, clear, visibility,margin, padding,）

• （2）自身相关属性（width, height, border,background-color）

• （4）文本相关属性（text-,line-,font-....）

• （3）其他属性(cursor,resize,vertical-align,z-index,圆角，阴影...)

• 书写代码过程中要兼容兼容问题，对熟知的兼容问题在书写代码过程中一并处理。