html-css代码规范.docx

Google HTML/CSS代码风格指南修正版本 2.1背景本文档定义了HTML/CSS的编写格式和风格规则。它旨在提高合作和代码质量,并使其支持基础架构。适用于HTML/CSS文件。样式规则目录文件命名名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符。目录名称应使用意义完整的英文描述或中文描述的首字母!-- 推荐 --file，bszrHTML文件名称应使用以下划线分隔的多英文单词或中文描述首字母的形式命名，要求能说明显示内容的信息，命名格式：模块名称_展示方式!-- 推荐 --bszrs_view.html，bszrs_list.html,bszrs_change.htmlCSS文件名称应以所描述模块的英文名称或中文缩写的小写字母命名。!-- 推荐 --main.css协议嵌入式资源书写省略协议头省略图像、媒体文件、样式表和脚本等URL协议头部声明 (?http:?,?https:?)。如果不是这两个声明的URL则不省略。省略协议声明，使URL成相对地址，防止内容混淆问题和导致小文件重复下载。!-- 不推荐 --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键。不要用多个空格来进行缩进或无缩进。ulliFantastic/liliGreat/li/ul.example {color: blue;}大小写只用小写字母。所有的代码都用小写字母：适用于元素名，属性，属性值（除了文本和?CDATA?）， 选择器，特性，特性值（除了字符串）。!-- 不推荐 --A HREF=/Home/A!-- 推荐 --img src=google.png alt=Google行尾空格删除行尾白空格。行尾空格没必要存在。!-- 不推荐 --pWhat/p !-- 推荐 --pYes please./p元数据规则编码用不带BOM头的 UTF-8编码。让你的编辑器用没有字节顺序标记的UTF-8编码格式进行编写。在HTML模板和文件中指定编码?meta charset=utf-8?. 不需要制定样式表的编码，它默认为UTF-8.（更多有关于编码的信息和怎样指定它，请查看?/International/tutorials/tutorial-char-enc/en/all.htmlCharacter Sets Encodings in XHTML, HTML and CSS。）注释尽可能的去解释你写的代码。用注释来解释代码：它包括什么，它的目的是什么，它能做什么，为什么使用这个解决方案，还是说只是因为偏爱如此呢？css文件顶部多行注释。/* *@description:中文说明 *@author:作者 *@update:更新时间*/css文件内部单行注释。/*注释是哪个模块的样式*/HTML内部注释结构。/!--注释内容--/（本规则可选，没必要每份代码都描述的很充分，它会增重HTML和CSS的代码。这取决于该项目的复杂程度。在编写代码的时候，为了让它更易懂，注释代码逻辑是挺好的一种习惯，特别是在编写 PHP, Java 和 C#语言时。但是HTML标记语言是非常易懂的，没有必要每行代码都注释下。如果你在自己的HTML文件里看到有非常多注释，那么你就应该反省下了。）HTML代码风格规则文档类型请使用HTML5标准。HTML5是目前所有HTML文档类型中的首选：?!DOCTYPE html?.（推荐用HTML文本文档格式，即?text/html?. 不要用 XHTML。 XHTML格式，即?http://hixie.ch/advocacy/xhtmlapplication/xhtml+xml?, 有俩浏览器完全不支持，还比HTML用更多的存储空间。）建议在 html 标签上设置正确的 lang 属性有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。由于历史原因，有时候不得不继续使用zh-CN。比如中文维基百科，沿用了传统的zh-CN/zh-HK/zh-SG/zh-TW（按照标准应 该使用 zh-cmn-Hans-CN、zh-cmn-Hant-HK、zh-cmn-Hans-SG、zh-cmn-Hant-TW）。这时候，合理的软件行 为，是将 zh-CN 等转化为 zh-cm