WEB前端编码规范

XXXX有限公司XXXXXXXX管理平台Web前端代码编写规范文件状态：[√]草稿[]正式发布[]正在修改文件标识：当前版本：1.0作者：李光强完成日期：2016.1.30XXXXXX2016年1月修改历史编号修订后版本号修订人修订内容简述修订日期11.0李光强起草2016.1.30第一部分HTML规范HTML并不是一种编程语言，而是一种标记语言，它没有任何真正的编程语言中的循环或是流程控制语句。然而，HTML代码的格式和风格是非常重要的，因为要经常对HTML代码进行维护和修改，因此HTML代码必须有很清晰的逻辑结构和布局，而使其易懂和易于维护。HTML语言是不区分大小写的，但为改善可读性，规定小写所有字母（除最上一行引用外）。与HTML不一样，XHTML对大小写是敏感的，title和TITLE是不同的标签。具体规范如下：1.文件定义!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN==Content-Typecontent=text/html;charset=utf-8/2.网站head区代码规范：head区是指head和/head之间的内容。必须加入的标签：2.1公司版权注释!---文件：XXX.html说明：说明本HTML是用于什么功能作者：李四时间：2016/1/30---2.2网页显示字符集简体中文：metahttp-equiv=Content-Typecontent=text/html;charset=utf-8繁体中文：metahttp-equiv=Content-Typecontent=text/html;charset=BIG5英语：metahttp-equiv=Content-Typecontent=text/html;charset=iso-8859-12.3作者与版权信息此处用于存储开发公司版权信息，如：metaname=authorcontent==copyrightcontent=版权所有/2.4网页的css,javascript规范在引用CSS和JS文件时，统一放置在head/head中，先放CSS引用，再放js引用。linkhref=style/style.cssrel=stylesheettype=text/css/html中javascript的书写：scriptlanguage=javascripttype=text/javascript/script2.5网页标题Title中使用“-”分割，如：设备管理平台-运维系统。2.6设置搜索关键词metaname=keywordscontent=/百度关键词搜索指数：，在这个工具里，可以看到一些常用关键词的每日搜索次数。热门词汇，目前收索量最多的词汇。可以查看百度热词榜，关键字工具：查询特定关键词的常见查询及扩展匹配。KEYWRODS关键字最多不超过5个建议长度：小于等于100个汉字，如果使用的网页编码是UTF-8，不同关键字之间用英文“,”分隔。2.7网站简介metaname=descriptioncontent=/description是描述网页内容的，因此最好是可以用一句话来概括本网页的主题内容。description不要超过255个字符，搜索引擎索引一般都会索引Description的前255个字符，因此，这255个字符是做搜索引擎优化的关键。如果使用的网页编码是UTF-8，那么在Description中的标点符号最好都使用英文，例如英文的逗号、句号等。如果是中文的话，那么就使用中文的标点符号即可。2.8其它标签[非必需]1.设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅，这样有利于页面信息。metahttp-equiv=expirescontent=wed,26feb200908:21:57gmt2.禁止浏览器从本地机的缓存中调阅页面内容。metahttp-equiv=pragmacontent=no-cache3.用来防止别人在框架里调用你的页面。metahttp-equiv=window-targetcontent=_top4.自动跳转。metahttp-equiv=refreshcontent=5;url=秒。5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。metaname=robotscontent=noneCONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。6.收藏夹图标linkrel=shortcuticonhref=/favicon.icotype=image/x-icon/图片大小16px*16px7.订阅RSS浏览是一种描述和同步网站内容的格式。用户可以通过RSS阅读器订阅。linkhref=”abc.aspx”title=”新现代教育网”type=”application/rss+xml”rel=”alternte”/2.9完整示例3.html中元素的书写：body区域标签3.1段落段落使用p标签进行定义。pThisisaparagraph/p3.2标题即正文标题一般用h1/h1标签，最好和title标签的内容有关联。标题使用h1至h6标签进行定义。h1定义最大的标题。h6定义最小的标题。h1Thisisaheading/h1h2Thisisaheading/h2h3Thisisaheading/h3h4Thisisaheading/h4h5Thisisaheading/h5h6Thisisaheading/h6文章中的小标题一定也要加粗。可以把网页中的重要内容做成这样。用户不用登陆这个网页就可看到更新的内容。3.3字体的设置标签换行：br/字体修饰不要使用fontstrong等进行标注，一般使用css样式进行字体样式排版3.4注意事项1.body为了保证浏览器的兼容性，必须设置页面背景：bodybgcolor=#FFFFFF2.关闭所有的标签打开的标签必须关闭，例如p，当然还有一种关闭方式，如：br/。即：一定要有结束标记。3.属性值用双引号“”括起来,属性统一使用小写例如：imgheight=60width=760src=images/logo.gif/4.给所有的属性赋值不正确的写法：input……checked/正确的写法为：input……checked=checked/5.标签要合理嵌套不正确的写法：divh1正确的写法为：divh1特殊字符用编码标识如用<表示，用>表示。8.网页中图片优化一定要加alt属性，alt属性指定了当图片不能显示的时候就显示供替换文本。内容最好与关键词相关。如：imgsrc=images/logo.gifalt=网站LOGO/一些小图标最好用.png或.gif格式图片，比如说箭头，文章列表前的图标等，在CSS中做成背景。这些小图标最好做一张图片，用CSS来定位。9.用结构化的元素输出内容ulli新现代/lili新现代/lili新现代/li/ul或者使用dldt/dtdd/dd/dl10．标签要有缩进，便于代码阅读修改。11、tr、td必须定义在table之间；tabletbodytrtd……/td…./tr/tbody/table注：tbody绝对不可以省略。12、button按钮必须定义在form之间，否则netscape不支持；formaction=”……”method=”post”inputtype=”button”name=”but”value=”back”/form13、html注释(1)每一独立部分都要表明注释。例如：!—右边begin--!--右边end--!—左边begin--!—左边end--块代码的注释!—头部begin--大量代码块，使用此种样式，方便阅读!—头部end--(2)注释要用描述性语言，能够清楚的表达每一部分的意思。4.HTML元素的排序规则能够使用的HTML元素包括：div、p、ul、table、span、input、select等。基本上div、table、ul、p都属于结构性比较强的元素，而span、input则是比较弱的元素，因此不允许有span嵌套div、table等等的情况出现，span可以嵌套input,可以嵌套span。在写页面的时候可以先不考虑界面呈现，按照这样的规则，把数据直接绑定到HTML元素的节点上。5.九大原则原则一：一般要写兼容多种浏览器的网页，最省事的方法就先写适合chrome的样式，并在chrome进行调度。测试时可以使用多种浏览器。原则二：逐步叠加的方式，如果需要用这个样式的模块很多，并且会存在些许的不同，千万不要把样式一步写到位，最好把框架性的先写好，细节性的留到第二个步骤，甚至第三个步骤，当然最好步骤不要超过三步，这样很不利于维护。由若干个二级定义对一级定义进行补充，这样的既可以减少代码，又可以减少繁多的CLASS命名。不要轻易修改共用的CSS，否则可能会影响其它页面。在每个一级CSS前添加注释，说明哪些页面使用了该CSS。原则三：从总到分。顺序应该是这样：总体需要用到的结构模块二级模块细节；并且这个文档最不容易修改的处于最上端，频繁用于修改的在末端。最忌讳即兴发挥，这样写出的东西经不起推敲，稍有变化就要忙得乱成一团。结构性的东西应该慎重精细。原则四：尽量把能够放在一组的小图标或者图片放在一个图片文件里，这样的好处有很多。1、图片文件的总量会变小；2、利于下载，太多的小图片下载效果是不理想的，常常会发现这个图片出来，那个没出来，这样在写样式的时候只需要写一个总体的，对于具体的要显示的只需要标一个位置，非常省时间，样式也很精炼；3、显而易见，这样做非常便于管理，替换或新增的时候工作量很小。原则五：切图的原则，应该切大的图绝不切小，应该切小的绝不切大，能够用颜色代替的绝不切图。把一个大图切成很多份并不一定能够加快页面的显示速度，相反会浪费很多不必要的带宽。不光要控制图片文件的多少，还要考虑到这样切会不会造成页面增加许多额外的代码。原则六：图片使用能名称表达图片意义的名词命名，尽量不要使用编号命名。原则七：涉及多行多列的特别是列宽有不固定的，坚决用表格，千万不要为了DIV而DIV。多个图片规则排列时，可以使用dldt/dtdd/dd/dl。原则八：尽可能不把样式直接写到元素的标签里（除非这个样式出现的几率特别小，有相当程度的偶然性）。原则九：尽量不要用ID来定义或索引样式，ID的唯一性比较高，且用ID索引样式效率非常低而且兼容性的问题也比较明显。6．文件命名原则6.1前台文件组织在前台页面文件中，每个大类功能模块（子系统）单独创建一个文件夹，使用与之相关的有意义的英文名词命名。例如有一个系统包括后台管理（admin）、前台商城（shop）、会员中心（member