xhtml&CSS文档规范_html css文件 .x-优快云博客

本文介绍了一套用于提高团队协作效率的前端(xhtml、CSS)开发规范，包括文档模板、内嵌代码、标签使用及CSS书写等方面的详细规定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着网站的健壮以及日益庞大的开发文件，为了更好的团队协同配合工作，所以强调前端（xhtml、css）的规范是必要的，个人个性化的习惯无法产生良好的聚合和全面的效果，规范化不是特殊的个人风格，它可以保持编码的统一风格。便于后期的维护

本规范是世界工厂网团队前端（xhtml、CSS）开发规范，本规范并不是一个固定不变的必须严格遵守的条文，随着不断的成熟，将会不断的完善，特殊情况下要灵活运用，酌情使用。但是请大家遵循规范的使用方向。

1. 概述

2.xhtml规范

2.1 xhtml通用默认文档模板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

此处是文档内容

</body>

</html>

注：head区的meta标签建议如上，样式和Javascript的连接调用默认格式规范如上

2.2 xhtml内嵌代码规范（CSS和Javascript）

2.2.1 css内嵌规范

<style type=”text/css”>

…

</style>

2.2.2 Javascript内嵌规范

<script type="text/javascript">

<!--

………………………

--> 

</script>

2.3 xhtml代码规范

2.3 .1起始标签必须对应相应的结束标签

例子：

1. 成对标签 <div></div>

2. 单个标签<img src=”” /> <input type=”text” />

2.3.2所有标签的元素和属性名必须采用小写以及所有属性必须添加引号

例子：

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

1.标签语义性合理嵌套；

是指一般情况下inline元素不能嵌套block元素（特殊情况下需要嵌套虽然效果依然可以出来，但是为了统一最好能不使用就不出现这样的情况），请遵循xhtml严格的嵌套规则

2.在布局方面的标签合理嵌套

是说一种页面布局的思想.传统上我们习惯于大层套小层，小层再套小小层，这样来实现1分2 2分4 4分8的一种分解思路.这样是有好处~因为这样结构足够健壮。不过嵌套层数过多不利于阅读以及搜索引擎的抓取以及浏览器解析。所以在固定布局的情况下最好使用小块浮动，它们之间相互独立.其实一个文档就好比是一个2叉树结构.尽量减少根深会很好.

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

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

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

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

2.3.5 img 标签中必须加alt和title属性

例如：<img src=”logo.jpg” alt=”世界工厂网” title=”世界工厂网” />

备注：一般情况下，如果图片固定宽高的话最好在img标签中添加width和height属性.

2.3.6注释

例如：

避免在2个浮动块之间添加注释.以免引发IE6的BUG

3 CSS规范

3.1复位CSS

至于为什么要复位CSS就不多说了，结合目前常用的，结合自己的习惯自己的复位CSS如下（包括基本的CSS样式片段）

body,ul,ol,li,p,h1,h2,h3,h4,table,td,th,form,fieldset,img,dl,dt,dd,input,select,textarea{margin:0;padding:0;}

body{text-align:left;"宋体",arial; font-size:12px; color:#333; background:#ffffff;}

h1,h2,h3,h4{font-size:12px; font-weight: normal;}

table {border-collapse:collapse;border-spacing:0;}

ol,ul {list-style:none outside none;}

input,select {vertical-align:middle;font-size:12px;}

img,a img{border:0;}

em{font-style:normal;}

a{text-decoration:none;color:#222;}

a:hover{text-decoration:underline;color:#C00;}

.fontArial{}

.blod{font-weight:bold}

.disNone{display:none}

.disBlock{display:block}

.disInline{display:inline}

.oh{overflow:hidden}

.pr{position:relative;}

.pa{position:absolute;}

.fl{float:left;}

.fr{float:right;}

.tc{text-align:center}

.tr{text-align:right}

.cursor{cursor:pointer;}

.clear{clear:both;font-size:1px;width:1px;height:0;visibility:hidden;margin-top:0px!important;
*margin-top:-1px;line-height:0}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{display:inline-block;}

.clearfix{display:block;}

3.2CSS书写规范

3.2.1 CSS全部属性和值必须小写且所有非0的取值必须加上单位且后面的分号必须加上

例如：FONT-SIZE:12必须写成font-size:12px;

必须小写

所有非0的值必须加上单位

最后的分号必须加上

3.2.2 CSS缩写的规范

原则上能缩写的CSS样式必须缩写

比方说：

background:#fff url(1.jpg) no-repear left top;有人推荐颜色代码可以缩写，比如#ff0000缩写成#f00，个人不推荐，颜色还是用16位进制数全部写全.一是方面阅读,二是减少系统解析处理步骤（貌似#f00是先处理成#ff0000再处理效果,这样缩写得不偿失）。

（关于background-position的写法第一个值是 x轴上的第二个值是Y轴上的，）

还有margin padding border的4个方向缩写，这样的缩写方法很多，具体的缩写根据情况而定，不过要尊重先全局后局部的原则以及trbl（上-右-下-左）的原则。

列出几个常用的写法例子：

Padding:10px 5px 20px;（上：10px 左：5px 右：5px 下：20px）

Padding:10px auto; （上：10px 左：auto 右：auto 下：10px）

Padding:10px;padding-right:0px;或者padding:10px 0 10px 10px; （上：10px 右：0 下：10px 左：10px）

Border:1px #000 solid;border-left:none;

Border:1px solid;border-color:#ffffff #000000 #000000 #000000

3.2.3CSS属性书写顺序

推荐一个（和自己写CSS的思维思路一致，大致顺序是这样，根据具体情况自行删减。）：

#demo{浮动，宽度，高度，行高，外边距，内边距，边框，背景，定位，定位属性，其他样式}

3.2.4 css书写排版规范