html是什么？超文本标记(标签)语言——html是由一个一个的标签组成的。
html是网页的源代码，也就是说：所有的网页都是html代码组成的。比如：网页中的一个文本框，就是一行html的代码。
*运行：html代码只能在浏览器中运行。所以不同的浏览器对相同的代码可能会有不同的解释。
html的基本结构
<html>
<head>
<title>我是一个打火机</title>
</head>
<body>
<h1>步步高打火机</h1>
<h3>哪里不会点哪里</h3>
</body>
</html>
*
1，标签有开始就要有结束，有始有终。
2，标签可以相互嵌套，但是要注意不要出现不完全嵌套的情况。
3，标签是用来描述一些具体的样式的，标签中的文字是真正可以显示出来的。
4，所有的标签语言一定要有一个根标签。html语言中的根标签就是<html>
5，<html>中可以分成两个部分<head>和<body>。
其中<head>是用来描述一些该网页中的信息的，一般不会显示。
<body>是用来显示的。所以一般要在网面中显示某个文字或信息，就要将其放到<body>中。
6，html语言不区分大小写
网页摘要信息
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="..." />
<meta name="description" content="..." />
text/html：说明当前的文档是一个文本文档，而是适用于html的。
charset=gb2312：charset是设置当前文档的编码方式。gb2312是一个标准的中文编码方式
中文编码方式还有：
gb2312
gbk
utf-8(我们比较常用的)
html标签分类
块级标签：显示为一个块状，前后隔一行
基本块级标签
布局块级标签
行级标签：按行显示
标题标签(基本块级标签)
<h1>...<h6> 数字越大，文字越小，前后会隔行。
段落标签(基本块级标签)
<p>...</p>
水平线标签(基本块级标签)
<hr/>
有序列表标签(常用于布局的块级标签)
<ol>
<li>列表项</li>
...
</ol>
无序列表标签(常用于布局的块级标签)
<ul>
<li>列表项</li>
...
</ul>
定义描述标签(常用于布局的块级标签)
<dl>
<dt>大熊猫</dt>
<dd>一种生活在中国四川省的一种狗熊</dd>
<dd>注意这是一种危险的动物，不能当宠物</dd>
<dl>
表格
<table>
<tr>
<td><img src=c:\swpaflag.jpg></img></td>
<td>
<table>
<tr><td>大熊猫</td></tr>
<tr><td>一种生活中国四川省的一种狗熊</td></tr>
<tr><td>注意这是一种危险的动物，不能当宠物</td></tr>
</table>
</td>
</tr>
</table>
<form>(常用于布局的块级标签)
<div>(常用于布局的块级标签)
图片标签(行级标签)
<img src="" alt="" title="">
<span></span>
<br/>
W3C有关Web结构的论述
1，内容与表现分离。
*内容：页面中显示出来的所有的文字、图片、声音、影像等信息。内容就是html来负责的。
*表现：页面中显示出来的信息的外在描述。表现就是css来负责。
html——缺少规范化文档，写的标签很乱，没有一定的规则。
xhtml——标签和html完全一样，可以算是一种标签语言，只是xhtml提高html没有规范化的东西。
xhtml1.0规范
1，标签名和属性名都是小写。
2，标签必须关闭。有始有终。
3，属性值必须用引号括起来。
4，标签必须正确嵌套。
5，添加文档类型声明(说明)
5.1，声明必须位于整个文档的最前面。声明有三种级别：严格性、过度类型、框架类型。
5.2，dtd文件是一种格式文件，这种文件规定某种标签语言的特性。
超链接的基本语法
<a herf="要转向的地址" target="目标">显示出来的链接热点文字或图像</a>
绝对路径——路径信息是写死的，不能灵活的修改
相对路径——路径信息是相对于个目录的，这样更灵活一些。
三种超链接
1，页面间链接 需要注意的是相对路径。尤其是../的用法。
2，锚点链接(页面内链接) <a name="xxx"></a> 设置锚点 <a href="#xxx">..</a>
2.1页面间的锚链接 页面间链接+锚点链接<a href="xxx.html#xxx">..</a>
3，功能性链接 邮箱<a href="mailto:邮箱地址">
新增内容:
所有的页面相关文件都要集中存放在一个固定的目录下。目录结构如下：
WebSite(目录)
images(目录)0
css(目录)
index.html(首页文件)
main.html
left.html
注释
<!--注释内容-->
<!----------------------------------------华丽分隔线-------------------------------------->
特殊符号(死记硬背)
空格：
大于(>)：>
小于(<）: <
引号（”）："
版权号() ：©
表单(不是表格)
作用：收集客户端的信息，以包的方式发送给服务器端，客户端可以服务器端进交互。
<form>表单——<form>表单一切表单域的根标签，也就是说：如果想将一个数据提交给服务器，必须将这个数据所在的表单域放一个<form>标签的里面。
重要属性：
action="网页地址" 这个表单往服务器端的哪个网页提交，这个网页地址一般都是xxx.jsp。
method="post/get" 这个表单以什么样的方式提交。post/get
get方式提交，形如：index.html?user=helloworld或index.html?user=yuhf&pwd=123456
*user=helloworld是一个键值对。键是一个系统中唯一的标识，值是通过键检索出来的我们需要的东西。以上代码中user是键，hellowrold是值。
*?号是隔离提交目的地和键值对的。
*&号是隔离两个键值对的符号。
*get方式提交，url最长是128个字节。?现在是不是不知道。
*url——统一资源定位器，我们理解就是地址栏中的信息。
形如：D:\个人重要资料(勿删)\Administrator\桌面\WebSite\admin\gaozi.html
http://www.sohu.com/admin/lgoin.jsp
get总结：不安全，提交的长度有限制，编码有问题、尽量不要用get方式提交中文信息。
post方式提交，形如index.html*看不见提交的参数
post总结：不安全，提交的长度没有限制，编码也有问题，但可以在服务器端统一解决，所以一般用post提交中文信息。
form表单是看不见的，它只是一个逻辑上的概念。
表单执行原理
C/S——客户机/服务器：一部分软件在客户机上安装并运行，一部分软件在服务器上安装并运行，客户机与服务器通过这些软件交互。
例子：魔兽世界
B/S——浏览器/服务器：在客户机上安装浏览器，所有的软件都安装到服务器上。客户机和服务器的交互靠浏览器和安装在服务器上的软件进行。
例子：用浏览器上网
我们现在学习的是B/S
表单执行的原理就是：请求/响应机制，从浏览向服务器叫请求；服务器根据请求来给出响应。a标签转向和form表单提交都叫做请求。
表单元素(表单域)
<input name="" type="" value="" size="" maxlength="" checked="">
1，文本框
<input name="user" type="text"> 在服务器端用String tempString=request.getParameter("user");来获取该文本框中的值。
2，密码框
<input name="password" type="password">
*文本框和密码中的name和type是必须写的。
3，按钮
<input type="submit"> 提交
<input type="reset"> 重置，意义就是恢复默认值，一般来说就是清空。
<input type="button"> 这个按钮没有什么动作。
<input type="image"> 这个按钮是个图片
*按钮中的数据是不需要提交到服务器上的，所以没有什么意义，所以按钮可以不写name。
4，单选按钮
姓 别：<input type="radio" name="abc">男<input type="radio" name="abc" checked="checked">女<input type="radio" name="abcc" checked="checked">春哥<input type="radio" name="abcc" checked="checked">曾哥<br/>
*checked="checked"：默认情况选项被选中
*一组单行按钮name要一致。如果名字不致，则不是一组单行选按钮。
5，复选按钮
你的爱好：打球<input type="checkbox" name="bca" checked="checked">玩游戏<input type="checkbox" name="bca">听音乐<input type="checkbox" name="bca"><br/>
6，上传文件
<input type="file" name="file">
7，下拉列表框
列表是<select>标签
列表中的项<option>标签
<select name="sex">
<option value="">请选择姓别</option>
<option value="1">男</option>
<option value="0">女</option>
</select>
多行文本(域)
<textarea cols="30" rows="5" name="names">大家好，我是xxx</textarea><br/>
*需要注意的是：在多行文本域中，最终提交给服务器不是某个属性的属性值，而是标签的内容。
全部例子程序：
表单效果展示
<form action="../index.html" method="get">
用户名：<input type="text" name="user" maxlength="3" value="yhf"/><br/>
密 码：<input type="password" name="pwd"/><br/>
姓 别：<input type="radio" name="abc">男<input type="radio" name="abc" checked="checked">女<input type="radio" name="abcc" checked="checked">春哥<input type="radio" name="abcc" checked="checked">曾哥<br/>
姓 别：
<select name="sex">
<option value="1">男</option>
<option value="0">女</option>
<option value="" selected="selected">请选择姓别</option>
</select>
你的爱好：打球<input type="checkbox" name="bca" checked="checked">玩游戏<input type="checkbox" name="bca">听音乐<input type="checkbox" name="bca"><br/>
上传图片：<input type="file" name="file" /><br/>
<input type="hidden" name="id" value="007"/>
<textarea cols="30" rows="5" name="names">大家好，我是xxx</textarea><br/>
<input type="submit" value="提交" name="submit">
<input type="reset" value="不是重置，千万别按"><input type="button" value="按我没效果">
</form>
公共属性
value="默认值" 当我们修改文本框的值的时候，value的值也随着被修改。也就是说，我们在文本框中输入的值，就是value的值。
readonly——用户只能看不能改
disabled——灰色，限制用户的使用
post/get
get相对于参数来说的
键=值
学号=姓名
表格基本结构
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
*<table>标签定义了一个表格
*<tr>标签定义了一个行
*<td>标签定义了一个列
*一行加一列就能定义或找到一个单元格。
合并单元格
<table border="1">
<tr>
<td colspan="3">...</td>
</tr>
<tr>
<td rowspan="2">...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
colspan="n"——跨列合并单元格
rowspan="n"——跨行合并单元格
*n是一个正整数，指的是跨n行或n列
表格的高级标签
<caption>表格标题标签
<th>表格表头标签
<thead>表格页眉标签
<tbody>表格主格标签
<tfooter>表格页尾标签
例子程序：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tfoot等分组用法</title>
</head>
<body>
<table width="100%">
<caption>年终数据报表</caption>
<thead style="background: #0FF">
<tr>
<th>月份</th>
<th>收入（RMB）</th>
</tr>
</thead>
<tbody style=" background: #9CC">
<tr>
<td>1月</td>
<td>100</td>
</tr>
<tr>
<td>2月</td>
<td>80</td>
</tr>
<tr>
<td>3月</td>
<td>300</td>
</tr>
<tr>
<td>4月</td>
<td>400</td>
</tr>
<tr>
<td>5月</td>
<td>100</td>
</tr>
<tr>
<td>6月</td>
<td>200</td>
</tr>
</tbody>
<tfoot style="background: #FF0">
<tr>
<td>平均月收入</td>
<td>196.67</td>
</tr>
<tr>
<td>总计</td>
<td>1180</td>
</tr>
</tfoot>
</table>
</body>
</html>
使用表格进行布局对显示格示要求：table-tr-td
1，要显示的数据是较为规整。
2，高和宽要符合一定的标准。
table嵌套布局的缺点：
1，代码量大
2，层次结构相对复杂
3，不利用搜索引擎查找数据
例子程序：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>注册</title>
</head>
<body>
<form method="post" action="register_success.htm">
<table>
<tbody>
<tr>
<td colspan="3"> </td>
<td rowspan="11">
<h4><img src="images/read.gif" alt="alt" />阅读贵美网服务协议</h4>
<textarea name="textarea" cols="30" rows="15" readonly="readonly">欢迎阅读服务条款协议……</textarea>
</td>
</tr>
<tr>
<td>登录名：</td>
<td><input name="sname" type="text" size="24" />（可包含 a-z、0-9 和下划线）</td>
</tr>
<tr>
<td>密码：</td>
<td><input name="pass" type="password" size="26" />（至少包含6个字符）</td>
</tr>
<tr>
<td>再次输入密码：</td>
<td><input name="rpass" type="password" size="26" /></td>
</tr>
<tr>
<td>电子邮箱：</td>
<td><input name="email" type="text" size="24" />（必须包含@字符）</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input name="gen" type="radio" value="男" checked="checked" /><img src="images/Male.gif" alt="alt" />男
<input name="gen" type="radio" value="女" /><img src="images/Female.gif" alt="alt" />女
</td>
</tr>
<tr>
<td>头像：</td>
<td><input type="file" name="upfiles" /></td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="checkbox" value="checkbox" />运动
<input type="checkbox" name="checkbox2" value="checkbox" />聊天
<input type="checkbox" name="checkbox3" value="checkbox" />玩游戏
</td>
</tr>
<tr>
<td>喜欢的城市：</td>
<td>
<select name="nMonth">
<option value="" selected="selected">[请选择]</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="hidden" name="from" value="regForm" />
<input type="submit" name="Button" value="同意右侧服务条款，提交注册信息" disabled="true" /> <input type="reset" name="Reset" value=" 重 填 " />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
框架技术
frameset
<frameset cols="200,*,200" border="5" bordercolor="#FF0000">
<frame name="leftFrame" src="subframe/the_first.html" />
<frame name="mainFrame" src="subframe/the_second.html" />
<frame name="rightFrame" src="subframe/the_third.html" />
</frameset>
最常用的框架分隔方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>创建多框架页面</title>
</head>
<frameset rows="22%,*" frameborder="0">
<frame src="subframe/top.html" name="topframe" scrolling="no" noresize="noresize"/>
<frameset cols="20%,*">
<frame src="subframe/left.html" name="leftframe"scrolling="no" />
<frame src="subframe/right.html" name="rightframe" />
</frameset>
</frameset>
</html>
*<frameset>放在<html>标签的内部，不能放在<body>标签的内部。
*<noframes>标签：现在已经不常用了。该标签用在当浏览器不支持<frameset>标签的时候，用于给用户一个说明。
*<scrolling>标签：是否显示滚动条。
关键内容：
点击左边的<a>标签，使框架内的右边的页面发生变化。
<a href="right.html" target="rightFrame">...</a>
*左边的<a>标签中加入target属性，属性值为框架内右边frame的名字。本例中rightFrame即为框架内右边的名字。
即<frame src="subframe/right.html" name="rightframe" />
target属性的标准用法
属性值可能是
_blank：在一个新窗体中显示内容
_self：在本身窗口中显示内容(默认)
_top：在上级窗口中显示
_parent：在父窗口中显示
iframe
*<iframe>必须放在<body>标签的内部，因为<iframe>是网页的一部分。
CSS的基本语法
<style type="text/css">
标签选择器{属性1:属性值1;属性2:属性值2;...}
类选择器{属性1:属性值1;属性2:属性值2;...}
ID选择器{属性1:属性值1;属性2:属性值2;...}
</style>
*属性1:属性值1——标准的键值对的方式。
标签选择器例子：
<style type="text/css">
li{color:red;font-size:30px;font-family:宋体;}
</style>
*标签选择器声明的名字一定是一个标签。
类选择器的例子：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>商品分类</title>
<style>
li{color:red;font-size:28px;font-family:隶书; }
.blue{color:blue;}
</style>
</head>
<body>
<div>
<ul>
<li class="blue">家用电器</li>
<li>各类书籍</li>
<li class="blue">手机数码</li>
<li>日用百货</li>
</ul>
</div>
</body>
</html>
*类选择器声明的时候用一个“.”做为前缀。
*在使用的时候需要在html标签中加入class="不带前缀的类名"这样的属性和属性值。class属性是html的属性。
*这里的类和java中的类是两个完全没有关系概念。
ID选择器例子程序：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>贵美——商品分类</title>
<style>
#book{font:bold 14px 宋体;}
</style>
</head>
<body>
<div id="book">
<ul>
<li>家用电器</li>
<li>各类书籍</li>
<li>手机数码</li>
<li>日用百货</li>
</ul>
</div>
<div>
<ul>
<li>家用电器</li>
<li>各类书籍</li>
<li>手机数码</li>
<li>日用百货</li>
</ul>
</div>
</body>
</html>
*ID选择器声明的时候用一个“#”做为前缀。
*在使用的时候需要在html标签中加入id="不带前缀的类名"这样的属性和属性值。id属性是html的属性。
综合运用各种选择器的程序例子：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>贵美商城</title>
<style>
#menu{width:200px;background:#ccc;}
li{font-size:12px;color:#636362;}
.menu-class{font:bold 14px 宋体;color:#ff7300;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="menu-class">家用电器</li>
<li>大家电</li>
<li>洗衣机</li>
<li>电冰箱</li>
<li>平板电视</li>
</ul>
<ul>
<li class="menu-class">日用百货</li>
<li>肥皂</li>
<li>洗衣粉</li>
<li>纸巾</li>
<li>洗发水</li>
</ul>
</div> <!--menu end-->
</body>
</html>
文本属性
font——文本属性的缩写形式
font-weight
font-size
font-family
背景属性
background——缩写形式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>背景属性</title>
<style type="text/css">
body{background:orange;}
div{
font:55px 宋体;color:#fff;
width:520px;height:142px;
background:#ccc url(images/bg.png) repeat-x -40px -35px;
letter-spacing:85px;
white-space:nowrap;}
</style>
</head>
<body>
<p> </p>
<div>月亮之内</div>
</body>
</html>
盒式样式例子程序：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>商城</title>
<style>
#menu{width:200px;height:280px;background:url(images/bg.gif) no-repeat;}
li{font-size:12px;list-style:none;line-height:25px;}
.menu-class{font:bold 14px 宋体;color:#ff7300;line-height:35px;}
.menu-li{color:#636362;float:left;width:50px;}
.space{height:15px;}
p{letter-spacing:5px;text-decoration:underline;}
</style>
</head>
<body>
<p>你好</p>
<div id="menu">
<ul class="space">
</ul>
<ul>
<li class="menu-class">家用电器</li>
<li class="menu-li">大家电</li>
<li class="menu-li">洗衣机</li>
<li class="menu-li">电冰箱</li>
<li class="menu-li">相机</li>
<li class="menu-li">电视</li>
<li class="menu-li">DVD</li>
<li class="menu-li">相机</li>
<li class="menu-li">电视</li>
<li class="menu-li">DVD</li>
</ul>
<ul>
<li class="menu-class">日用百货</li>
<li class="menu-li">肥皂</li>
<li class="menu-li">洗衣粉</li>
<li class="menu-li">纸巾</li>
<li class="menu-li">洗发水</li>
<li class="menu-li">洗洁精</li>
<li class="menu-li">毛巾</li>
<li class="menu-li">相机</li>
<li class="menu-li">电视</li>
<li class="menu-li">DVD</li>
</ul>
</div> <!--left-list end-->
</body>
</html>
CSS盒子属性
margin：外边距
padding：内边距
*以上两个属性都应用钟面原则，即不明确指明边距的左右及上下的情况下，采用如下标准：
1，margin:1px,2px,3px,4px //上外边距为1px，右外边距为2px，下外边距为3px，左外边距为4px。
2，margin:1px,2px //上外边距和下外边距为1px，右外边距和左外边距为2px。
3，margin:1px //四边都是1px
4，margin:1px,2px,3px //上左右
5，margin-left:2px
*padding的使用方式和margin是全完一样的。
border
例子程序：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单小结</title>
<style type="text/css">
.textBorder{
border-width:1px;
border-style:solid;
}
</style>
</head>
<body>
<p>申请表</p>
<form action="" method="post" id="form1">
<p>姓名：<input type="text" name="sname" class="textBorder"/><br />
密码：<input type="password" name="password" size="21" class="textBorder"/><br />
照片：<input type="file" name="photo" /><br />
感兴趣的职位：<br />
<input type="radio" name="position" value="0" checked="checked" class="textBorder"/>Web设计
<input type="radio" name="position" value="1" />Web开发<br class="textBorder"/>
向往城市： <select name="city">
<option value="">请选择</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
<option value="香港">香港</option>
<option value="台北">台北</option>
<option value="澳门">澳门</option>
<option value="纽约">纽约</option>
<option value="巴黎">巴黎</option>
<option value="伦敦">伦敦</option>
</select><br />
协议：<br />
<textarea class="textBorder" name="request"cols="26"rows="5" readonly="readonly">求职信息必须真实、准确，本网站只负责向企业推荐。</textarea><br />
<input name="confirm" type="checkbox" checked="checked" />我认真阅读并接受以上协议。<br />
经验:<br />
<select name="exp">
<option>无经验</option>
<option>3 年 </option>
</select>
<br />
<input type="hidden" value="求职者张三" name="username" />
<input type="submit" name="submit1" value="提交" disabled="disabled" />
<input type="reset" name="reset1" value="重置" /></p>
</form>
</center>
</body>
</html>
浮动float——强制不换行
1，失去了块状的显示特征，没有换行了。
2，紧贴上一个浮动元素(同方向)或父级元素的边框，如宽度不够将换行显示。
3，占据行内元素的空间，导致行内元素环绕显示。
clear——强制换行
网页的兼容性测试
1，检查浏览器之间的兼容性
IE6-IE10,firefox等
2，验证是否符合W3C相关标准
可以使用以下某种方法进行检测。
1，Dreamweaver
2，validator.w3.org官方进行在线验证
解决浏览器的兼容问题
针对不同的浏览器，编写相应的CSS样式代码，让各浏览器只解释自己能“识别”的CSS样式代码。这些样式代码被称为“css hack“。
编写CSS hack的思路是根据各浏览器“识别”的特殊符号，编写针对各浏览器的CSS样式代码。
主流浏览器的css hack方式
firefox 无 支持特殊符号"!important"
IE8 \0 语句后，分号前。如：padding:5px;padding:0px\0;
IE7 + 语句或标签前。如：p{width:55px};+p{width:60px;}
IE6 _ + 语句或标签前。如：width:80px;_width:60px;
例子：
#mydiv{
padding:5px; /*firefox*/
padding:10px\0;/*IE8*/
+padding:15px;/*IE7*/
_padding:20px;/*IE6*/
}
*编写顺序一般为先firefox，然后IE8，或IE7，IE6必须放在最后。
IE各版本支持的if语句
IE6 <!--[if IE 6.0]>IE6的HTML代码<![endif]-->
IE7 <!--[if IE 7.0]>IE7的HTML代码<![endif]-->
IE8 <!--[if IE 8.0]>IE8的HTML代码<![endif]-->
具体问题
1，三像素文本慢移问题
出现场景：IE6，在浮动(float)元素后紧跟着一个行内元素，两者之间会有一个3个像素的间隙。
解决方案：单独为IE6设置行内元素为："_margin-left:-3px;"
需要注意的是：如果未声明文档类型为XHTML Transitional或Strict，则所有的IE版本都会有此bug。
代码如下：
<html>
<head>
<title>解决IE6的3像素慢移bug</title>
<style>
body{margin:0px;padding:0px;font-size:13px;}
#container{width:400px;height:150px;background:yellow;zoom:1;}
#div1{display:inline;color:#fff;width:200px;height:150px;background:#666;float:left;}
span{background:#ccc;height:1em;_margin-left:-3px;}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div><span id="sd"><-前面无3像素空间</span>
</div>
</body>
</html>
2，双倍边距问题
出现场景：IE6中，如果元素的浮动方向与margin一致，如左浮动元素设置左外边距("margin-left:50px;")，则外边跑会加倍(显示的左外边距为100px)。
解决方案：设置浮动元素为内联元素("display:inline;")
推荐做法：尽量不使用margin，而用padding实现相同效果。
代码如下：
<html>
<head>
<title>解决IE6的margin双倍bug</title>
<style>
body{margin:0px;padding:0px;font-size:13px;}
#container{width:300px;height:150px;background:pink;}
#div1{_display:inline;color:#fff;background:#666;float:left;margin-left:50px;width:200px;height:100%;}
span{background:#ccc;}
</style>
</head>
<body>
<div id="container">
<div id="div1"><-设置display:inline;则解决此问题</div>
</div>
</body>
</html>
3，不同浏览器默认的内外边距不一致问题
出现场景：ol、ul、dl、dd、form等标签，IE与firefox的外边距、内边距及列表ul，与其浏览器的默认设置不一致。
具体区别如下：
1，IE中，两个<ul>、<ol>、<dl>之间的外边距即margin是19px，而在firefox中是16px。
2，IE中，列表的盒子范围不包括列前面的修饰，而在firefox中包括前面的列表修饰。
3，IE中，<form>元素有默认上外边距19px，而firefox中没有。
解决方案：在全局风格里设置ul、ol、dl、form的填充及外边距为零，并把list-style设置为none。
推荐做法：多行文本布局中，不用外边距和填充，而纯用line-height来实现文本的垂直居中。
代码如下：
*需要使用不同的IE版本和FF看效果
<html>
<head>
<title>IE与Firefox默认外边距与填充的区别</title>
<style>
body{margin:0px;padding:0px;}
form{height:50px;background:#ccc;}
ul,ol,tr,dl{background:#ccc;}
</style>
</head>
<body>
<ul>
<li>ul</li>
<li>ul</li>
</ul>
<ul>
<li>ul</li>
<li>ul</li>
</ul>
<ol>
<li>ol</li>
<li>ol</li>
</ol>
<ol>
<li>ol</li>
<li>ol</li>
</ol>
<dl>
<dt>dl</dt>
<dd>dd</dd>
</dl>
<dl>
<dt>dl</dt>
<dd>dd</dd>
</dl>
<table>
<tr>
<td>tr</td>
</tr>
<tr>
<td>tr</td>
</tr>
</table>
<form>form</form>
</body>
</html>
336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
