HTML CSS JavaScript 编码规范.docxVIP

Web端编码规范版本0.1最后更新2015-1-12作者修订历史目录1 HTML编码规范5样式规则5协议5排版规则5缩进5大小写6元数据规则6编码6注释6待办事项6HTML代码风格规则7文档类型7HTML代码有效性7语义8多媒体后备方案8关注点分离8type属性9HTML代码格式规则9格式92 CSS编码规范10CSS代码风格规范10CSS代码有效性10ID和class的命名10ID和class命名风格11类型选择器11属性缩写110和单位120开头的小数12省略0开头小数点前面的012URI外的引号12省略URI的引号12十六进制12十六进制尽可能使用3个字符12前缀12选择器前面加上特殊应用标识的前缀（可选）12ID和class命名的定界符12CSS代码格式规范13声明顺序13代码块内容缩进13声明完结13属性名完结14选择器和声明分行14规则分行143 JavaScript编码规范15快读参考15类型17对象17数组18字符串18函数20属性20变量21条件表达式和等号22块23注释23空格与缩进25逗号25分号26类型转换26命名约定27存取器281 HTML编码规范样式规则协议嵌入式资源书写省略协议头省略图像、媒体文件、样式表和脚本等URL协议头部声明(http:, https:)。如果不是这两个声明的URL则不省略。省略协议声明，使URL成相对地址，防止内容混淆问题和导致小文件重复下载注意：省略头部声明时，该问时会按照网站默认头部声明进行访问（如，网站是https的，则默认的头部声明是https)，如果必须在https(http)网站中访问http(https)的内容时，必须加上http(https)头部声明!-- 不推荐 --script src=/js/gweb/analytics/autotrack.js/script!-- 推荐 --script src=///js/gweb/analytics/autotrack.js/script/* 不推荐 */.example { background: url(/images/example);}/* 推荐 */.example { background: url(///images/example);}排版规则缩进每次缩进两个空格不要用TAB键或多个空格来进行缩进ul liFantastic/li liGreat/li/ul?.example { color: blue;}大小写只用小写字母所有的代码都用小写之母：适用于元素名，属性，属性值(除了文本和CDATA)，选择器，特性，特性值(除了字符串)。!-- 不推荐 --A HREF=/Home/A?!-- 推荐 --img src=google.png alt=Google/preh3行尾空格/h3strong删除行尾白空格。/strong元数据规则编码用不带BOM头的 UTF-8编码。让你的编辑器用没有字节顺序标记的UTF-8编码格式进行编写。在HTML模板和文件中指定编码。 不需要制定样式表的编码，它默认为UTF-8。注释尽可能的去解释所写的代码用注释来解释代码：它包括什么，目的是什么，能做什么，为什么使用这个解决方案...（本规则可选，没必要每份代码都描述得很充分，它会增重HTML和CSS的代码。只添加必要的注释，尽量避免冗余的、无用的注释）待办事项用TODO标记代办事项和正在进行的项目只用TODO来强调待办事项和正在进行项目，不要使用其他的格式，例如@@。附加联系人（用户名或电子邮件列表），用括号括起来，例如：TODO(contact)divTest/div!-- TODO(abc@163.com): 删除可选元素 --!-- TODO: 添加可选元素--ul liApples/li liOranges/li/ulHTML代码风格规则文档类型HTML5是目前所有HTML文档类型中的首选。推荐用HTML文本文档格式，即text/html。不要用XHTML。XHTML有些浏览器不支持，还比HTML用更多的存储空间。常用的文档类型：HTML5!DOCTYPE htmlHTML4.01!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN/TR/html4/loose.dtdHTML代码有效性尽量使用有效的HTML代码编写有效的HTML代码，否则很难达到性能上的提升，用类似W3C HTML validator这样的工具来进行测试。HTML代码的有效性是重要的质量衡量标准，并可确保HTML代码可以正确使用。!-- 不推荐 --titleTest/titlearticleThis is only a test.!-- 推荐 --!DOCTYPE htm