HTMLCSS开发规范.docVIP

信息技术中心网站技术部 版本 更新时间 修改人 备注 V1.0 2013 ？？ 文档创建 目录 3 HTML规范 3 文件定义 3 HEAD规范 3 HTML规范 3 HTML书写建议 4 CSS开发规范 4 命名规范 4 兼容性 5 CSS规范 5 CSS书写建议 6 文件命名 命名指导思想是能够方便的理解每一个文件的意义，当按名称排列时，同一种类的文件能够排列在一起，方便查找、修改等操作。 文件统一使用UTF-8编码保存。 文件与目录命名采用英文，长度一般不超过30个字符，。@charsetutf-8。 如果需要换肤，则命名按色彩来命，比如：red.css/blue.css/green.css。 HTML规范 为改善可读性，规范使用XHTML标准DOCTYPE引用外）。 文件定义 !DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN http：///TR/xhtml1/DTD/xhtml1-strict.dtd/!DOCTYPEhtml/ HEAD规范 至少包括以下内容： metahttp-equiv=Content-Typecontent=text/html;charset=gb2312 metaname=authorcontent= metaname=copyrightcontent=，版权所有/ title/title：一个Tab缩进对应使用四个空格。 布局要建立清晰的层次关系，尽量不要超过三层。 最高一级的父标记采用左对齐顶格方式书写，一般是html，body或div。 下一级标记采用左对齐向右缩进一个Tab的方式书写。 再下一级依此类推，相对于父标记向右缩进一个Tab的方式书写 同一级标记的如有换行，首字符上下级必须对齐。 HTML书写时即定义class属性，方便之后可直接更新CSS。 HTML标签书写要考虑SEO需求。 不能用使用nbsp;空格用于排版。 页面尽量减少图片img标签的使用，尽量写到CSS上，用背景模式表现。 对于用图片表示的内容，应该带上alt属性。 对于图片和文字的链接，用两个a标签，不要把图片和文字都放在同一个a标签中。 对于显示不全的a标签，应该有title属性。 javascript尽量放到页面底部。 站点使用一个jquery，一个页面上同一个脚本不能导入多次。 HTML书写建议 给所有的属性赋值，如input checked=checked/。 标签应合理嵌套，禁止divspan/div/span。 特殊字符用实体标识，如=lt;，=gt;。 用结构化的元素输出内容。tr、td必须定义在table之间，tbody不可以省略。 ul li/li li/li li/li /ul dl dt/dt dd/dd dt/dt dd/dd /dl table tbody tr td/td /tr /tbody /table 表现与结构分离，代码中不涉及表现元素，如style、font、bgColor、border等；h1到h6的定义，遵循从大到小的原则，体现文档结构，利于搜索引擎的查询给每一个表格和表单加上一个唯一的、结构标记idCSS Sprites实现定位。 HTML注释：每一独立部分都要表明注释。注释要用描述性语言。能够清楚的表达每一部分的内容含义。 !—左边begin--!—左边end-- !—头部begin--!—头部end-- !—XX列表begin-- !—XX列表end-- CSS开发规范 命名规范 符合后缀.css常用命名以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。尽量不缩写，除非一看就明白的单词。对于二级命名，则采用组合书写的模式，如搜索图标样式命名.searchicon。CSS必须兼容IE、360、搜狗、FF、Chrome等主流浏览器。 使用标准CSS来书写样式，尽量少用CSS hack。 CSS规范 在页面中尽量避免使用style属性，即style=”…”。 样式表定义统一为横排书写。尽量不要使用id选择符，id选择符应留给js使用。 CSS里定义的元素名称采用小写。 页面排版禁止使用插入标签进行排版。 CSS应该都用;结尾。 书写格式及顺序：单行书写，过长的行在一个属性结束后的;之后换行。 CSS属性书写顺序，建议遵循定位属性-自身属性-文本属性-其他属性，此条可根据自身习惯书写，但尽量保证同类属性写在一起。 定位属性（比如：display，position，float，clear，visibility等） 自身属性（比如：width，height，margin，padding，border等） 文本属性（比如：font，