WEB前端编码规范

XXXX公司XXXXXXXX管理平台Web前端代码创建规范文件状态： 草稿 正式宣布 正在更改文件id :当前版本：1.0作者：李光强度完成日期：2016.1.30XXXXXX2016年1月修改历史编号修订后版本号修订者修订内容概要修订日期11.0李光强度起草2016.1.30第一个HTML规范HTML不是编程语言，而是标记语言，没有真正的编程语言环路或过程控制语句。 但是，HTML代码的格式和样式很重要。 为了经常维护和修改HTML代码，HTML代码必须具有明确的逻辑结构和布局，并且必须易于理解和维护。HTML语言不区分大小写，但要改善可读性，请指定小写的所有字符(前一行引用除外)。 与HTML不同，XHTML对大小写很敏感，是不同的标记。具体规格如下：1 .文件定义2 .网站标题部分的代码规范：head区段是和之间的内容。 要添加的标记：2.1公司版权评论2.2网页显示字符集简体中文：繁体中文：英语：2.3作者和版权信息在此保存开发公司的版权信息。 下面是一个示例2.4网页的css、javascript规格如果要引用CSS和JS文件，请将其放置在中，然后依次放置CSS引用和JS引用。在html中编写javascript :2.5网页标题在Title中，以“-”分隔。 例如设备管理平台-运输系统。2.6设定检索关键字百度关键词搜索指数： /，该工具可以查看常用关键词的每日搜索次数。受欢迎的词汇集了现在最多的词汇。 可以在百度热词排行榜上看到/index2.htmlGoogle AdWords关键字工具：搜索特定关键字的常见搜索和扩展匹配。KEYWRODS关键字最多不得超过5个推荐长度： 100汉字以下，如果使用的网页编码为UTF-8，关键字之间用英文“、”分隔。2.7网站概述description记述网页的内容，希望能够用一句话概括该网页的主题内容。description不超过255个字符，搜索引擎索引通常索引description的前255个字符，因此255个字符是优化搜索引擎的关键。如果使用UTF-8网页编码，则Description标点符号优选使用英语，如英语逗号和句点。 如果是中文的话，用中文的标点符号就可以。2.8其他标签非必要1 .设置网页的过期日期。 网页过期后，必须在服务器上重新阅读，因此页面信息非常有用。2 .禁止浏览器从本地计算机的缓存中查看页面内容。3 .用来防止别人在框架上调用你的页面。4 .自动跳跃。五个小时停留五秒钟。5 .网页检索自动机向导.告知检索自动机需要索引的页面和不需要索引的页面。内容参数为all、none、index、noindex、follow和nofollow。 默认值为all。6 .收藏夹图标图像尺寸16px*16px7 .订阅RSS阅览描述和同步网站内容的格式。 用户可以通过RSS读取器订阅。2.9完整示例3. html中的元素标记：区域标签3 .第1段段落由标签定义。This is a paragraph3.2标题即，正文标题一般为标签，优选与title标签的内容相关联。标题使用 至 -1010- 标签进行定义。定义最小标题。 定义最大的标题。This is a headingThis is a headingThis is a headingThis is a headingThis is a heading文章中的小标题也一定要加粗。你可以这样做网页的重要内容。 用户无需登录这个页面就能看到更新的内容。3.3字体的设定标签换行：字体修饰不是等身大小的，通常使用css样式来布局字体样式3.4注意事项1 .必须设置页面背景以确保浏览器兼容性2 .关闭所有标签打开的标签必须关闭，例如当然，也有以下关闭方法的双曲馀弦值。 也就是说，一定要有结束标记。3 .属性值用双引号括住，属性用小写字母统一例如4 .为所有属性指派值写错了：正确的写法如下5 .标签应合理嵌套写法不正确： This is a heading 正确的写法是 7 .特殊字符用代码显示“”用“”表示，“”用“”表示。8 .网页上的图像优化必须添加alt属性。 alt属性指定无法显示影像时显示取代文字。 最好内容与关键词有关。例如有些小图标最好使用. png或. gif格式的图像(如箭头或文章列表前面的图标)在CSS中创建背景。 这些小图标最好是使用CSS来定位图像。9 .以结构化要素输出内容新现代新现代新现代或使用10 .标签必须缩进，因此代码更易于阅读。11、tr、td必须在表之间定义是.注：绝对不能省略tbody。12、button按钮必须在form之间定义。 否则，netscape不支持13、html注释(一)对每个独立部分显示评论； 例如块代码注释大量的代码块。 使用此样式可以使阅读更容易(2)注释是描述性的语言，能够清楚地表现部分意思。4. HTML元素的排序规则可用的HTML元素包括div、p、ul、table、span、input和select。 基本上，div、table、ul、p是结构上较强的要素，与此相对，由于span、input是较弱的要素，因此在span中不允许嵌套div、table等，能够在span中嵌套input，能够在span中嵌套。写页面时，首先不考虑接口的表示，根据这种规则可以将数据直接绑定到HTML元素的节点。五.九大原则原则1 :一般会写出适合很多浏览器的网页，首先写出适合chrome的样式，用chrome进行安排是最简单的方法。 测试时可以使用多个浏览器。原则2 :阶段性重叠的方式，使用这个风格的模块很多，而且多少有些不同的话，决不能一步一步地写出风格。 最好写在框架性的前面，把细节留在第二步，再留在第三步。 当然，步骤不能超过三步。 这不利于维护。可以用若干第二级定义来补充第一级定义，从而减少代码和许多类命名。不要轻易更改共享CSS。 不变更可能会影响其他页面。在每个级别的CSS之前添加注释，以指示哪些页面正在使用CSS。原则3 :从综合到得分。 顺序应该如下。 总体上所需的结构模块的次级模块的细节，以及本文最难修改的是最顶端，经常用于修改的是末端。 即兴演奏是最忌讳的，这样写的东西不能推敲，稍有变化就会忙乱。 结构性的东西要谨慎细致。原则4 :将尽可能小的图标和图像放入一个图像文件的好处有很多。1 .图像文件总量变小2、有利于下载，许多小照片的下载效果不理想，总是出现这张照片，发现它没有出现，这样写样式时只写整体，具体显示的地方只有一个，非常节约时间，样式也很精致3、很明显，这样做很容易管理，交换或追加时的工作量很少。原则5 :剪纸的原则是剪纸的大小决不小，剪纸的大小决不大，不是可以用颜色来代替的剪纸。 如果将一个大图片切换成多个部分，不一定加快页面的显示速度，相反浪费了很多不必要的带宽。 除了控制图像文件的数量外，还应考虑不会向页面添加额外的代码。原则6 :请用代表图像意义的名词命名图像，不要用编号命名。原则7 :多行的多列，特别是列宽不固定，所以绝对不要使用表格，DIV不要使用DIV。多幅图像规则排列时可用。原则8 :尽可能不在要素的标签上直接写入图案(除非该图案出现的概率特别小，有相当大的偶然性)。原则9 :不要用ID定义或编制样式索引。 ID的唯一性很高，ID索引样式效率非常低，兼容性问题也很明显。6 .文件命名惯例6.1前台档案组织在前台页面文件中，为每个大型功能模块(子系统)创建单独的文件夹，并将其命名为具有相关意义的英语