《html css javascript 编码规范》由会员分享，可在线阅读，更多相关《html css javascript 编码规范（32页珍藏版）》请在金锄头文库上搜索。
1、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选择器前面加上特殊应
2、用标识的前缀（可选）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成相对地址，防止内容混淆问题和导
3、致小文件重复下载注意：省略头部声明时，该问时会按照网站默认头部声明进行访问（如，网站是https的，则默认的头部声明是https)，如果必须在https(http)网站中访问http(https)的内容时，必须加上http(https)头部声明/* 不推荐 */.example background: url(http:/ 推荐 */.example background: url(/ Fantastic Great.example color: blue;大小写只用小写字母所有的代码都用小写之母：适用于元素名，属性，属性值(除了文本和CDATA)，选择器，特性，特性值(除了字符串)。Home
4、行尾空格删除行尾白空格。元数据规则编码用不带BOM头的 UTF-8编码。让你的编辑器用没有字节顺序标记的UTF-8编码格式进行编写。在HTML模板和文件中指定编码。 不需要制定样式表的编码，它默认为UTF-8。注释尽可能的去解释所写的代码用注释来解释代码：它包括什么，目的是什么，能做什么，为什么使用这个解决方案.（本规则可选，没必要每份代码都描述得很充分，它会增重HTML和CSS的代码。只添加必要的注释，尽量避免冗余的、无用的注释）待办事项用TODO标记代办事项和正在进行的项目只用TODO来强调待办事项和正在进行项目，不要使用其他的格式，例如。附加联系人（用户名或电子邮件列表），用括号括起来，
5、例如：TODO(contact)Test Apples OrangesHTML代码风格规则文档类型HTML5是目前所有HTML文档类型中的首选。推荐用HTML文本文档格式，即text/html。不要用XHTML。XHTML有些浏览器不支持，还比HTML用更多的存储空间。常用的文档类型：HTML5HTML4.01HTML代码有效性尽量使用有效的HTML代码编写有效的HTML代码，否则很难达到性能上的提升，用类似W3C HTML validator这样的工具来进行测试。HTML代码的有效性是重要的质量衡量标准，并可确保HTML代码可以正确使用。TestThis is only a test.Tes
6、tThis is only a test.语义根据HTML各个元素的用途去使用他们使用标签要知道为什么去使用它们和是否正确，如，用heading元素构造标题，p元素构造段落，a元素构造锚点等。根据HTML各个元素的用途而去使用是很重要的，它涉及到文档的可访问性、重用和代码效率等问题All recommendationsAll recommendations多媒体后备方案为多媒体提供备选内容对于图像使用有意义的备选文案（ alt ） 对于视频和音频使用有效的副本和文案说明。关注点分离将表现和行为分开严格保持结构（标记，即HTML）、表现（样式，即CSS）和行为（脚本，即JavaScript）分离
7、，并尽量让这三者之间的交互保持最低限度。确保文档和模板只包含HTML结构，把所有表现都放到样式表里，把所有行为都放到脚本里。此外，尽量使脚本和样式表在文档与模板中有最小的接触面积，即减少外链。将表现和行为分开维护是很重要的，因为更改HTML文档结构和模板会比更新样式表和脚本更花费成本。HTML sucksHTML sucksIve read about this on a few sites but now Im sure:HTML is stupid!1My first CSS-only redesignMy first CSS-only redesignIve read about thi
8、s on a few sites but today Im actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational.Its awesome!type属性在样式表和脚本的标签中忽略 type 属性在样式表（除非不用 CSS）和脚本（除非不用 JavaScript）的标签中 不写 type 属性。HTML5默认 type 为 text/css 和 text/javascript 类型，所以没必要指定。即便是老浏览器也是支持的。HTML代
9、码格式规则格式每个块元素、列表元素或表格元素都独占一行，每个子元素都相对于父元素进行缩进。Space, the final frontier. Income Taxes $ 5.00 $ 4.50 2 CSS编码规范CSS代码风格规范CSS代码有效性尽量使用有效的CSS代码。使用有效的CSS代码，除非是处理CSS校验器程序错误或者需要专有语法。用类似W3C CSS validator这样的工具来进行有效性的测试。使用有效的CSS是重要的质量衡量标准，如果发现有的CSS代码没有任何效果的可以删除，确保CSS用法适当。ID和class的命名为ID和class取通用且有意义的名字。应该从ID和class的名字上就能看出元素的用途，而不是表象或模糊不清的命名。应该优先考虑以元素的具体目的来进行命名，这也最容易理解，减少更新。使用功能性或通用的名字会减少不必要的文档或模板修改。/* 不推荐: 无意义 不易理解 */#yee-1901 /* 不推荐: 表达不具体 */.button-green .clear /* 推荐: 明确详细 */#gallery #login .video /* 推荐: 通用 */.aux .alt ID和class
