html-css规范.doc

目录
1. 概述……………………………………………………………………………. 3
2. 规范化…………………………………………………………………………. 3
2.1规范化简述……………………………………………………………………. 3
2.2规范化的面向对象………………………………………………………….. 3
3. html代码规范…………………………………………………………………3
3.1htm通用模板……………………………………………………………3
3.2met标签说明……………………………………………………………5
3.3页面内嵌式样式表和内嵌式javascript说明………………………….6
3.4xhtml代码规范………………………………………………………………7
4. css代码规范………………………………………………………………….8
4.1 共享css模板………………………………………………………………8
4.2 css代码书写规范…………………………………………………………11
5. 网站文件规范…………………………………………………………14
5.1html文件规范………………………………………………………14
5.2 css文件规范……………………………………………18
5.3 html文件命名规范………………………………………………20
5.4css文件命名规范…………………………………………….21
5.5 图片及动画命名规范…………………………………………..21
1. 概述
本规范是一个开发规范，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。
2．规范化
2.1 规范化简述
强调制作的规范是必要的，因为大型网站项目需要多人的配合协同工作，个性化的东西无法产生良好的聚合效果。规范化不是特殊的个人风格，它可以提高编码工作效率，使代码保持统一的风格，以便于后期的维护。
2.2规范化的面向对象
网页制作人员及编辑人员、技术开发人员。
3. html代码规范
3.1 html通用模板

Portal

<link type=”text/css” rel=”stylesheet” href=”css/common.css” media=”all” />

……

说明：
1.HTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>为DOCTYPE声明，DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。
2.为名字空间声明。
3.为定义语言编码。
4. pe=”text/css” rel=”stylesheet” href=”css/common.css” media=”all” />
为调用外部样式表。
5.
为调用外部的javascript文件。
3.2 meta标签说明
为了能够更好的为搜索引擎准备内容，meta标签采用如下的定义方式，请在页面中据需要，自行添加。
· 允许搜索机器人搜索站内所有链接。

· 设置站点作者信息

· 设置站点版权信息

· 站点的简要介绍(推荐)

· 站点的关键词(推荐)

3.3页面内嵌样式表和页面内嵌javascript说明
请在html中的之间自行添加。
· 内嵌css代码

……

· 内嵌javacript代码

……

备注：如无特殊需要，请尽量避免在html内部添加css和javascript，应统一采用外部链接的方式进行调用。
3.4 xhtml代码规范
1. 起始标签必须对应相应的结束标签
xhtml要求严谨的结构，所有标签必须关闭，如果是单独不成对的标签，在标签最后添加” / ”来关闭。
例如：1.成对标签 ,
2.不成对标签 /> ,b>示
· 任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
· 任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
· 任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
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-aligncenter;
}
4.2 css代码书写规范
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:5px 5px 0 10px;
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:left top;
改写为background:#787878 url(../images/**.gif) no-repeat left top;
备注：常规的简写顺序（必须遵守）
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;
}
6 background-position的值要统一单位
如：background-position:left top;
background-position:3px 5px;
background-position:50% 50%;
禁止写成文字和数字同时出现。
7 如果css中出现html标签，则html标签必须采用大写的形式
如：#main ul li 必须写成 #main UL LI
8 颜色代码值必须采用大写的形式，如果两个相邻的字母和数字两两相同，则采用所示形式
如：#cdfebc 改写为 #CDFEBC , #FF0000 改写为 #F00
9 注意A标签在css中的书写顺序
A：link
A：visited
A : hover
A : actived
5. 网站文件规范
5.1 html文件规范
· 网站采用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。（特疏情况除外） 。
· 在编写代码时，请注意使用缩进和添加适当的注释，在每个功能块的上下添加必要的注释，如……