HTML与CSS在应用中的一些规范

 

HTML与CSS在应用中的一些规范

 

一、           HTML部分

 

1、   所有标鉴及属性都要求小写。

 

2、   为了易读性，代码要求采用tab来进行缩进方式缩写。千万不要用空格。

 

3、   尽量多地编写一些注释。例如：

<!-- end of hotelListHotelAddress -->

 

4、   在把expedia网站的table形式转为div时，要求有一层最外层的div能包含所有的内容，并且把这个div的ID名称定为文件的名称。

 

5、   Div对应层要一层一层配对关闭好。

 

6、   在使用浮动float进行左右排列时，一定要在最右边的那个div后面清除浮动。代码如下；

<div class="clearer"></div>

 

7、   避免用一两个字符来做为id及class的名称。

 

8、   对于img的属性alt,title都要同时写上，值一样。

 

9、   对于img,br,input等标签，要自我关闭。例如：

<img src="images/tip_topRt.gif" class="imgSrc7X20"/>

 

10、不要用<b>标签，可用css实现，实在要用的话用<strong>代替。

 

11、我们现在很少用<font>标签，我一般用<span>来替代。

 

12、尽量少用&nbsp;来产生间距。可用css中的margin来实现。

 

13、当在写图片之后紧接着一段文本的代码时，要求这两段xhtml代码写在一行。因为在分成两行时，会在图片与文本间产生不必要的空隙。例如：

<img src="images/tip_icon.gif"/>What are ThankYou Points?

 

13、<br>要统一写成<br class=”clearer”/>

 

14、不要在代码中加入javascript事件，比如onclick

 

15、代码中也不要有任何的样式描述，例如：

                <div width=20 height=60>

                <div style=“width:20px;height:60px”>

                这些写法都是错误的，得把这些东西提取到css中，正确的写法：

                <div class=”XX”>

 

 

二、           CSS部分

 

1、   使用css缩写。使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。比如：

#000000可以缩写为#000;#336699可以缩写为#369;

 

Margin-top:1px; margin-right:0px; margin-bottom:2px; margin-left:1px;可缩写为

margin:1px auto 2px 1px; 顺序：上-右-下-左

 

border-width:1px; border-style:solid; border-color:#000; 可缩写为：

border:1px solid #000;

 

border-top:#ffe4a2 1px solid也是缩小

 

2、   明确定义单位，除非值为0

 

3、   当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。

 

4、   在不同的浏览器中，margin 与 padding的默认值是不一样的，所以统一成：

{
margin:0px;
padding:0px;
}

 

5、   在div中少用padding样式。在FF中的好多尺寸问题都是此属性引起的。

 

6、   多重样式定义

 

.one{width:200px;background:#666;}
.two{border:10px solid #f00;}

调用：

<div class=“one two”></div>

 

7、最近优先原则。如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

p {
margin:4px 0px;
font-size:10px;
color:#3333333;
}
.divTextLink {
font-weight:bold;
color:#660000;
}

 

<p>

        <div class=” divTextLink”> Lorem ipsum dolor set </div>

</p>

 

8、组选择器(Group selectors)

当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

例如：定义所有标题的字体、颜色和margin，你可以这样写：

h1,h2,h3,h4,h5,h6 {

color:#333333;
margin:1px 0px;
}

如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：

h1 { font-size:10px; }
h2 { font-size:11px; }

 

 

9、CSS代码书写统一样式

#hotelResultDisplay div.clearer {

              clear:both; font-size:0px; line-height:0px; height:0px;

}