XHTML&CSS 标准化文档_html/css_WEB-ITnose

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标准

一、 XHTML文档结构

1、 定义文档类型：

过渡型DTD（XHTML 1.0 Transitional）是比较理想的选择。因为这种DTD允许使用描述性的元素和属性，也比较容易通过W3C的代码校验。

定义文档类型：过渡型（Transitional）

2、 声明命名空间：

xmlns是XHTML NameSpace的缩写，中文翻译为命名空间。命名空间是收集元素类型和属性名字的一个详细DTD，如果不指明各自的命名空间，机会出现语义混淆现象。

声明命名空间

3、 编码类型：

编码类型：GB2312

二、 XHTML书写规范

1、 语法规范：

语法规范

1、 XHTML对大小写敏感，所有的元素和属性都必须小写。

2、 所有的属性必须用引号””括起来。

3、 XHTML要求有严谨的结构，因此所有的标签都必须合理嵌套

4、 所有的属性必须被赋值

5、 所有的特殊符号都用编码表示，例如小于号必须被编码为“<”

6、 不要在注释内容中使用“--”， “--”只能出现在XHTML注释的开头和结结。

7、 XHTML规范废除了name属性，而使用id属性作为统一的名称。

2、 注释规范：

代码的注释规范举例

内容

第二章 CSS标准化及CSS框架

一、 CSS文档统筹与编码规范

1、 CSS文档统筹：

CSS文档统筹(产品类)

1、 Reset样式表：重设浏览器的样式

2、 Base样式表：页面公共的布局样式

3、 Module样式表：小模块、小版块样式表的制定。

CSS文档统筹(发布页面类)

1、 重设浏览器的样式、页面公共的布局样式、小模块、小版块样式表，全部写入style.css一个文件中。

2、 CSS书写的规范：

每个版块用注释加以说明，对日后维护提供很大的方便。

代码的注释规范

/*d1注释说明*/

#id1{ }

#id1 .class{ }

/* id2注释说明*/

#id2{ }

#id2 .class{ }

3、 属性的组织：

根据属性在布局中的重要性，建议先声明布局属性，然后定义盒模型属性，最后定义排版属性。

按主次关系组织

第一步：如果需要的话，先声明布局属性（确定元素的显示），例如这些属性：

float display position …

第二步：如果需要的话再声明盒模型属性（确定元素的形状），例如这些属性：

width height margin padding border background…

第三步：如果需要的话最后声明版式属性（确定元素的内容显示），例如这些属性：

color font font-size font-weight text-align…

4、 A属性排列顺序：

A的属性按照：

a{}

a:link{}

a:visited{}

a:hover{}

a:active{}

这种排列顺序

5、 CSS命名规则：

CSS命名规则应该遵循一定规则，简单的说就是要求直观、简洁、一目了然，方便后期维护和交流。

CSS命名规则

1、 要区分大小写：在命名CLASS和ID时全部使用小写字母

2、 要注意合法性：CSS命名以字母开头，可以连接数字、字母、下划线、连接符。

3、 语义定义明确易懂：CSS命名要词必达意，名称要反映用途和相关信息，同时要简短，不要附带任何冗余信息。

6、 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	补丁文件

二、 Reset 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">

第三章 通用规范

一、 文档结构和命名规范

文档结构规范

1、 Style文件命名规范：

Style文件命名规范详见第二章

2、 Images规范：

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请求。

3、 Javascript规范：

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 减少层级嵌套，减低页面大小。

二、 夸浏览器兼容性

1、 测试代码在各主流浏览器兼容性：

使用浏览器测试代码在各个浏览器中的兼容性：

制作的页面满足IE6+，FF3.5+，Chrome，Safai，Opera的兼容性。

三、 项目的上传

项目页面制作完成后，压缩成rar文件包上传到mantis中。

Rar文件格式如下：XXXX -html-YYYYMMDD.rar

说明：

XXXX??项目名称，例如：家居产品库项目

YYYYMMDD??年月日，例如：20100315

第五章 页面制作中的SEO规范

一、 页面制作中的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无渐变效果。

例如下图白色阴影部分，此类设计可能会造成切图尺寸过大，或者无渐变效果。