资源描述
目录
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通用模板
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Portal</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link type=”text/css” rel=”stylesheet” href=”css/common.css” media=”all” />
<link type=”text/css” rel=”stylesheet” href=”css/landing.css” media=”all” />
<script type=”text/javascript” src=”js/prototype.js”></script>
</head>
<body>
……
</body>
</html>
说明：
1.<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>为DOCTYPE声明，DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。
2.<html xmlns=”http://www.w3.org/1999/xhtml”>为名字空间声明。
3.<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />为定义语言编码。
4. <link type=”text/css” rel=”stylesheet” href=”css/common.css” media=”all” />
为调用外部样式表。
5. <script type=”text/javascript” src=”js/prototype.js”></script>
为调用外部的javascript文件。
3.2 meta标签说明
为了能够更好的为搜索引擎准备内容，meta标签采用如下的定义方式，请在页面中据需要，自行添加。
· 允许搜索机器人搜索站内所有链接。
<meta name=”robots” content=”all” />
· 设置站点作者信息
<meta name=”author” content=”设计者 “ />
· 设置站点版权信息
<meta name=”Copyright” content=”© 版权” />
· 站点的简要介绍(推荐)
<meta name=”description” content=”东方新干线，汽车，买车“ />
· 站点的关键词(推荐)
<meta name=”keywords” content=”东方新干劲线，全球中文汽车信息第一站” />
3.3页面内嵌样式表和页面内嵌javascript说明
请在html中的<head></head>之间自行添加。
· 内嵌css代码
<style type=”text/css”>
……
</style>
· 内嵌javacript代码
<style type=”text/javascript”>
……
</style>
备注：如无特殊需要，请尽量避免在html内部添加css和javascript，应统一采用外部链接的方式进行调用。
3.4 xhtml代码规范
1. 起始标签必须对应相应的结束标签
xhtml要求严谨的结构，所有标签必须关闭，如果是单独不成对的标签，在标签最后添加” / ”来关闭。
例如：1.成对标签 <strong></strong>,<tr></tr>
2.不成对标签 <br /> ,<hr />, <input type=”text” />,<img src=”logo,gif” alt=”logo“ />
2.所有标签的元素和属性名必须采用小写
与html不同，xhtml对大小写区分敏感，xhtml要求标签的元素和属性名必须小写,避免大写及大小写夹杂。
例如：<BODY>必须写成<body>, “onMouseOver”必须写成 “onmouseover”
3.所有属性必须添加引号
例如： <div id=mainFrame></div> 必须写成 <div id=”mainframe”></div>
4.所有标签必须采用合理嵌套
例如：<p><b></p></b> 必须改为 <p><b></b></p>
备注：禁止inline级标签嵌套block级标签,如<a href=”#”><div ></div></a>
5.所有属性必须赋一个值
例如：<td nowrap><input type=”checkbox” name=”shirt” value=”medium” checked></td>
必须改为<td nowrap=”nowrap”><input type=”checkbox” name=”shirt” value=”medium” checked=”checked”></td>
6把所有<、&、>等特殊符号用编码表示
· 任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
· 任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
· 任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
7.img 标签中必须加alt属性
例如：<img src=” ../images/**.gif“ alt=”logo” />
备注：除特殊情况外，不要在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.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; } 然后给每一段加上 <p> 标记，注意，请不要省略 </p> 结束标记 。
· 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用<br /> 来人工干预分段，请使用<p>来控制分段（特殊情况除外） 。
· 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
· 所有的字号都应该用样式表来实现，禁止在页面中出现 <font size=?> 标记。
· 请不要在网页中连续出现多于一个的 ；也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin,来实现。
· 中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。
· 行距建议用百分比来定义，常用的两个行距的值是line-height:1.2/1.5。（特疏情况除外） 。
· 在编写代码时，请注意使用缩进和添加适当的注释，在每个功能块的上下添加必要的注释，如<!–nav beginà<div id=”nav”>……</div><!—nav endà。代码缩进的时候请使用Tab，避免使用空格进行代码缩进。
· 除特殊情况外，不要在标签中使用样式，如<div style=”border:1px solid #000”></div>,应该把样式写在相应的外部样式表中。
· 如遇到数据表格的时候，请使用table,但table的使用必须遵循语义的标准，
表格头部请使用<thead></thead>,表格的主题内容请使用<tbody></tbody>
表格的尾部请使用<tfoot></tfoot>,表格的抬头请使用<caption></caption>,
如为table添加摘要信息，请在table标签内添加summary属性，如<table summary=“这是一个具有亲和力的表格的演示”></table>.
备注：标准的html表格代码如下：
<table summary=“这是一个具有亲和力的表格的演示”>
<caption>使用标准浏览器访问 <a href=”http://www.DOMAIN.com/”>http://www. DOMAIN.com/</a> 的用户逐月上升 </ caption >
<thead>
<tr>
<th>浏览器 / 月 </th>
< th >2005 / 11 </th>
< th >2006 / 04 </ th >
< th >2006 / 05 </ th >
</tr>
</thead>
<tfoot>
<tr>
<th>总计</th>
<td>1,646 ( 98.45% )</td>
<td>6,978 ( 99.48% ) </td>
<td>5,366 ( 99.56% ) </td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Internet Explorer</th>
<td>1,535 (91.81%)</td>
<td>5,905 (86.41%)</td>
<td>4,550 (84.42%)</td>
</tr>
</tbody></table>
· 制作页面的导航时，请使用<ul>,<ol>,<dl>来进行定义。
· 如果遇到标题时，请使用h1~h6进行定义，避免出现<div class=”title”>……</div>的情况。
· 在网页上应尽量少使用Java和ActiveX。因为并不是每一种浏览器都需要使用它，只有那些Netscape和Explorer的早期版本的使用者才需要它。另外Mac在处理Java时也存在问题，过分地使用Java，会使Mac崩溃。
· 如果在页面设计时能够不使用框架就尽可能不使用框架，在使用框架时会产生许多的问题。更重要的是，搜索引擎常常被框架混淆，从而不能收录网站内容，不利网站的推广。
· 如果可以使用图片或者其他方式替代Flash动画，尽可能不使用Flash动画，因为动画图标比较耗费系统资源，对于使用比较慢的计算机的访问者使网站的操作变得很困难。
· 图像链接尽量不要设置成Image Map热点链接。
· 网页的体积是一个很重要的设计因素。在不影响网页整体质量的前提下尽可能把网页做到体积最小，保证用户的快速下载。一个标准的网页应不大于60K，通过56K调制解调器加载不应超过30秒的时间。另外采用页面分块也有利于页面的快速显示。
5.2 css文件规范
· 定义id，class时，请用英文，单词之间避免用空格，连字符，下划线，单词超过2个以上，第二个单词首字母大写，如#leftTitle，.footerNav。
· 对于每个独立的css文件中，子级元素的定义必须采用子类的定义方式，如
#mainNav .btn01,#mainNav DL DT，这样可以避免样式定义的冲突。
· 对于id，class的命名参见如下方式：
页头：headerArea
登录条：loginbarArea
标志：logoArea
侧栏：sidebarArea
广告：bannerArea
导航：navArea
子导航：subNavArea
菜单：menuArea
子菜单：subMenuArea
搜索：searchArea
滚动：scrollArea
页面主体：mainArea
内容：contentArea
标签页：tabArea
文章列表：listArea
提示信息：msgArea
小技巧：tipsArea
加入：joinusArea
指南：guideArea
服务：serviceArea
热点：hotArea
新闻：newsArea
下载：downloadArea
注册：regsiterArea
状态：statusArea
按钮：btnArea
投票：voteArea
合作伙伴：partnerArea
友情链接：friendLinkArea
底部导航：footerArea
版权：copyRightArea
5.3 html文件命名规范
1. 文件名称统一用小写的英文字母、数字和下划线的组合,文件统一以.html为后缀名。
2. 文件名称必须全部使用与内容相关的英文单词命名（尽量避免使用汉语拼音），对于一个单词难以表达的，可以考虑用多个单词加下划线（-）连接（不能超过四个单词）命名。所有的名称起始和结尾不能使用下划线（-）。
3.如果出现三个或者三个以上的单词来命名时，最关键的单词排在最前面。如：交易市场中产品添加的帮助文件 命名为 help_product_add.html。
4. 命名中可以使用公认的单词缩写形式。如：用户注册文件 为 user_reg.html 而不必写成 user_register.html。
5. 出现两个或者两个以上文件内容相关或者相似时使用数字进行标注。
6. 命名不准出现纯数字纯英文字母，不规则英文缩写，多个单词不用下划线连接等错误。严禁使用汉字对文件命名。以下形式为非法 ：
3.html；
tt.html；
productlist.html
update_pd.html(修改用户密码文件update-pwd.htm 为合法 因为 pwd 是password的缩写)
下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明 html 文件的命名原则
l 所有属于“国内新闻”的新闻依次取名为： china_1.html, china_2.html, …
l 所有属于“国际新闻”的新闻依次取名为：internation_1.html, internation_2.html, …
如果文件的数量是两位数，请将前九个文件命名为： china_01.html, china_02.html 以保证所有的文件能够在文件夹中正确排序。
5.4 css文件命名规范
css文件以英文命名，避免使用汉语拼音，因为每个css文件对应html文件中的单独模块，所以css文件以html中id的值作为文件名，这样便于查找，css文件命名时，如果名字由两个或两个以上单词组成，那么从第二个单词开始，首字母大写。样例参见5.2 css文件规范。
5.5 图片及动画命名规范
1. 名称分为头尾两部分，用小写的英文字母、数字和中横线组合。 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮、图标等等，如无特殊需要，图片应保存为.gif格式 。 一般来说 :
a) 放置在页面顶部或尾部的导航、装饰图案等长方形的图片我们取名： banner
b) 放置在页面顶部、尾部、左侧、右侧等其他位置的广告图片我们取名：nt，由于采用ad会被某些浏览器屏蔽掉，因此采用nt作为广告图片的文件名头部分。
c) 标志性的图片我们取名为： logo
d) 在页面上位置不固定并且带有链接的小图片(如：按钮)我们取名为 btn
e) 在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu
f) 装饰用的照片我们取名： pic
g) 不带链接表示标题的图片我们取名： title
h) 属于背景的图片我们取名：bg
i) 结尾部分用来表示图片的具体含义。
2. 下面是几个样例：
banner
banner-logo.gif; banner-logo.swf
banner-sina.jpg
nt
nt-aboutus.gif; nt-aboutus.swf
nt-job.gif
btn
btn-submit.gif
btn-search.gif
title
title-news.gif
title-send.gif
logo
logo-police.gif; logo-im.gif;logo-gold.jpg;logo-free-01.gif
logo-national.gif
pic
pic-people.jpg
pic-hill.jpg
ico
ico-logo.gif;ico-add.gif;ico-open.gif;
ico-back.gif
ico-next.gif
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
