微萌绽放HTML／CSS代码开发规范文档.doc

HTML/CSS代码开发规范文档 微萌绽放 杨鑫磊整理 目 录 1、前言 4 2、HTML编码规范 4 2-1HTML标记的关闭规范 4 2-2HTML文件头基本标记 4 2-2HTML正文代码标记元素 5 2-3HTML标记的缩进规范 6 3、HTML文件引入CSS样式代码和Javascript代码规范 6 3-1引入css样式代码规范 6 3-2引入Javascript代码规范 7 4、HTML注释标签!--和-- 8 5、CSS编码规范 8 5-1 CSS编码要求 8 5-2 CSS样式表规范 8 5-3 CSS命名规范 9 5-4样式文件命名 10 5-5样式文件布局 11 6、CSS常规书写规范及方法 11 6-1文件调用方法: 11 6-2 CSS结构化书写 11 6.2.1派生选择器： 11 6.2.2辅助图片用背影图处理： 12 6.2.3结构与样式分离： 12 6.2.4文档的结构化书写 12 6-3 HACK CSS书写规范 13 6.3.1 IE6、IE7、Firefox之间的兼容写法 13 6.3.2屏蔽IE浏览器 14 6.3.3清除浮动 14 6.3.4鼠标手势 15 7、CSS性代码缩写 15 7.1不同类有相同属性及属性值的缩写 15 7.2同一属性的缩写 16 7.3内外侧边框的缩写 16 7.4颜色值的缩写 18 8、CSS注释书规范 18 8.1行间注释 18 8.2整段注释 18 1、前言 本编程规范适用于需要编写HTML/CSS代码的网页程序开发人员。本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通2、HTML编码规范 HTML是一种标记语言, HTML没有任何真正的编程语言中的循环或是流程控制语句。然而，HTML代码的格式和风格是非常重要的，因为要经常对HTML代码进行维护和修改，因此HTML代码必须有很清晰的逻辑结构和布局,增强可读性，而使其易懂和易于维护。HTML代码本身是不区分大小写的，但是为了更好的统一代码布局，项目中HTML文件标记都以小写为主。 2．1 HTML标记的关闭规范 HTML文档的正文都应在body/body标记中间，而body标记则应包含在html和/html标记之间。如： html body正文/body /html 标记不能交叉编码： 例如: pfont内容/p/font 正确编码为：pfont内容/font/p 开始和关闭标记放在一行的标记有: 例如: b和/b ? u和/u ? i和/i ? 各种标题标记， 如h1…/h1 h2…/h2 h3…/h3 h4…/h4 h5…/h5 ? a和/a apan等等 2．2 HTML4.01 html5文件头基本标记 Html4.01实例 ①!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd ②html xmlns=/1999/xhtml ③meta http-equiv=Content-Type content=text/html; charset=utf-8 /meta http-equiv=Content-Script-Type content=text/javascript　meta http-equiv=Content-Style-Type content=text/css ④meta name=Robots content=all ⑤meta name=keywords content=关键词（逗号分隔） ⑥meta name=description content=描述词（逗号分隔） head ⑦link href=样式文件名.css rel=stylesheet type=text/css / ⑧script language=javascript type=text/javascript src=JS文件名.js/script title页面标题名/title 　　/head 说明: ①和② 是html网页基本的标准协义,包含文件中顶部可以不用此标签。 ③我们的中文环境中用utf-8编码,一般通常是用GB2312编码的，项目中用utf-8是为了防止编码错误显示和浏览时乱码的现像。新建文件时文件通常是ANSI或其它格式的,所以编码时也按照该格式的编码,容易导致浏览乱码。这点要注意检查，可以用记事本将文件另存时,选定utf-8格式保存文件.