代碼：
（1）完善clearfix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完善clearfix</title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
子元素和父元素相鄰的垂直外邊距會發(fā)生重疊舅踪，子元素的外邊距會傳遞給父元素
使用空的table標(biāo)簽可以隔離父子元素的外邊距，阻止外邊距的重疊
*/
margin-top: 100px;
}
.box3{
border: 10px red solid;
}
.box4{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*解決父子元素的外邊距重疊*/
/*.box1:before{
content: "";*/
/*display:table可以將一個元素設(shè)置為表格顯示*/
/*display: table;
}*/
/*解決父元素高度塌陷*/
/*.clearfix:after{
content: "";
display: block;
clear: both;
}*/
/*
經(jīng)過修改后的clearfix是一個多功能的樣式，既可以解決高度塌陷，又可以確保父元素和子元素的垂直外邊距不會重疊
*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="box3 clearfix">
<div class="box4"></div>
</div>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
(2)表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
<style type="text/css">
</style>
</head>
<body>
<!--
表單的作用就是用來將用戶信息提交給服務(wù)器的
比如：百度的搜索框 注冊 登錄這些操作都需要填寫表單
使用form標(biāo)簽創(chuàng)建一個表單
form標(biāo)簽中必須指定一個action屬性，該屬性指向的是一個服務(wù)器的地址
當(dāng)我們提交表單時將會提交到action屬性對應(yīng)的地址
-->
<form action="demo075_target.html">
<!--
使用form創(chuàng)建的僅僅是一個空白的表單沛简，我們還需要向form中添加不同的表單項
-->
<!--
在表單中可以使用fieldset來為表單項進行分組，可以將表單項中的同一組放到一個fieldset中
-->
<fieldset>
<!-- 在fieldset可以使用legend子標(biāo)簽罢杉，來指定組名 -->
<legend>用戶信息</legend>
<!--
使用input來創(chuàng)建一個文本框粪小，它的type屬性是text
如果希望表單項中的數(shù)據(jù)會提交到服務(wù)器中大磺，還必須給表單項指定一個name屬性
name表示提交內(nèi)容的名字
用戶填寫的信息會附在url地址的后邊以查詢字符串的形式發(fā)送給服務(wù)器
url地址?查詢字符串
格式：
屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&……
在文本框中也可以指定value屬性值，該值將會作為文本框的默認值顯示
-->
<!--
在html中還為我們提供了一個專門用來選中表單中的提示文字的label標(biāo)簽
該標(biāo)簽可以指定一個for屬性探膊，該屬性的值需要指定一個表單項的id值
-->
<label for="um">用戶名</label>
<input id="um" type="text" name="username" value="我是value"><br><br>
<!--
密碼框
使用input創(chuàng)建一個密碼框杠愧，它的type屬性值是password
-->
<label for="pwd">密碼</label>
<input id="pwd" type="password" name="password"><br><br>
</fieldset>
<fieldset>
<legend>用戶愛好</legend>
<!--
單選按鈕
- 使用input來創(chuàng)建一個單選按鈕，它的type屬性使用radio
- 單選按鈕通過name屬性進行分組突想，name屬性相同是一組按鈕
- 像這種需要用戶選擇但是不需要用戶直接填寫內(nèi)容的表單項殴蹄，還必須指定一個value屬性，這樣被選中的表單項的value屬性值將會最終提交給服務(wù)器
如果希望在單選按鈕或者是多選框中指定默認選中的選項猾担，則可以在希望選中的項中添加checked="checked"屬性
-->
性別<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female"><label for="female">女</label>
<br><br>
<!--
多選框
- 使用input創(chuàng)建一個多選框袭灯，它的type屬性使用checkbox
-->
愛好<input type="checkbox" name="hobby" value="zq">足球
<input type="checkbox" name="hobby" value="lq">籃球
<input type="checkbox" name="hobby" value="ymq" checked="checked">羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked">乒乓球
<br><br>
</fieldset>
<!--
下拉列表
- 使用select來創(chuàng)建一個下拉列表
下拉列表的name屬性需要指定給select，而value屬性需要指定給option
可以通過在option中添加selected="selected"來將選項設(shè)置為默認選中
當(dāng)為select添加一個multiple="multiple"绑嘹，則下拉列表變?yōu)橐粋€多選的下拉列表
-->
你喜歡的明星
<select name="start">
<!--
在select中可以使用optgroup對選項進行分組
同一個optgroup中的選項是一組
可以通過label屬性來指定分組的名字
-->
<optgroup label="女明星">
<!-- 在下拉列表中使用option標(biāo)簽來創(chuàng)建一個一個列表項 -->
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">趙薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">趙本山</option>
<option value="ldh">劉德華</option>
<option value="zjl">周杰倫</option>
</optgroup>
</select>
<br><br>
<!-- 使用textarea創(chuàng)建一個文本域 -->
自我介紹<textarea name="info"></textarea>
<br><br>
<!--
提交按鈕可以將表單中的信息提交給服務(wù)器
使用input創(chuàng)建一個提交按鈕稽荧，它的type屬性值是submit
在提交按鈕中可以通過value屬性來指定按鈕上的文字
-->
<input type="submit" value="注冊" />
<!-- <input type="reset">可以創(chuàng)建一個重置按鈕，點擊重置按鈕以后表單中內(nèi)容將會恢復(fù)為默認值 -->
<input type="reset">
<!-- 使用input type=button可以用來創(chuàng)建一個單純的按鈕工腋，這個按鈕沒有任何功能姨丈，只能被點擊 -->
<input type="button" value="按鈕">
<br><br>
<!--
除了使用input，也可以使用button標(biāo)簽來創(chuàng)建按鈕
這種方式和使用input類似擅腰，只不過由于它是成對出現(xiàn)的標(biāo)簽蟋恬，使用起來更加的靈活
-->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按鈕</button>
</form>
</body>
</html>
(3)_target
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模擬后臺服務(wù)器</title>
</head>
<body>
<h1>表單提交成功！趁冈！</h1>
</body>
</html>
（4）框架集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架集</title>
</head>
<!--
框架集和內(nèi)聯(lián)框架的作用類似歼争，都是用于在一個頁面中引入其他的外部的頁面
框架集可以同時引入多個頁面，而內(nèi)聯(lián)框架只能引入一個
在h5標(biāo)準(zhǔn)中渗勘，推薦使用框架集沐绒，而不使用內(nèi)聯(lián)框架
使用frameset來創(chuàng)建一個框架集，注意frameset不能和body出現(xiàn)在同一個頁面中
所以要使用框架集旺坠，頁面中就不可以使用body標(biāo)簽
屬性：
rows乔遮，指定框架集中的所有的框架，一行一行的排列
cols取刃， 指定框架集中的所有的頁面蹋肮，一列一列的排列
這兩個屬性frameset必須選擇一個，并且需要在屬性中指定每一部分所占的大小
frameset中也可以再嵌套frameset
frameset和iframe一樣璧疗，它里邊的內(nèi)容都不會被搜索引擎所檢索
所以如果搜索引擎檢索到的頁面是一個框架頁的話括尸，它是不能去判斷里邊的內(nèi)容的
使用框架集則意味著頁面中不能有自己的內(nèi)容，只能引入其他的頁面
而我們每單獨加載一個頁面病毡，瀏覽器都需要重新發(fā)送一次請求濒翻，引入幾個頁面就需要發(fā)送幾次請求，用戶的體驗比較差
如果非得用建議使用frameset而不使用iframe
-->
<frameset cols="30%, *, 30%">
<!--
在frameset中使用frame子標(biāo)簽來指定要引入的頁面
引入幾個頁面就寫幾個frame
-->
<frame src="demo069_表格.html" />
<frame src="demo070_給表格添加樣式.html" />
<!-- 嵌套一個frameset -->
<frameset rows="30%, 50%, *">
<frame src="demo072_表格的布局.html" />
<frame src="demo073_完善clearfix.html" />
<frame src="demo074_表單.html" />
</frameset>
</frameset>
</html>
(5)ie6png圖片的修復(fù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ie6png的修復(fù)</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-image: url(img/3_1.png);
background-repeat: no-repeat;
}
.box2{
width: 200px;
height: 200px;
background-image: url(img/3.png);
background-repeat: no-repeat;
}
</style>
</head>
<body style="background-color: #bfa;">
<!--
在IE6中對圖片格式png24支持度不高，如果使用的圖片格式是png24有送，則會導(dǎo)致透明效果無法正常顯示
解決方法：
1.可以使用png8來代替png24淌喻，即可解決問題，但是使用png8代替png24以后雀摘，圖片的清晰圖會有所下降
2.使用JavaScript來解決該問題裸删，需要向頁面中引入一個外部的JavaScript文件，然后在寫一下簡單的JS代碼阵赠，來處理該問題
-->
<div class="box1"></div>
<div class="box2"></div>
<img src="img/3.png" alt="大臉貓">
<!-- 在body標(biāo)簽的最后引入外部的JS文件 -->
<!--再創(chuàng)建一個新的script標(biāo)簽涯塔，并且編寫一些js代碼 -->
<!-- 以下代碼只會在IE6中執(zhí)行，其他瀏覽器中無效 -->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix("div,img");
</script>
<![endif]-->
</body>
</html>
(6)條件Hack
<html lang="en">
<head>
<meta charset="UTF-8">
<title>條件Hack</title>
<link rel="stylesheet" type="text/css" href="css/style-normal.css">
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/style-ie8.css">
<![endif]-->
</head>
<body>
<!--
有一些情況清蚀，有一些特殊的代碼我們只需要在某些特殊的瀏覽器中執(zhí)行匕荸，而在其他的瀏覽器中不需要執(zhí)行，這時就可以使用CSS Hack來解決該問題
CSS Hack實際上指的是一種特殊的代碼枷邪，這段代碼只在某些瀏覽器中可以識別榛搔，而其他瀏覽器不能識別，通過這種方式东揣，來為一些瀏覽器設(shè)置特殊的代碼
-->
<!--
條件Hack
它只對IE瀏覽器有效践惑，其它的瀏覽器都會將它識別為注釋
IE10及以上的瀏覽器已經(jīng)不支持這種方式
-->
<!-- 以下內(nèi)容只會出現(xiàn)在IE6中 -->
<!--[if IE 6]>
<p>為了您和家人的健康，請遠離IE6Ｋ晃浴尔觉！</p>
<![endif]-->
<!--[if IE 8]>
<p>當(dāng)前瀏覽器是IE8！芥吟！</p>
<![endif]-->
<!--[if lt IE 9]>
<p>該標(biāo)簽會在IE9以下的瀏覽器中顯示</p>
<![endif]-->
<!--[if gte IE 9]>
<p>該標(biāo)簽會在IE9及以上的瀏覽器中顯示</p>
<![endif]-->
<!--[if lte IE 9]>
<p>該標(biāo)簽會在IE9及以下的瀏覽器中顯示</p>
<![endif]-->
<!--[if ! IE 6]>
<p>你的瀏覽器不是IE6</p>
<![endif]-->
</body>
</html>
(7)屬性Hack
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性Hack</title>
<style type="text/css">
body{
background-color: #bfa;
/*
假設(shè)在IE6中需要將背景顏色設(shè)置為黃色才能達到和其它瀏覽器相同的效果
*/
/*
希望黃色背景只在IE6中生效
在樣式前添加一個下劃線侦铜，則該樣式只有IE6及以下的瀏覽器才可以識別
*/
/*_background-color: yellow;*/
/*添加了*的樣式只有IE7及以下的瀏覽器認識*/
/**background-color: yellow;*/
/*在樣式最后添加一個\0，則只有IE8及以上的瀏覽器才能識別*/
/*background-color: yellow\0;*/
/*
CSS Hack不到萬不得已的情況盡量不要使用
*/
}
</style>
</head>
<body>
</body>
</html>
(8)選擇符Hack
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇符</title>
<style type="text/css">
/*
在選擇器前添加* html 則該選擇器只有IE6可以識別
*/
* html body{
background-color: #bfa;
}
</style>
</head>
<body>
</body>
</html>
