【学习记录】Web前端开发规范

1.规范产生的目的

a.为提高团队协作效率, 利于后台添加功能和前端的后期优化维护

2.文件规范

a.文件名称：

a.1统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符

b.HTML的命名原则:

b.1引文件统一使用index.htm  index.html  index.asp文件名(全部小写)

b.2各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称

例如：产 品---product

b.3栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示
b.4每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm  index.html  index.asp

c.图片的命名原则：

c.1图片的名称分为头尾两部分，用下划线隔开；

c.2:

放置在页面顶部的长方形的图片： banner
标志图片： logo
在页面上位置不固定并且带有链接的小图片： button
在页面上某一个位置连续出现，性质相同的链接栏目的图片： menu
装饰用的照片： pic
不带链接表示标题的图片： title

（部位名+下划线+数字+图片信息名称的组合）

例如：banner_sohu.gif  menu_aboutus.gif  menu_job.gif  title_news.gif  logo_mi.gif    
鼠标感应效果图片命名规范为"图片名+_+on/off"
例如：menu1_on.gif  menu1_off.gif

 d.javascript的命名原则

例如：广告条的javascript文件名为 ad.js  弹出窗口的javascript文件名为 pop.js

e.动态语言文件命名原则

以性质_描述，描述可以有多个单词，用“_”隔开，一般是指该页面概要
例如：register_form.asp   register_post.asp   topic_lock.asp

3.文件存放位置规范

cn	存放中文HTML文件
en	存放英文HTML文件
flash	存放Flash文件
images	存放图片文件
imagestudio	存放PSD源文件
flashstudio	存放flash源文件
inc	存放include文件
library	存放DW库文件
media	存放多媒体文件
project	存放工程项目资料
temp	存放客户原始资料
js	存放JavaScript脚本
css	存放CSS文件

4.CSS书写规范

a.CSS样式可细分为3类：自定义样式、重新定义HTML样式、链接状态样式。

a.1样式为设计师自定义的新 CSS 样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”

a.2文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例：“ .no12 ” 、“ .no12-24 ”

a.3HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。样式名“HTML标签”例：hr { border: 1px dotted #333333 }

a.4态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。
该样式写法有2种： a.nav:link    nav.a:link  第一种只能修饰<a>标签中；第二种可以修饰所有包含有<a>标签的其他标签。

页面内的样式加载必须用链接方式<link rel="stylesheet" type="text/css" href="style/style.css">;位于title上方

2.7  注释规范

1. html注释: 注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域;

2. css注释: 注释格式 /*这儿是注释*/;

3. JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;

类命名规则：

  头：header

  内容：content/container

  尾：footer

  导航：nav    

  侧栏：sidebar

  栏目：column

  页面外围控制整体布局宽度：wrapper

  左右中：left right center

  登录条：loginbar

  标志：logo

  广告：banner

  页面主体：main

  热点：hot

  新闻：news

  下载：download

  子导航：subnav

  菜单：menu

  子菜单：submenu

  搜索：search

  友情链接：friendlink

  页脚：footer

  版权：copyright

  滚动：scroll

  内容：content

  标签页：tab

  文章列表：list

  提示信息：msg

  小技巧：tips

  栏目标题：title

  加入：joinus

  指南：guild

  服务：service

  注册：regsiter

  状态：status

  投票：vote

  合作伙伴：partner

(二)注释的写法:

  /* Footer */

  内容区

  /* End Footer */

(三)id的命名:

  (1)页面结构

  容器: container

  页头：header

  内容：content/container

  页面主体：main

  页尾：footer

  导航：nav

  侧栏：sidebar

  栏目：column

  页面外围控制整体布局宽度：wrapper

  左右中：left right center

  (2)导航

  导航：nav

  主导航：mainbav

  子导航：subnav

  顶导航：topnav

  边导航：sidebar

  左导航：leftsidebar

  右导航：rightsidebar

  菜单：menu

  子菜单：submenu

  标题: title

  摘要: summary

  (3)功能

  标志：logo

  广告：banner

  登陆：login

  登录条：loginbar

  注册：regsiter

  搜索：search

  功能区：shop

  标题：title

  加入：joinus

  状态：status

  按钮：btn

  滚动：scroll

  标签页：tab

  文章列表：list

  提示信息：msg

  当前的: current

  小技巧：tips

  图标: icon

  注释：note

  指南：guild

  服务：service

  热点：hot

  新闻：news

  下载：download

  投票：vote

  合作伙伴：partner

  友情链接：link

  版权：copyright\

LOGO的国际标准规范

为了便于INTERNET上信息的传播，有了这样的一整套关于网站LOGO的标准，目前有三种规格：
 88*31 互联网上最普遍的LOGO规格。
120*60 一般大小LOGO。
120*90 大型LOGO。