前端代码规范操作

1-1. 页面的基本组成

互动维客

...(内部Javascript)...

//-- >

一个最基本的页面应该包括：

标准的Doctype声明。

编码声明。

引用全局CSS文件。

CSS和Javascript统一放在 里，不允许放在 里。

页面Head的组成顺序：

1 DOCTYPE声明

2 编码声明

3 外部CSS文件

4 内部CSS

5 外部Javascript文件

6 内部Javascript

内的模块都要加注释。

标准注释格式：〈/p >

1-2. 浏览器支持标准

必须完全支持：IE6-9

FireFox

Opera

Safari

1-3. 页面性能原则

每页有尽可能少的HTTP请求。页面内的HTTP请求，包括引用的外部CSS和外部JS文件、图片、Flash文件等。

正式发布的外部CSS文件和JS文件要进行压缩。

同一个页面中避免重复包含CSS文件或JS文件。

在CSS中谨慎使用expression。

详情参考：《Yahoo!网站性能最佳体验的34条黄金守则》

1-4. SEO页面简单原则

1.页面标题设计

建议使用 "

","_","-" 来做分隔符。如：首页：“首页

站点名称”

普通页面：“标题名称

子频道名

站点名称”

2.不要使用任何meta keywords meta description。

3.使用语义化标签，如： 标题 。 注意，h1标签在一个页面只能使用一次——假定它是这个页面的主标题，是不应该使用多次的（相当于一篇文章的题目，你可以有一个副题目，但你不会使用两个并列的题目吧？——译者注）。

但是，h2到h6可以如你所需任意使用多次，但它们应依设计意图，该按顺序使用。比如，h4应该是h3的子标题，h3应该是h2的子标题，以此类推。

4. 网页大小和内容的比例越接近1越好(网页大小:内容大小)，单个页面上的链接数控制在100个以内，如果不能控制100以内，则将最需要SPIDER抓取的链接放在前100中。

5.利用CSS控制页面的格式化输出。

6.广告链接排在内容的后面。

2-1. (X)HTML书写规范

2-1-1. 推荐使用的HTML标签。详见附表。

2-1-2. 不建议使用的HTML标签。详见附表.

2-1-3. LSM(Layered Semantic Markup)-分层语义化模板标准。

2-1-4. 在页面嵌入Flash。将下面的代码嵌入在页面要显示Flash的位置。

2-1-5. 页面打开原则

2-1-5-1. 任何页面到首页级页面在当前窗口打开。首页级的页面包括产品首页，登陆注册首页。

2-1-5-2. 终级页面到首页级页面在当前窗口打开。

2-1-5-3. 首页级页面到终级页面新开窗口打开。

2-1-5-4. 非终级页面到非终级页面在当前窗口打开。

2-1-5-5. 非终级页面到终级页面新开窗口打开。

2-1-5-6. 任何页面链接到非本站页面或市场推广页面则新开窗口打开。

2-2. 图片标注

2-2-1. 页面中的正式内容图片，必须填写 alt属性，不允许为空。

2-2-2. 对于页面装饰性质的图片，如虚线、分隔小图等，不加Alt属性，要定义在CSS中。

2-3. 页面标准布局（讨论决定）

2-4. 标准页面模块 （讨论决定）

2-5. 链接使用

2-5-1. 链接中的中文参数要进行编码。

3-1. CSS框架

以YAHOO为例：全局CSS文件（必须包含） http://cn.yimg.com/i/css/ycomm.css

产品全局CSS文件（如：影视） http://cn.yimg.com/i/css/mv/ymv.css

页面私有CSS文件（如：影视 > 首页） http://cn.yimg.com/i/css/mv/ymvhome.css

3-1-1. 一个产品的CSS框架至少包括这三层，且顺序从全局到私有自上而下。

3-1-2. CSS除首页可以采用页内方式外，其他级别的页面均采用链接外部CSS的方式。

3-2. CSS基本规则

3-2-1. CSS符合浏览器兼容标准；

3-2-2. 全部小写，且每一项CSS定义写成一行；

3-2-3. 不允许将样式的定义写在标签中（如：style=”font-color:red;”）；

3-2-4. CSS命名要符合命名原则；

3-2-5. 所有装饰性的图片（如背景图），要定义在CSS中；

3-2-6. ID是唯一的，且用在结构的定义中；

3-2-7. CSS文件要按照CSS框架的要求分层；

3-2-8. CSS文件发布前要进行压缩。

3-2-9. 单位建议使用“em”。“em”和“%”。

3-3. CSS命名原则

3-3-1. CSS命名不建议使用下划线等连接符。

3-3-2. CSS命名中的元素/属性缩写：

3-4.CSS书写要求简洁

错误写法

正确写法

#yh{

background-color:#ffffff;

color:#cccccc;

font-family:宋体;

font-size:12px;

font-weight:bold;

}

#yh

3-5.所有对页面元素样式的定义都写到CSS中。

页面质量评估标准

4-1. (X)HTML代码结构是否清晰。

评判方法：查看源文件，是否符合页面标准(规范1-1)。各个模块清晰可辨或是有注释说明。

4-2. (X)HTML代码结构是否复杂。

评判方法：每个模块 (x)html代码的嵌套层次简单，代码简洁。

4-3. (X)HTML代码是否和CSS混杂在一起。

评判方法：大量在标签中使用Style定义样式。

4-4. (X)HTML代码是否和大量Javascript混杂在一起。

评判方法：Javascript没有集中的放在中或是放在页面的底部，而是混杂在模板中。

4-5. (X)HTML代码是否大量出现不被推荐使用的标签。

评判方法：不被推荐使用的标签见规范2-1-2，如 、 等。

4-6. (X)HTML代码是否书写规范。

评判方法：依照规范2-1检查。

4-7. CSS书写是否规范。

评判方法：查看CSS代码部分CSS命名是否标准(规范3-3)，单个定义是不是过长，是否出现过多重复的定义，同时依照规范3-2检查。

4-8. 页面是否符合本地浏览器兼容标准。

评判方法：依照规范1检查。

4-9. (X)HTML代码的格式是否混乱。

评判方法：格式是否整齐、干净。

4-10. 页面是否存在性能问题。

评判方法：观察CPU的占用情况，打开页面后CPU占用率始终在50%以上。页面的下载速度是不是明显感觉很慢。

CSS 格式化标准