网站Web前端代码规范.doc

龙图教育，全球游戏50强教育品牌 Web前端代码规范 此项目用于记录规范的、高可维护性的前端代码，这是通过分析 Github 众多前端代码库，总结出来的前端代码书写规范。 前端普适性规范 黄金定律 永远遵循同一套编码规范，可以是这里列出的，也可以是你自己总结的。如果你发现本 规范中有任何错误，敬请指正。 不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。 项目命名 项目名全部采用小写方式，以中划线分隔，禁止驼峰式命名。比如：my-project-name 文件命名 文件命名参照上一条规则，多个单词组成时，采用中划线连接方式，比如说: error-report.html 有复数结构时，要采用复数命名法，比如说： scripts, styles, images, data-models 文件名中只可由小写英文字母a~z、排序数字0~9或间隔符-组成，禁止包含特殊符号，比如空格、$等 为更好的表达语义，文件名使用英文名词命名，或英文简写。 不允许命名带有广告等英文的单词，例如ad,adv,adver,advertising，防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。 index.shtml 引导页首页 main.shtml 首页 download.shtml 下载页面 act.html 活动列表页面 video.html 视频 cdkey.html CDKEY页面 base.css 基本样式 layout.css 框架布局 module.css 模块样式 global.css 全局样式 font.css 字体样式 index.css 首页样式 link.css 链接样式 print.css 打印样式 HTML 规范 语法 使用四个空格的缩进，这是保证代码在各种环境下显示一致的唯一方式。 嵌套的节点应该缩进（四个空格）。 在属性上，使用双引号，不要使用单引号。 不要在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。 不要忽略可选的关闭标签（例如， 和 /body）。  HTML5 doctype 在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式，使其每个浏览器中尽可能一致的展现。 虽然doctype不区分大小写，但是按照惯例，doctype大写 !DOCTYPE html 语言属性 html lang=en /html 字符编码 通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样 做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与 文档编码一致（一般采用 UTF-8 编码）。 meta charset=UTF-8 IE 兼容模式 IE 支持通过特定的 meta 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈 的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。 meta http-equiv=X-UA-Compatible content=IE=Edge 响应式 meta name=viewport content=width=device-width, initial-scale=1 引入 CSS 和 JavaScript 根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。 !-- External CSS -- link rel=stylesheet href=code-guide.css !-- In-document CSS -- style /* ... */ /style !-- JavaScript -- script src=code-guide.js/script 实用高于完美 尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。 减少标签数量 在编写 HTML 代码时，需要尽量避免多余的父节点。很多时候，需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例: !-- Not so great -- span class=avatar  /span !-- Better --  属性顺序 HTML 属性应该按照特定的顺序出现以保证易读性。 class id name data-* src, for, type, href, value , max-length, max, min,