WEB前端编码规范.docx

1、XXXX有限公司XXXXXXXX管理平台Web前端代码编写规范文件状态： 草稿 正式发布 正在修改文件标识：当前版本：1.0作 者：李光强完成日期：2016.1.30XXXXXX2016年1月修改历史编号修订后版本号修订人修订内容简述修订日期11.0李光强起草2016.1.30 第一部分 HTML规范HTML并不是一种编程语言，而是一种标记语言，它没有任何真正的编程语言中的循环或是流程控制语句。然而，HTML代码的格式和风格是非常重要的，因为要经常对HTML代码进行维护和修改，因此HTML代码必须有很清晰的逻辑结构和布局，而使其易懂和易于维护。HTML 语言是不区分大小写的，但为改善可读性，规

2、定小写所有字母（除最上一行引用外）。与HTML不一样，XHTML对大小写是敏感的，和是不同的标签。具体规范如下：1.文件定义2.网站head区代码规范：head区是指和之间的内容。必须加入的标签：2.1公司版权注释2.2网页显示字符集简体中文：繁体中文：英 语：2.3作者与版权信息此处用于存储开发公司版权信息，如：2.4网页的css,javascript规范在引用CSS和JS文件时，统一放置在中，先放CSS引用，再放js引用。html中javascript的书写：2.5网页标题Title中使用“-”分割，如：设备管理平台-运维系统。2.6设置搜索关键词百度关键词搜索指数：热门词汇，目前收索量最

3、多的词汇。可以查看百度热词榜，Google AdWords关键字工具：查询特定关键词的常见查询及扩展匹配。KEYWRODS 关键字最多不超过5个建议长度：小于等于100个汉字，如果使用的网页编码是UTF-8，不同关键字之间用英文“,”分隔。2.7网站简介description是描述网页内容的，因此最好是可以用一句话来概括本网页的主题内容。description不要超过255个字符，搜索引擎索引一般都会索引Description的前255个字符，因此，这255个字符是做搜索引擎优化的关键。如果使用的网页编码是UTF-8，那么在Description中的标点符号最好都使用英文，例如英文的逗号、句号

4、等。如果是中文的话，那么就使用中文的标点符号即可。2.8其它标签非必需1.设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅，这样有利于页面信息。2.禁止浏览器从本地机的缓存中调阅页面内容。3.用来防止别人在框架里调用你的页面。4.自动跳转。 5指时间停留5秒。5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。6.收藏夹图标 图片大小16px*16px7.订阅RSS浏览是一种描述和同步网站内容的格式。用户可以通过RSS阅读器订阅。2.9完整示例3

5、. html中元素的书写：区域标签3.1段落段落使用 标签进行定义。This is a paragraph3.2标题即正文标题一般用标签，最好和title标签的内容有关联。标题使用 至 标签进行定义。 定义最大的标题。 定义最小的标题。This is a headingThis is a headingThis is a headingThis is a headingThis is a headingThis is a heading文章中的小标题一定也要加粗。可以把网页中的重要内容做成这样。用户不用登陆这个网页就可看到更新的内容。3.3字体的设置标签 换行：字体修饰不要使用等进行标注，一般

6、使用css样式进行字体样式排版3.4 注意事项1.为了保证浏览器的兼容性，必须设置页面背景：2.关闭所有的标签打开的标签必须关闭，例如，当然还有一种关闭方式，如：。即：一定要有结束标记。3. 属性值用双引号 “” 括起来,属性统一使用小写例如：4. 给所有的属性赋值不正确的写法：正确的写法为：5.标签要合理嵌套不正确的写法： 正确的写法为：7.特殊字符用编码标识如 用 >表示。8.网页中图片优化一定要加alt属性，alt属性指定了当图片不能显示的时候就显示供替换文本。 内容最好与关键词相关。如：一些小图标最好用.png或.gif格式图片，比如说箭头，文章列表前的图标等，在CSS中做成背景

7、。这些小图标最好做一张图片，用CSS来定位。9.用结构化的元素输出内容新现代新现代新现代或者使用10标签要有缩进，便于代码阅读修改。11、 tr、td必须定义在table之间；.注：tbody绝对不可以省略。12、 button按钮必须定义在form之间，否则netscape不支持；13、html注释(1) 每一独立部分都要表明注释。例如： 块代码的注释 大量代码块，使用此种样式，方便阅读(2) 注释要用描述性语言，能够清楚的表达每一部分的意思。4. HTML元素的排序规则能够使用的HTML元素包括：div、p、ul、table、span、input、select等。基本上div、table、

8、ul、p都属于结构性比较强的元素，而span、input则是比较弱的元素，因此不允许有span嵌套div、table等等的情况出现，span可以嵌套input, 可以嵌套span。在写页面的时候可以先不考虑界面呈现，按照这样的规则，把数据直接绑定到HTML元素的节点上。 5.九大原则原则一：一般要写兼容多种浏览器的网页，最省事的方法就先写适合chrome的样式，并在chrome进行调度。测试时可以使用多种浏览器。原则二：逐步叠加的方式，如果需要用这个样式的模块很多，并且会存在些许的不同，千万不要把样式一步写到位，最好把框架性的先写好，细节性的留到第二个步骤，甚至第三个步骤，当然最好步骤不要超过三步，这样很不利于维护。由若干个二级定义对一级定义进行补充，这样的既可以减少代码，又可以减少