WEB前端编码规范.docx

《WEB前端编码规范.docx》由会员分享，可在线阅读，更多相关《WEB前端编码规范.docx（30页珍藏版）》请在冰豆网上搜索。

WEB前端编码规范

XXXX有限公司

XXXXXXX管X理平台

Web前端代码编写规范

文件状态：

文件标识：

[√]草稿

当前版本：

1.0

[]正式发布

作者：

李光强

[]正在修改

完成日期：

XXXXXX

2016年1月

修改历史

编号

修订后版本号

修订人

修订内容简述

修订日期

1

1.0

李光强

起草

第一部分HTML规范

HTML并不是一种编程语言，而是一种标记语言，它没有任何真正的编程语言中的循环或是流程控制语句。

然而，HTML代码的格式和风格是非常重要的，因为要经常对HTML代码进行维护和修改，因此HTML代码必须有很清晰的逻辑结构和布局，而使其易懂和易于维护。

1.文件定义

2.网站head区代码规范：

head区是指和之间的内容。

必须加入的标签：

2.1公司版权注释

---

文件：

XXX.html

说明：

说明本HTML是用于什么功能

作者：

李四

时间：

2016/1/30

--->

2.2网页显示字符集

简体中文：

charset=utf-8">

繁体中文：

charset=BIG5">

英语：

charset=iso-8859-1">

2.3作者与版权信息

此处用于存储开发公司版权信息，如：

2.4网页的css,javascript规范

在引用CSS和JS文件时，统一放置在中，先放CSS引用，再放js引用。

html中javascript的书写：

2.5网页标题

Title中使用“-”分割，如：

设备管理平台-运维系统。

2.6设置搜索关键词

GoogleAdWords关键字工具：

查询特定关键词的常见查询及扩展匹配。

KEYWROD关S键字最多不超过5个建议长度：

小于等于100个汉字，如果使用的网页编码是UTF-8，不同关键字之间用英文“,”分隔。

2.7网站简介

description是描述网页内容的，因此最好是可以用一句话来概括本网页的主题内容。

description不要超过255个字符，搜索引擎索引一般都会索引Description的前255个字符，因此，这255个字符是做搜索引擎优化的关键。

如果使用的网页编码是UTF-8，那么在Description中的标点符号最好都使用英文，例如英文的逗号、句号等。

如果是中文的话，那么就使用中文的标点符号即可。

2.8其它标签[非必需]

1.设定网页的到期时间。

一旦网页过期，必须到服务器上重新调阅，这样有利于页面信息。

21:

57gmt">

2.禁止浏览器从本地机的缓存中调阅页面内容。

3.用来防止别人在框架里调用你的页面。

4.自动跳转。

5指时间停留5秒。

5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

CONTEN的T参数有all,none,index,noindex,follow,nofollow。

默认是all。

6.收藏夹图标

图片大小

16px*16px

7.订阅RSS浏览

是一种描述和同步网站内容的格式。

用户可以通过RSS阅读器订阅。

2.9完整示例

3.html中元素的书写：

区域标签

3.1段落

段落使用

标签进行定义

Thisisaparagraph

3.2标题

即正文标题一般用

标题使用

至

标签进行定义。

定义最大的标题。

定义最小的标题。

Thisisaheading

Thisisaheading

Thisisaheading

Thisisaheading

Thisisaheading

Thisisaheading

可以把网页中的重要内容做成这样。

用户不用登陆这个网页就可看到更新的内容。

3.3字体的设置标签

换行：

字体修饰不要使用等进行标注，一般使用css样式进行字体样式排版

3.4注意事项

1.为了保证浏览器的兼容性，必须设置页面背景：

2.关闭所有的标签

。

即：

一定要有结束标记。

3.属性值用双引号“”括起来,属性统一使用小写

例如：

4.给所有的属性赋值

正确的写法为：

5.标签要合理嵌套

7.特殊字符用编码标识

如"<"用"<"表示，">"用">"表示。

8.网页中图片优化

一定要加alt属性，alt属性指定了当图片不能显示的时候就显示供替换文本。

内容最好与关键词相关。

如：

一些小图标最好用.png或.gif格式图片，比如说箭头，文章列表前的图标等，在CSS中做成背景。

这些小图标最好做一张图片，用CSS来定位。

9.用结构化的元素输出内容

• 新现代
• 新现代
• 新现代

或者使用

10．标签要有缩进，便于代码阅读修改。

11、tr、td必须定义在table之间；

注：

tbody绝对不可以省略。

12、button按钮必须定义在form之间，否则netscape不支持；

13、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.九大原则

原则一：

逐步叠加的方式，如果需要用这个样式的模块很多，并且会存在些许的不同，千万不要把样式一步写到位，最好把框架性的先写好，细节性的留到第二个步骤，甚至第三个步骤，当然最好步骤不要超过三步，这样很不利于维护。

由若干个二级定义对一级定义进行补充，这样的既可以减少代码，又可以减少繁多的CLASS命名。

不要轻易修改共用的CSS，否则可能会影响其它页面。

在每个一级CSS前添加注释，说明哪些页面使用了该CSS。

原则三：

从总到分。

顺序应该是这样：

总体需要用到的＞＞结构＞＞模块＞＞二级模块＞＞细节；并且这个文档最不容易修改的处于最上端，频繁用于修改的在末端。

最忌讳即兴发挥，这样写出的东西经不起推敲，稍有变化就要忙得乱成一团。

结构性的东西应该慎重精细。

原则四：

尽量把能够放在一组的小图标或者图片放在一个图片文件里，这样的好处有很多。

1、图片文件的总量会变小；

2、利于下载，太多的小图片下载效果是不理想的，常常会发现这个图片出来，那个没出来，这样在写样式的时候只需要写一个总体的，对于具体的要显示的只需要标一个位置，非常省时间，样式也很精炼；

3、显而易见，这样做非常便于管理，替换或新增的时候工作量很小。

原则五：

切图的原则，应该切大的图绝不切小，应该切小的绝不切大，能够用颜色代替的绝不切图。

把一个大图切成很多份并不一定能够加快页面的显示速度，相反会浪费很多不必要的带宽。

不光要控制图片文件的多少，还要考虑到这样切会不会造成页