htmlcss规范.docx

4.所有标签必须采用合理嵌套

例如：

备注：

禁止inline级标签嵌套block级标签,如

5.所有属性必须赋一个值

例如：

必须改为

6把所有<、&、>等特殊符号用编码表示

∙任何小于号（<），不是标签的一部分，都必须被编码为<

∙任何大于号（>），不是标签的一部分，都必须被编码为>

∙任何与号（&），不是实体的一部分的，都必须被编码为&

7.img标签中必须加alt属性

例如：

备注：

除特殊情况外，不要在img标签中添加width和height属性，如有需要，请在css中定义。

8.注释

例如：

–这里是注释–>

4.css代码规范

4.1共享css模板

所有html页面都必须调用此共享css文件

comon.css文件代码如下：

BODY

{

margin:

0;

padding:

0;

color:

#000;

font-size:

0.75em;

font-family:

arial,verdana,sans-serif;

text-align:

center;

line-height:

1.2;

background:

#ECECEC;

}

TD

{

font-size:

12px;

}

*

{

margin:

0;

padding:

0;

}

DL,

DD,

DT,

OL,

UL,

LI

{

list-style-type:

none;

list-style-image:

url（）;

}

IMG

{

border:

0;

}

.fL

{

float:

left;

}

.fR

{

float:

right;

}

.clr

{

clear:

both;

font-size:

0;

}

.dpB

{

display:

block;

}

.dpI

{

display:

inline;

}

.dpN

{

display:

none;

}

.taL

{

text-align:

left;

}

.taR

{

text-align:

right;

}

.taC

{

text-align:

center;

}

4.2css代码书写规范

1所有css属性和值必须采用小写的形式

如：

FONT-SIZE:

12PX;必须改为font-size:

12px;

2所有css值的后面必须加分号结束

如：

background:

#FFF必须写成background:

#FFF;

3除特殊情况外，css代码必须采用简写形式（这样可以节约代码）:

如：

1.margin-top:

5px;margin-left:

0;margin-right:

5px;margin-bottom:

10px;

改写为：

margin:

5px5px010px;

2.padding-top:

5px;padding-left:

5px;padding-right:

5px;padding-bottom:

5px

改写为：

padding:

5px;

3.background-color:

#787878;

background-image:

url（../images/**.gif）;

background-repeat：

no-repeat;

background-position:

lefttop;

改写为background:

#787878url（../images/**.gif）no-repeatlefttop;

备注：

常规的简写顺序（必须遵守）

Background（背景）：

背景颜色、背景图像、背景位置、背景重复

Border（边框）：

边框宽度、边框风格、边框颜色

border-bottom（底部边框）：

底部边框宽度、底部边框样式、底部边框颜色

border-left（左侧边框）：

左侧边框宽度、左侧边框样式、左侧边框颜色

border-right（右侧边框）：

右侧边框宽度、右侧边框样式、右侧边框颜色

border-top（顶部边框）：

顶部边框宽度、顶部边框样式、顶部边框颜色

font（字体）：

字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸

list-style（列表样式）：

列表样式图像、列表样式位置、列表样式类型

margin（空白）：

顶部空白、右侧空白、底部空白、左侧空白

padding（间隙）：

顶部间隙、右侧间隙、底部间隙、左侧间隙

4定义字体大小时，如果值是0的时候，可以省略单位（px,em,%等），其余情况必须添加相应的单位。

5代码书写格式

#mainbox{margin:

0;padding:

0;width:

100px;}

统一写成

#mainbox

{

margin:

0;

padding:

0;

width:

100px;

}

6background-position的值要统一单位

如：

background-position:

lefttop;

background-position:

3px5px;

background-position:

50%50%;

禁止写成文字和数字同时出现。

7如果css中出现html标签，则html标签必须采用大写的形式

如：

#mainulli必须写成#mainULLI

8颜色代码值必须采用大写的形式，如果两个相邻的字母和数字两两相同，则采用所示形式

如：

#cdfebc改写为#CDFEBC,#FF0000改写为#F00

9注意A标签在css中的书写顺序

A：

link

A：

visited

A:

hover

A:

actived

5.网站文件规范

5.1html文件规范

∙网站采用xhtml+css布局的方式，抛弃传统的表格布局，这样做的目的是为了确保html代码的整洁性，这样更利于弄清代码的结构，使其语义化。

（不是不用表格，表格不是用来布局，而是用在相应的数据表格位置）

∙为了确保网页的可读性，使字体能够根据不同的需要放大缩小，字体统一采用em做单位，下面前给出字体的px值和em值的对应关系：

11px——————————-0.7em

12px——————————-0.75em

13px——————————-0.8em

14px——————————-0.875em

15px——————————-0.95em

16px——————————-1em

17px——————————-1.05em

18px——————————–1.125em

19px——————————–1.2em

20px——————————–1.25em

∙根据设计的图片，把html代码相应的模块化，也就是说，根据设计中不同的功能模块，把html代码进行细分，在每一块功能区域的最外层用一个div进行嵌套，

相应id的值对应独立的css文件，即css文件名为id的值。

∙排版中我们经常会遇到需要进行首行缩进的处理，不要使用；或者全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:

2em;}然后给每一段加上

标记，注意，请不要省略

∙为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用
来人工干预分段，请使用

来控制分段（特殊情况除外）。

∙不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。

∙所有的字号都应该用样式表来实现，禁止在页面中出现

>标记。

∙请不要在网页中连续出现多于一个的；也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent,padding,margin,来实现。

∙中英文混排时，我们尽可能的将英文和数字定义为verdana和arial两种字体。

∙行距建议用百分比来定义，常用的两个行距的值是line-height:

1.2/1.5。

（特疏情况除外）。

∙在编写代码时，请注意使用缩进和添加适当的注释，在每个功能块的上下添加必要的注释，如

–navbegin→……