3、HTML代码规范

  • .html文件必须存放在项目工程约定的目录中。
  • .html文件的命名：以模块 + 功能的结合方式来命名，比如：newsList.html。
  • 文档类型声明：HTML4中使用<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd”>，但是在HTML5中文档类型的声明方式被简化，直接：<!DOCTYPE html>就可以，同时支持小写<!doctype html>。
  • 统一编码方式：在<head>中定义<meta charset="UTF-8">。
  • 从网站优化的角度来看，一般情况下，CSS文件必须外链在<head>标签中，Javascript文件必须外链在<body>标签结束之前。
  • 所有标签名以及标签的属性名全部使用小写格式，属性值定义必须加上引号，同时标签必须闭合，这样可以使页面编码风格更加符合W3C的Web标准，同时也有利于SEO。
  • 尽可能使用语义化的HTML标签，这样可以减少页面代码量，同样可以更好的有利于SEO。
  • 在保证页面弹性的基础上尽量减少<div>的嵌套层数。
  • 引入页面中的Javascript库文件，文件名称要让所有开发者能清楚知道库名称、版本号、是否压缩，比如：jquery-1.7.1.min.js。引入的第三方插件库的Javascript文件名称同样也需要让开发者能清楚知道库名称和插件名称，比如：jquery.cookie.js。
  • 标签中的URL定义是，需要避免重定向，需要在URL地址后面加上”/”，同时为了有利于SEO，请尽量使用绝对URL而非是相对URL，比如：href=”http://www.baidu.com/”。
  • 所有标签的样式定义时，一般情况下存放在对应的CSS文件中定义，尽量避免使用style属性来定义当前标签的样式属性。
  • 对于<img>标签定义的图片，为了有利于SEO和爬虫的抓取，尽量给每一张图片定义alt属性。
  • 对于HTML中重要的区域模块和重要的功能部分，必须加上必要的注释，便于后期其他成员对代码进行维护。
  • 页面中如果需要使用特殊符号的时候，请使用特殊符号的转义代码替代。
  • 避免使用已经被淘汰掉的标签和属性，多使用HTML5新增加的各种语义化标签和新增属性（附录A中给出了移动网页的基本结构）。

4、CSS代码规范

  • .css文件必须存放在项目工程约定的目录中，同时建议对.css文件使用UTF-8的编码方式。
  • 将网站中的所有CSS样式按照特定的方式进行组织，此处建议使用：基本样式（base.css） + 通用样式（common.css） + 页面样式（XXXpage.css）。
  1. 基本样式：最底层的样式定义，提供CSS reset 和粒度最小的通用样式定义。基本样式是会被所有页面引用，所以这里面的样式定义要力求精简和通用。当网站成熟的时候，基本样式是相对比较稳定的，基本上不需要进行维护。（附录B中给出了推荐的基本样式，请参照。）
  2. 通用样式：提供组件级别的样式定义，这些组件可以高度重用的。
  3. 页面样式：提供页面级别的样式定义。
  • 对标签进行样式定义时，可以选用标签的id或者class名称，但是一般情况下 class，特殊情况除外，因为id的优先级远比class要高的多。
  • CSS的样式命名规范：命名时尽量使用英文，避免使用汉语拼音。命名方式有驼峰命名法和划线命名法两种。使用这两种方法都可以将单词区分开，提高命名的可读性，但是这两种方法都不是最好的方式，建议在实际开发过程中，组合使用这两种方式。
  1. 驼峰命名法：从第二个单词开始，每个单词的首字母大写，如：dropMenu、subNavMenu。
  2. 划线命名法：将每个单词用“-”或者“_”分隔，如：drop-menu、sub-nav-menu、drop_menu、sub_nav_menu。
  • 在定义样式属性的时候，建议按照一定的顺序进行排列，建议按照：布局定位属性→自身属性→文本属性→其他属性。当然，这个顺序不是硬性规定，各位开发人员可以根据自己的习惯调整这个顺序，但是，要保证同类属性是要在一起的，这样便于阅读和维护。
  1. 布局定位属性：display、position、float、clear、visibility等。
  2. 自身属性：width、height、margin、padding、border等。
  3. 文本属性：font、line-height、text-align、vertical-align等。
  4. 其他属性：color、background等。
  • 避免滥用自选择器，.hello div {}和.hello .divclass {}这两种方式尽量使用后者。采用继承的属性还是新加自定义class根据页面代码中的不同情况灵活使用。新加自定义的class便于后期进行维护。
  • 兼容性属性的使用，尤其是CSS3的相关属性，在使用时，切记针对一些浏览器有不同的定义方式。
  • 尽量避免影响页面性能的属性使用，比如：position:absolute、float等。
  • 在CSS文件中，也必须有相关的注释。
  • CSS文件中，代码的缩进方式团队要基本保持统一。

