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
web端登录⼩技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
</code>
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的命名原则
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 样式，影响被使⽤本样式的区域，⽤于完成⽹页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”
⽂字样式样式名“.no”+“字号”+“⾏距”+“颜⾊缩写”例：“ .no12 ” 、“ .no12-24 ”
2. 义HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，⽤于统⼀⽹页中某⼀标签的样式定义。样式
名“HTML标签”例：hr { border: 1px dotted #333333 }
3. 态样式为设计师对链接不同状态设定特殊样式，影响被使⽤本样式区域中的链接。
该样式写法有2种： a.nav:link    nav.a:link  第⼀种只能修饰<span class="hljs-tag"><<span class="hljs-title">a</span>>
</span>标签中；第⼆种可以修饰所有包含有<span class="hljs-tag"><<span class="hljs-title">a</span>></span>标签的其他标签。
页⾯内的样式加载必须⽤链接⽅式<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-
attribute">rel</span>=<span class="hljs-value">”stylesheet”</span> <span class="hljs-attribute">type</span>=<span
class="hljs-value">”text</span>/<span class="hljs-attribute">css</span>” <span class="hljs-attribute">href</span>=<span class="hljs-value">”style</span>/<span class="hljs-attribute">style.css</span>”></span>
注意细则：
1. 协作开发及分⼯: i会根据各个模块, 同时根据页⾯相似程序, 事先写好⼤体框架⽂件, 分配给前端⼈员实现内部结构&；表现&⾏为; 共⽤css⽂件base.css由i书写, 协作开发过程中, 每个页⾯请务必都要引⼊, 此⽂件包含reset及头部底部样式, 此⽂件不可随意修改;
2. class与id的使⽤: id是唯⼀的并是⽗级的, class是可以重复的并是⼦级的, 所以id仅使⽤在⼤的模块上, class可⽤在重复使⽤率⾼及⼦级中; id原则上都是由我分发框架⽂件时命名的, 为JavaScript预留钩⼦的除外;
3. 为JavaScript预留钩⼦的命名, 请以 js_ 起始, ⽐如: js_hide, js_show;
4. class与id命名: ⼤的框架命名⽐如header/footer/wrapper/left/right之类的在2中由i统⼀命名.其他样式名称由 ⼩写英⽂ & 数字& _ 来组合命名, 如i_comment, fontred, width200; 避免使⽤中⽂拼⾳, 尽量使⽤简易的单词组合; 总之, 命名要语义化, 简明化.
5. 规避class与id命名(此条重要, 若有不明⽩请及时与i沟通):
a, 通过从属写法规避, ⽰例见d;
b, 取⽗级元素id/class命名部分命名, ⽰例见d;
c, 重复使⽤率⾼的命名, 请以⾃⼰代号加下划线起始, ⽐如i_clear;
d, a,b两条, 适⽤于在2中已建好框架的页⾯, 如, 要在2中已建好框架的页⾯代码<span class="hljs-tag"><<span class="hljs-
title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">”mainnav”</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>中加⼊新的div元素,
按a命名法则: <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span
class="hljs-value">”mainnav”</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span
class="hljs-attribute">class</span>=<span class="hljs-value">”firstnav”</span>></span>…<span class="hljs-
tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>>
</span>,
样式写法:  #mainnav  .firstnav{…….}
按b命名法则: <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span
class="hljs-value">”mainnav”</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span
class="hljs-attribute">class</span>=<span class="hljs-value">”main_firstnav”</span>></span>…<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>>
</span>,
样式写法:  .main_firstnav{…….}
6. css属性书写顺序, 建议遵循 布局定位属性–>⾃⾝属性–>⽂本属性–>；其他属性. 此条可根据⾃⾝习惯书写, 但尽量保证同类属性写在⼀起. 属性列举: 布局定位属性主要包括: margin、padding、float（包括clear）、position（相应的 top,right,bottom,left）、display、visibility、overflow等；⾃⾝属性主要包括: width & height & background & border; ⽂本属性主要包括：font、color、text-align、text-d
ecoration、text-indent等；其他属性包括: list-style(列表样式)、vertical-vlign、cursor、z-index(层

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