HTML编码规范-（WEB前端命名规范）
HTML编码规范
（⼀）命名规则：
头：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
WEB前端命名规范
web端登录
⼀、规范⽬的
1.1  概述
为提⾼团队协作效率, 便于后台⼈员添加功能及前端后期优化维护, 输出⾼质量的⽂档, 特制订此⽂档. 本规范⽂档⼀经确认, 前端开发⼈员必须按本⽂档规范进⾏⼆、⽂件规范
2.1  ⽂件命名规则
⽂件名称统⼀⽤⼩写的英⽂字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想⼀是使得你⾃⼰和⼯作组的每⼀个成员能够
a.  HTML的命名原则
引⽂件统⼀使⽤index.htm  index.html  index.asp⽂件名（⼩写）
各⼦页命名的原则⾸先应该以栏⽬名的英语翻译取单⼀单词为名称。例如：
关于我们 \ aboutus
信息反馈 \ feedback
产品 \ product
如果栏⽬名称多⽽复杂并不好以英⽂单词命名，则统⼀使⽤该栏⽬名称拼⾳或拼⾳的⾸字母表⽰；
每⼀个⽬录中应该包含⼀个缺省的html ⽂件，⽂件名统⼀⽤index.htm  index.html  index.asp；
b.  图⽚的命名原则
图⽚的名称分为头尾两部分，⽤下划线隔开，头部分表⽰此图⽚的⼤类性质
例如：⼴告、标志、菜单、按钮等等。
放置在页⾯顶部的⼴告、装饰图案等长⽅形的图⽚取名： banner
标志性的图⽚取名为： logo
在页⾯上位置不固定并且带有链接的⼩图⽚我们取名为 button
在页⾯上某⼀个位置连续出现，性质相同的链接栏⽬的图⽚我们取名： menu
装饰⽤的照⽚我们取名： pic
不带链接表⽰标题的图⽚我们取名： title
范例：banner_sohu.gif  banner_sina.gif  menu_aboutus.gif  menu_job.gif  title_news.gif  logo_police.gif  logo_national.gif  pic_people.jpg
⿏标感应效果图⽚命名规范为”图⽚名+_+on/off”。
例如：menu1_on.gif  menu1_off.gif
c.  javascript的命名原则
例如：⼴告条的javascript⽂件名为 ad.js  弹出窗⼝的javascript⽂件名为 pop.js
d.  动态语⾔⽂件命名原则
以性质_描述，描述可以有多个单词，⽤“_”隔开，性质⼀般是该页⾯得概要。
范例：register_form.asp  register_post.asp  topic_lock.asp
2.2  ⽂件存放位置规范
_Root
cn  存放中⽂HTML⽂件
en  存放英⽂HTML⽂件
flash  存放Flash⽂件
images  存放图⽚⽂件
imagestudio 存放PSD源⽂件
flashstudio 存放flash源⽂件
inc 存放include⽂件
library 存放DW库⽂件
media  存放多媒体⽂件
project 存放⼯程项⽬资料
temp    存放客户原始资料
js  存放JavaScript脚本
css 存放CSS⽂件
2.3  CSS 书写规范
基本原则：
CSS样式可细分为3类：⾃定义样式、重新定义HTML样式、链接状态样式。
1. 样式为设计师⾃定义的新 CSS 样式，影响被使⽤本样式的区域，⽤于完成⽹页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shado ⽂字样式样式名“.no”+“字号”+“⾏距”+“颜⾊缩写”例：“ .no12 ” 、“ .no12-24 ”
2. 义HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，⽤于统⼀⽹页中某⼀标签的样式定义。样式名“HTML标签”例：hr { bord
3. 态样式为设计师对链接不同状态设定特殊样式，影响被使⽤本样式区域中的链接。
该样式写法有2种： a.nav:link    nav.a:link  第⼀种只能修饰<a>标签中；第⼆种可以修饰所有包含有<a>标签的其他标签。
页⾯内的样式加载必须⽤链接⽅式<link rel=”stylesheet”type=”text/css” href=”style/style.css”>
注意细则：
1. 协作开发及分⼯: i会根据各个模块, 同时根据页⾯相似程序, 事先写好⼤体框架⽂件, 分配给前端⼈员实现内部结构&表现&⾏为; 共⽤css⽂件base.css由i书写,
2. class与id的使⽤: id是唯⼀的并是⽗级的, class是可以重复的并是⼦级的, 所以id仅使⽤在⼤的模块上, class可⽤在重复使⽤率⾼及⼦级中; id原则上都是由我分
3. 为JavaScript预留钩⼦的命名, 请以 js_ 起始, ⽐如: js_hide, js_show;
4. class与id命名: ⼤的框架命名⽐如header/footer/wrapper/left/right之类的在2中由i统⼀命名.其他样式名称由⼩写英⽂ & 数字 & _ 来组合命名, 如i_comment, f
5. 规避class与id命名(此条重要, 若有不明⽩请及时与i沟通):
a, 通过从属写法规避, ⽰例见d;
b, 取⽗级元素id/class命名部分命名, ⽰例见d;
c, 重复使⽤率⾼的命名, 请以⾃⼰代号加下划线起始, ⽐如i_clear;
d, a,b两条, 适⽤于在2中已建好框架的页⾯, 如, 要在2中已建好框架的页⾯代码<div id=”mainnav”></div>中加⼊新的div元素,
按a命名法则: <div id=”mainnav”><div class=”firstnav”>…</div></div>,
样式写法:  #mainnav  .firstnav{…….}
按b命名法则: <div id=”mainnav”><div class=”main_firstnav”>…</div></div>,
样式写法:  .main_firstnav{…….}
6. css属性书写顺序, 建议遵循布局定位属性–>⾃⾝属性–>⽂本属性–>其他属性. 此条可根据⾃⾝习惯书写, 但尽量保证同类属性写在⼀起. 属性列举: 布局定位属
7. 书写代码前, 考虑并提⾼样式重复使⽤率;
8. 充分利⽤html⾃⾝属性及样式继承原理减少代码量, ⽐如:
<ul class=”list”><li>这⼉是标题列表<span>2010-09-15</span></ul>
定义ul.list li{position:relative}  ul.list li span{position:absolute; right:0}
即可实现⽇期居右显⽰
9. 样式表中中⽂字体名, 请务必转码成unicode码, 以避免编码错误时乱码;
10. 背景图⽚请尽可能使⽤sprite技术, 减⼩http请求, 考虑到多⼈协作开发, sprite按模块制作;
11. 使⽤table标签时(尽量避免使⽤table标签), 请不要⽤width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利⽤table⾃⾝私有属性分离
12. 杜绝使⽤<meta http-equiv=”X-UA-Compatible”content=”IE=7″ />兼容ie8;
13. ⽤png图⽚做图⽚时, 要求图⽚格式为png-8格式，若png-8实在影响图⽚质量或其中有半透明效果, 请为ie6单独定义背景:
background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
14. 避免兼容性属性的使⽤, ⽐如text-shadow || css3的相关属性;
15. 减少使⽤影响性能的属性, ⽐如position:absolute || float ;
16. 必须为⼤区块样式添加注释, ⼩区块适量注释;
17. 代码缩进与格式: 建议单⾏书写, 可根据⾃⾝习惯, 后期优化i会统⼀处理;
命名规则：
头：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
(⼆)注释的写法:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。