5、Javascript代码规范

  • .js文件必须存放在项目工程约定的目录中，同时建议对.js文件使用UTF-8的编码方式。
  • 代码书写过程中，要求每行代码结束都必须有”;”。
  • 原则上项目工程统一引入一个Javascript的库，比如jQuery的库，如果需要引起其他库文件或者第三方插件库，需要经过团队成员一致讨论决定。
  • Javascript中的文件名、类名、函数方法名、变量名等的命名尽量语义化，做到见名知其意。
  • 代码结构需要明了，有必要的代码注释，尽量提高代码的重用率。
  • 要注重Javascript代码和HTML代码的分离，减小reflow，注重页面的性能。

6、图片规范

  • 所有页面元素使用的图片文件均要放入指定的文件夹中。
  • 图片的格式不要繁杂，仅限于gif、png、jpg。
  • 图片的命名使用英文、数字加上_的组合。图片名称中不要出现汉字、空格、特殊字符等。对于图片的名称也要做到见名知其意。
  • 在保证视觉效果的基础上要尽量选择最小的图片格式和质量，减少页面加载时间和网络流量。
  • 移动页面列表图片，请使用图片延迟加载技术，初次加载只加载当前屏幕范围内的图片，滚动平时时，再按需加载图片。
  • 针对不同的屏幕尺寸、不同的手机系统选择不同的图片加载，请使用响应式Web设计中对图片的具体处理方法。

7、注释规范

  • HTML注释：<!—注释内容 –>。
  • CSS注释：/* 注释内容 */。
  • Javascript注释：// 单行注释内容、/* 多行注释内容 */。

8、其他说明

本文档中所列出的规范只是基本的开发标准，也参杂了一些本人的使用习惯，所以不是硬性强制的要求。正因为有很多是本人的个人习惯，所以难免有遗漏和失误之处，请各位阅读者不吝赐教。

同时，本文档的基本规范适用于所有的前端开发过程中，移动网页的前端开发同样适用。而针对移动网页开发的一些特别之处，后续我将通过组件Demo和页面Demo的形式，给出关于移动网页开发过程中的一些注意点和特点。

Web前端开发规范（二）的更多相关文章

  1. Web 前端开发规范手册

    一.规范目的 Web 前端开发规范手册 1.1 概述 ......................................................................... ...

  2. WEB前端开发规范

    WEB前端开发规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本 ...

  3. WEB前端开发规范文档（转）

    http://codeguide.bootcss.com/  编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...

  4. 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

  5. Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

  6. WEB前端开发规范文档[转]

    为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...

  7. Web前端开发规范手册

    一.规范目的 1.1  概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发.  ...

  8. 问题11：web前端开发规范手册(转)

    一.规范目的 1.1  概述 ..................................................................................... ...

  9. 1+X证书Web前端开发规范手册

    一.规范目的 1.1 概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本 ...

随机推荐

  1. 【模板】普通平衡树 Splay

    题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入xxx数 删除xxx数(若有多个相同的数,因只删除一个) 查询xxx数的排名(排名定义为比当前数小的数的个数 ...

  2. PHP删除目录下的空目录

    function rm_empty_dir($path){       if(is_dir($path) && ($handle = opendir($path))!==false){ ...

  3. Mybatis学习笔记(二) —— mybatis入门程序

    一.mybatis下载 mybaits的代码由github.com管理,下载地址:https://github.com/mybatis/mybatis-3/releases 下载完后的目录结构: 二. ...

  4. Winscp使用密钥登录

    Winscp使用密钥登录 背景:通常我们使用winscp通过密码认证去连接服务器进行文件的ftp操作,但是为了安全,我们服务器上经常会禁止使用密码连接,而改用密钥认证.而且服务器上经常会禁止root用 ...

  5. CF E. Vasya and a Tree】 dfs+树状数组（给你一棵n个节点的树，每个点有一个权值，初始全为0，m次操作，每次三个数(v, d, x)表示只考虑以v为根的子树，将所有与v点距离小于等于d的点权值全部加上x，求所有操作完毕后，所有节点的值）

    题意: 给你一棵n个节点的树,每个点有一个权值,初始全为0,m次操作,每次三个数(v, d, x)表示只考虑以v为根的子树,将所有与v点距离小于等于d的点权值全部加上x,求所有操作完毕后,所有节点的值 ...

  6. css兼容写法

    css3 1.box-shadow: filter:progid:DXImageTransform.Microsoft.Shadow(color=#,direction=,strength=);/*兼 ...

  7. django组件之form

    form组件 首先要了解form组件的一些基本语法: 1.  校验数据:    form组件校验的是字典,所以数据应该以字典形式传进去    form 校验,可以多传数据,不要紧(只校验form组件有 ...

  8. python学习第二天a

    首先 python 是一门解释型弱类型的高级编程语言. 变量命名规范有8条,要时刻牢记于心.紧接着又回顾了其他的知识点 常量:不存在绝对的常量.所有的字母大写就是常量. 今日所学内容: 1.循环 wh ...

  9. 解决Yii2 添加css后页面刷新也无反应的情况

    'assetManager' => [ // uncomment the following line if you want to auto update your assets (unix ...

  10. spring中注解注入 context:component-scan 的使用说明

    通常情况下我们在创建spring项目的时候在xml配置文件中都会配置这个标签,配置完这个标签后,spring就会去自动扫描base-package对应的路径或者该路径的子包下面的java文件,如果扫描 ...