XHTML&CSS标准化文档
20100329更新
目 录
第一章 XHTML标准... 2
一、 XHTML文档结构... 2
1、 定义文档类型：... 2
2、 声明命名空间：... 2
3、 编码类型：... 2
二、 XHTML书写规范... 3
1、 语法规范：... 3
2、 注释规范：... 3
第二章 CSS标准化及CSS框架... 4
一、 CSS文档统筹与编码规范... 4
1、 CSS文档统筹：... 4
2、 CSS书写的规范：... 5
3、 属性的组织：... 6
4、 A属性排列顺序：... 6
5、 CSS命名规则：... 7
6、 CSS命名方法：... 7
二、 Reset CSS. 10
三、 清除浮动方法... 11
第三章 通用规范... 12
一、 文档结构和命名规范... 12
1、 Style文件命名规范：... 13
2、 Images规范：... 13
3、 Javascript规范：... 14
第四章 项目制作完成... 15
一、 代码的优化（制作部分）... 15
二、 夸浏览器兼容性... 16
1、 测试代码在各主流浏览器兼容性：... 16
三、 项目的上传... 16
第五章 页面制作中的SEO规范... 17
一、 页面制作中的SEO规范... 17
附录：设计规范... 18
一、 页面设计尺寸... 18
二、 字体规定... 18
三、 字号规定... 18
四、 行高规定... 18
五、 图片尺寸规范... 19
六、 文本颜色... 20
七、 切图规则... 20
第一章 XHTML标准
过渡型DTD（XHTML 1.0 Transitional）是比较理想的选择。因为这种DTD允许使用描述性的元素和属性，也比较容易通过W3C的代码校验。
| 定义文档类型：过渡型（Transitional） |
|
|
xmlns是XHTML NameSpace的缩写，中文翻译为命名空间。命名空间是收集元素类型和属性名字的一个详细DTD，如果不指明各自的命名空间，机会出现语义混淆现象。
| 声明命名空间 |
编码类型：GB2312
| 语法规范 |
| 1、 XHTML对大小写敏感，所有的元素和属性都必须小写。 2、 所有的属性必须用引号””括起来。 3、 XHTML要求有严谨的结构，因此所有的标签都必须合理嵌套 4、 所有的属性必须被赋值 5、 所有的特殊符号都用编码表示，例如小于号必须被编码为“<” 6、 不要在注释内容中使用“--”， “--”只能出现在XHTML注释的开头和结结。 7、 XHTML规范废除了name属性，而使用id属性作为统一的名称。 |
| 代码的注释规范举例 |
|
内容 |
第二章 CSS标准化及CSS框架
| CSS文档统筹(产品类) |
|
1、 Reset样式表：重设浏览器的样式 2、 Base样式表：页面公共的布局样式 3、 Module样式表：小模块、小版块样式表的制定。 |
| CSS文档统筹(发布页面类) |
|
1、 重设浏览器的样式、页面公共的布局样式、小模块、小版块样式表，全部写入style.css一个文件中。 |
每个版块用注释加以说明，对日后维护提供很大的方便。
| 代码的注释规范 |
| /*d1注释说明*/ #id1{ } #id1 .class{ } /* id2注释说明*/ #id2{ } #id2 .class{ } |
根据属性在布局中的重要性，建议先声明布局属性，然后定义盒模型属性，最后定义排版属性。
| 按主次关系组织 |
| 第一步：如果需要的话，先声明布局属性（确定元素的显示），例如这些属性： float display position … 第二步：如果需要的话再声明盒模型属性（确定元素的形状），例如这些属性： width height margin padding border background… 第三步：如果需要的话最后声明版式属性（确定元素的内容显示），例如这些属性： color font font-size font-weight text-align… |
A的属性按照：
a{}
a:link{}
a:visited{}
a:hover{}
a:active{}
这种排列顺序
CSS命名规则应该遵循一定规则，简单的说就是要求直观、简洁、一目了然，方便后期维护和交流。
| CSS命名规则 |
| 1、 要区分大小写：在命名CLASS和ID时全部使用小写字母 2、 要注意合法性：CSS命名以字母开头，可以连接数字、字母、下划线、连接符。 3、 语义定义明确易懂：CSS命名要词必达意，名称要反映用途和相关信息，同时要简短，不要附带任何冗余信息。 |
下表为常用命名举例：
| 布局常用名称： | |||
| 名称 | 说明 | 名称 | 说明 |
| wrap | 外套 | container | 容器 |
| site | 站点 | content | 内容块 |
| nav | 导航 | column | 栏 |
| main | 主体 | left | 左 |
| layout | 布局 | center | 中 |
| sidebar | 侧栏 | right | 右 |
| 模块常用名称： | |||
| 名称 | 说明 | 名称 | 说明 |
| logo | 标志 | banner | 广告条 |
| login | 登录 | loginbar | 登录条 |
| regsiter | 注册 | search | 搜索 |
| shop | 购物车 | list | 列表 |
| tool/toolbar | 工具条 | service | 服务 |
| tab | 标签页 | hot | 热点 |
| source | 资源 | news | 新闻 |
| site_map | 网站地图 | download | 下载 |
| about_us | 关于我们 | copyright | 版权 |
| partner | 合作伙伴 | friendlink | 友情链接 |
| guide | 指南 | vote | 投票 |
| joinus | 加入 | header | 页眉 |
| footer | 页脚 | homepage | 首页 |
| 类常用名称： | |||
| 名称 | 说明 | 名称 | 说明 |
| title | 标题 | current | 当前 |
| label | 标签 | spec | 特别 |
| note | 注释 | red | 红色 |
| summary | 摘要 | submit | 提交 |
| msg | 提示信息 | textbox | 文本框 |
| status | 状态 | drop | 下拉 |
| tips | 小技巧 | btn | 按钮 |
| scroll | 滚动 | form | 表单 |
| icon | 图标 | count | 统计 |
| arr/arrow | 箭头 | crumb | 导航 |
| cor/corner | 转角/圆角 | breadcrumb | 导航提示 |
| 导航常用名称： | |||
| 名称 | 说明 | 名称 | 说明 |
| nav | 导航 | menu | 菜单 |
| mainnav/globalnav | 主导航 | topnav | 顶导航 |
| subnav | 子导航 | sidebar | 边导航 |
| leftsidebar | 左导航 | rightsidebar | 右导航 |
| submenu | 子菜单 | dropmenu | 下来菜单 |
| sidebaricon | 边导航图标 | menucontainer | 菜单容器 |
| 文件常用名称： | |||
| 名称 | 说明 | 名称 | 说明 |
| master.css | 主要文件 | themes.css | 主体文件 |
| layout.css | 布局、版面文件 | base.css | 基本公共文件 |
| columns.css | 专栏文件 | module.css | 模块文件 |
| font.css | 文字样式文件 | forms.css | 表单文件 |
| print.css | 打印样式文件 | mend.css | 补丁文件 |
CSS Reset是指重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以有了CSS Reset，以让网页的样式在各浏览器中表现一致。
CSS Reset的代码。
| CSS Reset |
| html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0; } a img, iframe { border: none; } ol, ul { list-style: none; } input, textarea, select, button { font-size: 100%; font-family: inherit; } select { margin: inherit; } /* Fixes incorrect placement of numbers in ol’s in IE6/7 */ ol { margin-left:2em; } |
建议将Reset CSS代码保持为reset.css上传服务器。所有设计制作人员统一引用这个文件。管理员在需要的时候可以维护更新此文件。（发布类页面，将CSS Reset代码写在style.css中。）
使用代码中的ClearFix的方法清除浮动，不会像传统方法清楚浮动时，在页面中增加无用的空div，破坏文档的结构。
ClearFix的使用方法，在需要清除浮动的父级菜单，添加class属性clearfix
| ClearFix的CSS代码 |
| /* == clearfix == */ .clearfix:after { /*/*/ content: "."; /* IE8 hack */ display: block; height: 0; clear: both; visibility: hidden; } /* IE7 hack */ .clearfix { display: inline-block; } /* IE-mac, IE5, IE6 */ * html .clearfix { height: 1%; } .clearfix { display: block; } |
| ClearFix的用法 |
|
class="clearfix">
|
第三章 通用规范
| 文档结构规范 |
Style文件命名规范详见第二章
| Images命名规范 |
| 1、CSS切图文件按照下列命名规范：（XXX为自定义名称） l b01.png l b02.png l … l bN.png 2、页面中的其他照片类图片引用绝对地址的图片，不做切图处理。 |
| Images切图规范 |
| 1、 采用jpg、gif、png作为切图输出格式。 2、 切图图片大小根据具体项目制定，要求尽量优化图片。 3、 CSS背景图片输出为PNG 8。PNG 8除了不支持动画外，PNG8有GIF所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩。所以，大多数情况下，都应该用 PNG8不是GIF（除了非常小的图片GIF会有更好的压缩外）。 4、 同类型的图片进行CSS Sprites优化。减少http请求。 |
| Javascript规范 |
| 1、 统一采用jquery框架，建立常用JavaScript库和使用文档 2、 Js命名规范：jquery-XXXX.pack.js（XXXX为自定义功能模块名称） |
第四章 项目制作完成
1、 CSS代码进行整理，优化文档结构：
l 选择符顶行书写，所有属性都在一行内；
l 使用外部样式表，尽量不使用
l 修改页面样式时，检查样式表的有效性。减少冗余样式代码。
2、 JS代码进行整理，优化文档结构：
l 去除多余的缩进；
l 将多个js代码整理成一个js代码。
3、 HTML代码进行整理，优化文档结构：
l 避免使用iframe和style标签，以减少页面渲染时间；
l 删除不必要的属性标签，例如table标签中的border="0" cellspacing="0" cellpadding="0"等，可以在CSS中定义；
l 删除空标签和无用的标签，清除浮动使用.clearfix类以减少空标签的使用；
l 减少层级嵌套，减低页面大小。
使用浏览器测试代码在各个浏览器中的兼容性：
制作的页面满足IE6+，FF3.5+，Chrome，Safai，Opera的兼容性。
项目页面制作完成后，压缩成rar文件包上传到mantis中。
Rar文件格式如下：XXXX -html-YYYYMMDD.rar
说明：
XXXX??项目名称，例如：家居产品库项目
YYYYMMDD??年月日，例如：20100315
第五章 页面制作中的SEO规范1、 CSS命名避免使用focus作为名称。
2、 页面中不要出现过多strong标签。
3、 页面中h1只能唯一，并且指定为页面重要的标题（与项目管理人员确认）。
4、 页面中，h2~h6标题要按照等级顺序书写。
5、 Img标签中不能缺少alt属性
6、 图片标题使用图片作为背景，缩进隐藏文字，使搜索引擎可以抓取关键词。
7、 文字使用CSS进行文字截取以符合搜索引擎对文字的抓取（与页面发布工程师确认）。
8、在不影响用户体验的情况下给链接加title属性
9、在不影响用户体验的情况下给图片加title属性
10、对于产品页，每个细栏目名称必须是文字，建议是
11、对于产品页，图片下方必须有文字区域
12、通过外部调用的方式使用JS，如果JS必须放到页面中，建议放到主内容以下的位置
13、对每个详情页正文上方增加面包屑
14、代码符合xhtml标准
附录：设计规范1、 大网页面标准尺寸：950px。
2、 其他产品或项目尺寸不限制，具体尺寸将用工具量取设计稿中的尺寸。
1、 页面文本默认字体：宋体。
2、 页面标题默认字体：黑体。
3、 图片内的字体不限制，将切图处理。
1、 默认中文字体最小字号：12px（中文小于12px将变模糊）
2、 默认中文正文标题字号：18px。
1、 默认正文行高：23px。
2、 其他行高不限制，将用工具量取设计稿中文字的行高。
1、 图片尺寸遵循比例标准：
1比1比例标准，尺寸取偶数。例如：
4比3比例标准，尺寸取偶数。例如：
非标比例。例如：
2、 图片留白和边框：
默认图片留白2px（padding:2px）
默认图片边框 1px（border:1px）
1、 文本颜色和链接颜色：
| UI中用色块规定设计中的文字颜色 |
2、 其他无标识文本样色，将吸取设计稿中的颜色数值。
1、 符合下列条件默认输出为图片
文字带边框、阴影、投影、颜色渐变、特殊字体等效果一律切成图片，文字内容不可手动编辑。如果需要活字手动编辑，则文字没有以上特殊效果 。
例如：
2、 渐变阴影切图规范：
png24渐变图片不支持IE6，在IE6中使用滤镜效果会大大增加页面载入的时间，并会造成浏览器崩溃。故不输出为png24图片，一般输出png8图片。Png8无渐变效果。
例如下图白色阴影部分，此类设计可能会造成切图尺寸过大，或者无渐变效果。
