web前端开发规范-好好装修解析

专心，专注，专业好好装修咨询热线：400-990-3069Web前端开发规范1.文件目录命名规范2.XHTML文件命名规范3.XHTML代码规范4.图片制作规范5.CSS编写规范文件目录命名规范文件目录命名原则以最少的层级提供最清晰简便的访问结构，并能够使所有项目参与者清晰理解和记忆每一个文件目录的意义，从而可以更方便的查找、修改、移植等管理操作，提高工作效率。文件目录名称统一用小写的英文单词，长度不超过20个字符。如果需要加数字以区分页面文件，可以在单词后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件目录的名称。文件目录名称的命名要与所定义的内容语义接近或结构对应，字母要小写，需要两个以上单词表达时，单词之间用”_”连接，不要超过四个单词，如果单词过长，取其前三个字母。根目录一般只存放index.htm或default.htm(可以根据需要更改扩展名)以及其他必须的系统文件；每个主要栏目开设一个相应的独立目录；以栏目名称英文单词或单词缩写命名；例如：根目录下的images目录用于存放各页面都要使用的所有图片（单独的图片多的要在images下建子目录并根据语义命名）；根目录的javascript目录存放所有JS脚本文件；所有CSS文件存放在根目录下css目录；等等。目录结构命名规范文件目录命名原则专心，专注，专业好好装修咨询热线：400-990-3069清晰的站点目录结构方便文件的维护和管理，同时对增加搜索引擎的友好度和移植也有着重要的影响。以下为站点文件目录内容参考：include文件目录：存放公共结构eg：头部底部static文件目录：表现层和行为层（样式，字体，图片，动画，视频，js等）templates文件目录：模版文件XHTML代码规范PC端页面结构示例DOCTYPE文档声明标准代码!DOCTYPEhtmlhtmllang=zh-CNheadmetacharset=utf-8metahttp-equiv=X-UA-Compatiblecontent=IE=edge,chrome=1metaname=viewportcontent=width=device-width,initial-scale=1.0!—上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！—metaname=“description”content=“网页描述内容metaname=“keywords”content=“关键字1,关键字2,关键字3,关键字4,专心，专注，专业好好装修咨询热线：400-990-3069linkrel=iconhref===image/x-icontitle页面标题/titlelinkhref=style.cssrel=stylesheetscriptsrc=jquery.min.js/script/headbody/body/html多媒体终端页面结构示例!doctypehtmlhtmlclass=no-jsheadmetacharset=utf-8metahttp-equiv=X-UA-Compatiblecontent=IE=edgemetaname=descriptioncontent=metaname=keywordscontent=metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=notitleHellohaohaozhangxiu/title!--Setrenderenginefor360browser--metaname=renderercontent=webkit!--NoBaiduSiteapp--metahttp-equiv=Cache-Controlcontent=no-siteapp/专心，专注，专业好好装修咨询热线：400-990-3069linkrel=icontype=image/pnghref=assets/i/favicon.png!--AddtohomescreenforChromeonAndroid--metaname=mobile-web-app-capablecontent=yeslinkrel=iconsizes=192x192href=assets/i/[e-mail]!--AddtohomescreenforSafarioniOS--metaname=apple-mobile-web-app-capablecontent=yesmetaname=apple-mobile-web-app-status-bar-stylecontent=blackmetaname=apple-mobile-web-app-titlecontent=AmazeUI/linkrel=apple-touch-icon-precomposedhref=assets/i/[e-mail]!--TileiconforWin8(144x144+tilecolor)--metaname=msapplication-TileImagecontent=assets/i/[e-mail]=msapplication-TileColorcontent=#0e90d2linkrel=stylesheethref=assets/css/common.min.csslinkrel=stylesheethref=assets/css/app.css/headbodypHellohaohaozhangxiu专心，专注，专业好好装修咨询热线：400-990-3069/p!--在这里编写你的代码--!--[if(gteIE9)|!(IE)]!--scriptsrc=assets/js/jquery.min.js/script!--![endif]--!--[iflteIE8]scriptsrc===assets/js/amazeui.ie8polyfill.min.js/script![endif]--scriptsrc=assets/js/common.min.js/script/body/html如果使用img或br、hr、input这样的单体标签，那么必须使用空格加正斜线作为结束，例如：img/br/hr/input/必须设置图片的alt属性alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对使用不同页面的浏览器的用户来说非常有帮助，而且对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。另外，设置alt属性有利于提高网站的搜索频率。值得注意的是我们要添加有意义的alt属性而不是添加毫无意义的注释。正确的写法：imgsrc=logo.gifalt=中国数码公司标志/错误的写法：imgsrc=logo.gifalt=logo.gif/所有的特殊符号编码化专心，专注，专业好好装修咨询热线：400-990-3069，不是标签的一部分，必须被编码为<，不是标签的一部分，必须被编码为>&，不是实体的一部分的，必须被编码为&空格，必须被编码为 主要的区域要加上注释例如网站的内容区需要加上如下注释：!--网页内容区部分--尽量减少注释的内容不要在注释内容中使用“--”。“--”只能使用在XHTML注释的开头和结束，不能出现在注释的内容中。下面的写法都是不允许的：!--Invalid--andsoistheclassicseparatorbelow--!------------------------------------由于浏览器的兼容性对XHTML页面的解析不同，过多的注释会造成一些页面错乱的问题；因此尽可能的缩写或减少页面代码中的注释内容；例如，XHTML标准注释代码如下：!--网页导航部分--标签必须合理嵌套因为XHTML要求有严谨的结构，因此所有的标记都必须按合理顺序嵌套。合理的嵌套格式：divulli/li/ul/div不合理嵌套格式：divpdiv/ph1到h5的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。内联元素标签内不可以嵌套块元素标签，例如：lidiv/div/li必须使用统一的后缀为了统一管理，静态页面必须使用统一的页面后缀.html,例如：首页文件名为index.html。index.html文件和index.htm文件两个不同的文件。正确使用XHTML标签定义页面内容每一个XHTML标签都有自己的语义，所以在定义内容时请正确使用每个语义标签。标题：h1~6标题/h1~6专心，专注，专业好好装修咨询热线：400-990-3069表格：table表格/table、caption表格的标题/caption、tr行/tr、th表头/th、td列/td布局：div布局/div列表：ul无序列表/ul、ol有序列表/ol、li列表项/li块元素：span块元素/span段落：p段落/p链接：a链接/a表单：form表单/form其他标签：br/换行、img/图片、select下拉列表或滚动列表/select、option列表选项/option、input/文本框或按钮、hr/水平分界线禁止在页面使用表现级标签元素表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgcolor、border、bordercolor等。禁止以下不符合web标准的标签：font/font、b/b、u/u、i/iTable标签定义规范避免嵌套过多的表格，嵌套尽量不要超过3层。对于不可避免的表格嵌套，每级table以一个“TAB”键缩进，确保代码层次分明；建议不要采用thead、tfoot以及tbody元素。表格的样式应当统一使用css定义；表格的填充（cellpadding）、间距（cellspacing）属于内置属性，无法用css定义控制；表格的宽度（width）避免使用数值控制，应当用百分比值来控制，以方便UI的制作修改和界面的升级拓展；表格线的是通过设置表格的属性参数填充（cellpadding）、间距（cellspacing）来实现表格线的粗细宽度；然后分别定义表格的背景色和表格列的背景色来实现表格线颜色；页面宽度的设定采用百分比定义页面宽度代码格式：例：width：100%；专心，专注，专业好好装修咨询热线：400-990-3069解释说明：采用%百分