前端代码规范操作

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 格式化标准

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180118A0S5DP00?refer=cp_1026

相关快讯

扫码关注云+社区