web前端开发规范-好好装修.doc

专心，专注，专业Web前端开发规范1.文件目录命名规范2.XHTML文件命名规范3.XHTML代码规范4.图片制作规范5.CSS编写规范文件目录命名规范文件目录命名原则以最少的层级提供最清晰简便的访问结构，并能够使所有项目参与者清晰理解和记忆每一个文件目录的意义，从而可以更方便的查找、修改、移植等管理操作，提高工作效率。文件目录名称统一用小写的英文单词，长度不超过20个字符。如果需要加数字以区分页面文件，可以在单词后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件目录的名称。文件目录名称的命名要与所定义的内容语义接近或结构对应，字母要小写，需要两个以上单词表达时，单词之间用”_”连接，不要超过四个单词，如果单词过长，取其前三个字母。根目录一般只存放index.htm或default.htm(可以根据需要更改扩展名)以及其他必须的系统文件；每个主要栏目开设一个相应的独立目录；以栏目名称英文单词或单词缩写命名；例如：根目录下的images目录用于存放各页面都要使用的所有图片（单独的图片多的要在images下建子目录并根据语义命名）；根目录的javascript目录存放所有JS脚本文件；所有CSS文件存放在根目录下css目录；等等。目录结构命名规范文件目录命名原则清晰的站点目录结构方便文件的维护和管理，同时对增加搜索引擎的友好度和移植也有着重要的影响。以下为站点文件目录内容参考：include文件目录：存放公共结构 eg：头部底部static文件目录：表现层和行为层（样式，字体，图片，动画，视频，js等）templates 文件目录：模版文件XHTML代码规范PC端页面结构示例DOCTYPE文档声明标准代码 页面标题 多媒体终端页面结构示例 Hello hao hao zhangxiu Hello hao hao zhangxiu!-如果使用img或 br、hr、input这样的单体标签，那么必须使用空格加正斜线作为结束，例如： 必须设置图片的alt属性alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对使用不同页面的浏览器的用户来说非常有帮助，而且对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。另外，设置alt属性有利于提高网站的搜索频率。值得注意的是我们要添加有意义的alt属性而不是添加毫无意义的注释。正确的写法：错误的写法：所有的特殊符号编码化，不是标签的一部分，必须被编码为> &，不是实体的一部分的，必须被编码为& 空格，必须被编码为 主要的区域要加上注释例如网站的内容区需要加上如下注释：尽量减少注释的内容 不要在注释内容中使用“-” 。 “-” 只能使用在 XHTML 注释的开头和结束，不能出现在注释的内容中。下面的写法都是不允许的： 由于浏览器的兼容性对XHTML页面的解析不同，过多的注释会造成一些页面错乱的问题；因此尽可能的缩写或减少页面代码中的注释内容；例如，XHTML标准注释代码如下：标签必须合理嵌套因为XHTML要求有严谨的结构，因此所有的标记都必须按合理顺序嵌套。合理的嵌套格式：不合理嵌套格式：到的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。内联元素标签内不可以嵌套块元素标签，例如： 必须使用统一的后缀为了统一管理，静态页面必须使用统一的页面后缀.html,例如：首页文件名为index.html。index.html文件和index.htm文件两个不同的文件。正确使用XHTML标签定义页面内容每一个XHTML标签都有自己的语义，所以在定义内容时请正确使用每个语义标签。标题：标题表格：表格、表格的标题、行、表头、列布局：布局列表：无序列表、有序列表、列表项块元素：块元素段落：段落链接：链接表单：表单其他标签：换行 、图片、下拉列表或滚动列表、列表选项、文本框或按钮、 水平分界线禁止在页面使用表现级标签元素表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgcolor、border、bordercolor等。禁止以下不符合web标准的标签：、 、 Table标签定义规范避免嵌套过多的表格，嵌套尽量不要超过3层。对于不可避免的表格嵌套，每级table以一个“TAB”键缩进，确保代码层次分明； 建议不要采用thead、tfoot 以及 tbody 元素。表格的样式应当统一使用css定义；表格的填充（cellpadding）、间距（cellspacing）属于内置属性，无法用css定义控制；表格的宽度（width）避免使用数值控制，应当用百分比值来控制，以方便UI的制作修改和界面的升级拓展；表格线的是通过设置表格的属性参数填充（cellpadding）、间距（cellspacing）来实现表格线的粗细宽度；然后分别定义表格的背景色和表格列的背景色来实现表格线颜色；页面宽度的设定采用百分比定义页面宽度代码格式：例：width：100%；解释说明：采用%百分比设定页面宽度时，可以随着浏览器宽度的改变而改变。在制作过程中一定要考虑好页面内容的表现，要做到内容在不同宽度浏览器中显示时布局要整齐、内容排版比例协调。采用固定像素定义页面宽度代码格式：例：width：1004px；解释说明：采用固定值设定页面宽度时，页面不会随着浏览器宽度的改变而改变。Html代码格式解释说明：严格按照DOM树结构进行缩进书写; 图片制作规范图片命名规范名称为英文单词，如果需要加数字表达的，可以在单词或拼音后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符做为文件的名称。图片文件名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，用下划线分开两个单词，尽量不要超过三个单词但一定要表达对意思，如果单词过长，取其前三个字母。图片名称分为头尾两部分，中间用下划线隔开。通用性的图片名称根据语义来命名头部分表示此图片的大类性质。例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner；标志性的图片我们取名为：logo；在页面上位置不固定并且带有链接的小图片我们取名为button；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu；装饰用的照片我们取名：pic；不带链接表示标题的图片我们取名：title依照此原则类推。尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_sina.gif menu_aboutus.gif menu_job.gif logo_police.gif logo_national.gif pic._people.jpg pic_hill.jpg遇到站点栏目较多时图片命名可按照结构一级级表示出来级与级之间用下划线“_”连结。例如：homepage_menu_content_left.gif图片制作规范对于图像色彩不丰富，其色值不超过256以内的图片，请使用GIF格式图片。例：LOGO、单色背景图片等图片。对于图像色彩比较丰富，其色值超过256的图片，请使用JPEG格式图片。例：绚丽多彩的照片、丰富的页面插图、渐变色的图片等。注意：把握好图片质量和图片字节大小之间的平衡图片制作的关键。如果图像不包含任何信息,仅是作为装饰使用，请将该图片从HTML中分离出来。如果图片作为内容放在HTML代码里，则必须制定高度和宽度（需要动态更新，并且图片大小不固定的除外）。 原因：减少页面reflow次数，加快显示。图片切割原则图片切割原则：切割数量最少化、字节压缩最小化、表现内容完整化、图像质量清晰化。解释说明：网页加载速度的关键，是减少图片的数量。因为客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数也就越多，造成图片显示延迟的可能性也就越大，所以尽量不要把图片切割成太多的图。图片的优化原则：使用合适的图片格式对图片进行不失真压缩，使图片的字节数保持最小化。现阶段主要应用png图片JPEG 是用于压缩连续色调图像（如照片）的标准格式。压缩时在图像质量和文件尺寸之间找到平衡点；80%的压缩率是比较合适在网页中使用的。CSS代码规范CSS文件命名规范CSS文件名称统一用小字的英文单词，长度不超过20个字符。如果需要加数字和下划线以区分页面文件，可以在单词后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件的名称CSS文件名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，第二个单词首字母大写，不要超过四个单词，如果单词过长，取其前三个字母。CSS文件名称命名参考列表 中文名称英文名称中文名称英文名称公用样式common.css 皮肤样式skin.css 专栏样式columns.css打印样式print.css布局样式layout.css默认样式default.css控件样式userControls.css模块样式module.css后台样式webmanage.css文字样式font.css导航样式nav.css菜单样式menu.cssCSS文件的编码格式代码格式：charset utf-8;解释说明：如果项目对编码有要求，则需遵守指定的编码要求；如果没有要求则默认为国际编码utf-8。CSS文件的引入所有的CSS的定义尽量书写在外部样式表中。除特殊需要外，页面中禁止使用style进行CSS定义。CSS文件引入的标准格式: CSS定义必须采用统一的数值单位为了便于统一与修改，建议在某一类型的单位上使用同一的数学单位，以保持各浏览器均能够统一解析。颜色值应当统一采用十六进制的颜色代码；字体大小应当采用像素px来定义；行高应当采用百分比%来定义；零值的缩写css中值都必须带明确的单位，0值除外，可以省去单位。例如bodymragin:0;尽量避免使用id定义CSS在页面中，除特殊需要外，尽量的少用或避免使用id来定义程序页面的CSS样式；以免给程序页面的开发和修改带来不必要的麻烦；解决方法就是统一使用class（类）来控制它们的样式； CSS属性顺序化显示属性display * list-style * position * float * clear自身属性width * height * margin * padding * border * background文本属性color * font * text-decoration * text-alignvertical-align * white-space * other text * content属性值书写顺序外边框margin和内边距padding的书写顺序应当按照“上右下左”的顺时针顺序书写属性数值。伪类书写顺序伪类必须按照顺序定义：当你用CSS来定义链接的多个状态伪类样式时，应当遵循正确书写顺序。正确的顺序是：:link :visited :hover :active。抽取第一个字母是“LVHA”。否则，书写顺序错误将导致CSS效果将无法正常生效显示。注释的写法CSS文件相关信息放在文件中最上部分/* * 创建人: Conner * 创建日期: 2015-05-26 * 功能描述: * 版本: 1.0*/单个定义样式信息/* 单个样式 */CSSHack注释使用了CSSHack，一定要添加注释，并且要写明为什么使用此CSSHack。例如：.top width:200px; *width:210px;/*IE7*/ _width:208px;/*IE6*/ 代码书写格式/* 内容部分样式 */.content width：100%属性缩写的规则通过使用CSS属性缩写以及其他的一些简单技巧，可以在很大程度上减少样式表的大小，从而提高页面加载样式文件的速度，进一步提高网站运行速度。有关CSS属性缩写详细内容可参阅DIV+CSS布局与实例应用Hack使用规则由于不同的浏览器，比如IE 6,IE7, Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。通用样式定义标准整个站点的背景色（background）：缺省时定义为白色；中文大小(font-size)：12px；中文字体(font-family)：宋体；或者微软雅黑，黑体； 手机端可以用 华文细黑 定义字宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei华文细黑 STHeiti Light STXihei不要用中文，尽量用英文 英文字体(font-family)：Arial；行距(line-height)：150%；空白(margin)：0；间隙(padding)：0；字体链接颜色：a:link、a:visited、a:active、a:hover图片边框(border)：0；输入框定义(input)按钮定义(button)注：在定义样式文件时，一定要注意默认值这个问题，因为不同浏览器对默认值的解释都不一样，所以在定义属性时，一定要慎重考虑并定义标签元素的默认值。CSS命名原则按web页面的结构布局位置命名。网站整体通用的命名规则以网页顶部、中部、底部三个大区块位置及其内部位置进行划分与命名。例如：网页顶部定义的样式命名为：class=”header”； 网页中部定义的样式命名为：class=”main”； 网页底部定义的样式命名为：class=”footer”；按照web页面的区块命名。在网页中部定义中，我们应当按其位置划分为左右两个区块或者左、中、右三个区块：网页中部左侧运用的样式命名为：class=”left”；网页中部中间运用的样式命名为：class=”middle”；网页中部右侧运用的样式命名为：class=”right”；按功能模块命名。对于web网站中模块样式定义，我们应当按照模块名称定义模块的布局样式。例如：登录模块，我们应当这样命名：class=”login”按照组件名称命名。使用组件制作的网站，对于组件的样式，我们通常采用组件的名称命名样式的名称；如果一个组件有多个样式，我们可以在名称的后面加上数字以示区分，例如：某组件的第一种样式命名为：class=” xxx1”；它组件的第二种样式命名为：class=” xxx2”；id和class命名规范id和class命名，要用英文单词作为其名称，如果需要加数字表述的，可以在单词后面添加数字，禁止用数字开头为其名称，禁止用中文为其名称，禁止用特殊字符为其名称。首字母小写，第二个单词首字母大写，不要超过四个单词，如果单词太长，取其前三位字母。例如：两个单词class名称：.productlist 三个单词class名称：.productListLeft id和class命名采用所定义内容的英文单词或组合命名。不建议使用id来定义样式，因与后期开发人员建立的id名称有预期冲突，尽可能使用class来定义，而且class有更多的资源重复利用的可能。同一类型的id和class名称第一个单词要一致。例如：字体，红色字体：.fontRed 绿色字体：.fontGreen 加粗字体：.fontBoldid和class命名参考列表页面内容说明Id/class名称页面内容说明Id/class名称页面内容说明Id/class名称页头部分header帮助help页尾footer内容区content注销logout导航nav页面主体main关键词keyword主导航mainNav菜单menu社区forum子导航subNav导航nav论坛bbs顶导航topNav左中右left center right博客blog边导航sideBar上中下top middle bottom按钮button左导航leftSideBar标志logo输入框input右导航rightSideBar广告ad图片img产品products登陆login横幅广告bananer产品描述productsDes注册register常见问题faq产品价格productsPri 搜索search提示信息msg产品评论productsRev 公告bulletin下载download缩略图screenshot图标icon新闻news信誉credits注释note列表list法律声明legal服务service当前的current摘要summary页面内容说明Id/class名称页面内容说明Id/class名称页面内容说明Id/class名称菜单menu功能区shop标题title子菜单subMenu 状态status加入joinUs按钮button颜色color*滚动scroll热点hot合作伙伴partner面包屑crumb 推荐recommend 友情链接friendLink排行榜*top10标签页tag指南guild评论review 字体font*圆角 corner 特别的special投票vote工具条toolBar 资源source箭头arrow版权信息copyright小技巧tips商标trademark步骤step注释：(如购物车，收银台) (即页面所处位置导航提示，或称当前位置）CSS缩写规则颜色缩写：16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;字体(fonts)font：font-style | font-variant | font-weight | font-size | line-height | font-family如：p font:italic normal bold 12px/20px 宋体; font-style：设置对象中的字体样式font-variant：设置对象中的文本是否为小型的大型字母font-weight：设置对象中的文本字体的粗细font-size：设置对象中的字体大小line-height：设置对象的行高font-family：设置对象中文本的字体名称注意：如果你缩写字体定义，至少要定义font-size和font-family两个值。margin与padding边距缩写margin：margin-top | margin-right | margin-bottom | margin-leftpadding：padding-top | padding-right | padding-bottom | padding-left默认状态下需要提供4个参数，属性值的书写顺序分别为上、右、下、左，也可以使用1，2，3参数来进行编写，如：使用一个参数表示上下左右的属性值都一致：p margin:10px;padding:5px;使用两个参数，表示对上下或左右的样式控制：p margin:20px 10px; padding:5px 10px;使用3个参数表示上边距，左右边距，下边距：p margin:20px 10px 30px; padding:5px 10px 15px; 使用4个参数，分别表示上边距，右边距，下边距，左边距p margin:20px 10px 30px 40px；padding:5px 10px 15px 20px; border边距缩写border：border-width | border-style | color 如：p border：1px solid #ff0000 ; border对于4个边都可以单独应用此样式，语法格式如下：border-top：border-width | border-style | color border-right：border-width | border-style | color border-bottom：border-width | border-style | color border-left：border-width | border-style | color border还为我们提供了对于border-style，border-width，border-color的单独缩写样式 ，语法格式如下：border-width：top | right | bottom | leftborder-color：top | right | bottom | leftborder-style：top | right | bottom | left如：p border-width：1px 2px 3px 4px；border-color：#ffff00 #ffffff #ff0000 #ff00ff；border-style：solid dashed； list列表缩写list-style：list-st