Html代码编写小结

 

常用标签：<div></div>、<img />、<ul><li></li></ul>、<a></a>、<MARQUEE></MARQUEE>、<iframe></iframe>

常用事件：onmouseover 、onload

1. <div>与css一起用，注意ie6、火狐、ie9之间的兼容问题和css样式的优先级。

2. 注意：1.书写div时如果div显示图片为避免ie6、火狐、ie9之间的兼容问题，应该尽量把div的css属性的width:px;和height:px;设定好。2.在两个没有float（浮动）关系的div之间加上clear:both;属性来清除浮动。3.透明图片用.png格式。4.尽量用margin+display，因为可以避免层的宽度变化问题。5. 当两个层没有float关系时，而让他们互相重叠，需要用到绝对定位（position:absoulte）和相对定位（position:relative）。

3. 书写时把握好页面div的级别，特别要注意缩进，缩进好了，有助于避免html代码的书写时不必要的错误。先把一个板块的层写好，再写css，速度快。

4. Div层的id和class命名时要尽量与栏目的名字的首拼音字母一致，以后维护时容易找。

 

l ie6、火狐、ie9之间的经常遇到兼容问题：

1. ie6的双重margin。加display:inline属性。

2. 用.png格式带有透明背景的图可以避免ie6、火狐、ie9显示不正常的问题。如果用.gif格式需要ie6对css属性进行特殊处，用：

*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/modules/tagxbysjy/skin/images/jyfw_textbg.png", sizingMethod="scale");对ie6进行处理。

3. css用padding属性处理div（用来显示图片）位置时并对div设定宽度时，div的宽度会增大。

l css样式优先级：

1. 浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式...共12个优先级，总之距离html代码越近优先级越高。

可以利用优先级关系处理以下例：

Html代码：

Css代码：。

5. <a>：当<a>是一张图片时，要加display:block;属性。

6. <MARQUEE onmousemove=stop() onmouseout=start() scrollAmount=2></MARQUEE>

7. Onmouseover主要鼠标放到导航条上时触发的javascript函数改变当前选项样式。

8. 出现位置的问用css的“border:1px solid red;”调试，当画线的时候要特别注意，被调试的层增加了两个像素的高和宽。

9. 写整个html页面时，把效果图一块一块的分开，为了以后客户提取位置修改意见时，更改方便，所以要把把握好每个栏目之间的浮动关系。