前端与移动学院代码书写规范.docx

第 第 PAGE 2 页 共 NUMPAGES 43 页 编码规范 目录 TOC \o 1-3 \h \z \u 一、 HTML规范 2 通用规范 2 头部Head命名规范 4 标签规范 5 属性规范 6 二、 CSS规范 8 缩进规范 8 空格规范 8 选择器规范 9 属性规范 11 值和文本规范 14 变换与动画规范 19 兼容性规范 20 三、 JS命名规范 21 命名规范 21 变量规范 24 注释规范 25 语句规范 27 空格规范 29 换行规范 33 类型相关规范 – 建议 37 字符串相关规范 40 对象使用规范建议 41 常用动词 43  HTML代码规范 通用规范 【强制】页面中不要忘记指定字符编码 通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。 head meta charset=UTF-8 /head 【强制】使用?2?个空格做为一个缩进层级，不建议使用?4?个空格 — 这是保证代码在各种环境下显示一致的唯一方式。 !DOCTYPE html html head titlePage title/title /head body img src=images/company-logo.png alt=Company h1 class=hello-worldHello, world!/h1 /body /html 【建议】在?html?标签上设置正确的 lang 属性。 解释： 有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。 示例： html lang=zh-CN 【建议】根据 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 【建议】JavaScript?应当放在页面末尾，或采用异步加载。 解释： 将 script 放在页面中间将阻断页面的渲染。出于性能方面的考虑，如非必要，请遵守此条建议。 示例： body !-- a lot of elements -- script src=init-behavior.js/script /body 头部Head命名规范 【强制】 页面必须包含?title?标签声明标题。 【强制】?title?必须作为?head?的直接子元素，并紧随?charset?声明之后。 解释： title 中如果包含 ascii 之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。 示例： head meta charset=UTF-8 title页面标题/title /head 【强制】 保证?favicon?可访问。 解释： 在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一： 在 Web Server 根目录放置 favicon.ico 文件。 使用 link 指定 favicon。 示例： link rel=shortcut icon href=path/to/favicon.ico 【建议】 若页面欲对移动设备友好，需指定页面的?viewport。 解释： viewport meta tag可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。 比如，在页面宽度小于 980px 时，若需 iOS 设备友好，应当设置 viewport 的 width 值来适应你的页面宽度。同时因为不同移动设备分辨率不同，在设置时，应当使用 device-width 和 device-height 变量。 标签规范 【强制】标签名必须使用小写字母。 !-- good -- pHello StyleGuide!/p !-- bad -- PHello StyleGuide!/P 【强制】?HTML?标签的使用应该遵循标签的语义。