外邊距
外邊距指的是當(dāng)前盒子與其它盒子之間的距離，不會(huì)影響可見框的大小讼庇，而會(huì)影響到盒子的位置。
盒子有四個(gè)方向的外邊距
margin-top
margin-right
margin-bottom
margin-left
由于頁面中的元素都是靠左靠上擺放的近尚，所以注意當(dāng)我們?cè)O(shè)置上和左外邊距時(shí)蠕啄，會(huì)導(dǎo)致盒子自身的位置發(fā)生改變。如果是設(shè)置右和下外邊距會(huì)改變其它盒子的位置戈锻。如果外邊距設(shè)置的是負(fù)值歼跟，則元素會(huì)向反方向移動(dòng)。
margin還可以設(shè)置為auto格遭，auto一般只設(shè)置給水平方向的margin嘹承，如果指定，左外邊距或右外邊距的margin為auto則會(huì)將外邊距設(shè)置為最大值如庭，垂直方向外邊距如果設(shè)置為auto，則外邊距默認(rèn)就是0撼港。
如果將left和right同時(shí)設(shè)置為auto坪它，則會(huì)居中。
垂直外邊距的重疊
在網(wǎng)頁中相鄰的垂直方向的外邊距會(huì)發(fā)生外邊距重疊帝牡，所謂外邊距重疊是指兄弟元素之間相鄰?fù)膺吘鄷?huì)取最大值而不是取和往毡。
可以在相鄰兩個(gè)元素之間輸入一個(gè)數(shù)
或者設(shè)置一個(gè)外邊距和內(nèi)邊距
瀏覽器默認(rèn)樣式
瀏覽器為了在頁面中沒有樣式時(shí)，也可以有一個(gè)比較好的效果靶溜，所以為很多的元素設(shè)置一些默認(rèn)的margin和padding开瞭，而它的這些默認(rèn)樣式懒震，正常情況下我們是不需要使用的。所以我們往往在編寫樣式之前需要將瀏覽器中的默認(rèn)的margin和padding統(tǒng)統(tǒng)的去掉嗤详。
清楚瀏覽器默認(rèn)樣式：
*{
? ? padding:0;
? ? margin:0;
}
內(nèi)聯(lián)元素的盒模型
內(nèi)聯(lián)元素不能設(shè)置width和height个扰，但可以設(shè)置水平方向的內(nèi)邊距，也可以設(shè)置垂直方向內(nèi)邊距葱色，但是不會(huì)影響頁面的布局递宅。內(nèi)聯(lián)元素可以設(shè)置邊框，但是垂直的邊框不會(huì)影響到頁面的布局苍狰，會(huì)影響水平方向的頁面布局办龄。
內(nèi)聯(lián)元素支持水平方向的外邊距，水平方向的相鄰?fù)膺吘嗖粫?huì)重疊淋昭，而是求和俐填。內(nèi)聯(lián)元素不支持垂直方向外邊距。
display
將一個(gè)內(nèi)聯(lián)元素變成塊元素翔忽，通過display樣式可以修改元素類型
inline：可以將一個(gè)元素作為內(nèi)聯(lián)元素顯示
block：可以將一個(gè)元素設(shè)置塊元素顯示
inline-block：將一個(gè)元素轉(zhuǎn)換為行內(nèi)塊元素英融，可以使一個(gè)元素既有行內(nèi)元素的特點(diǎn)又有塊元素的特點(diǎn)，既可設(shè)置行高呀打，又不會(huì)獨(dú)占一行矢赁。
none：使用該方式隱藏元素，不會(huì)在頁面中顯示贬丛，并且不再占據(jù)頁面的位置撩银。
visibility
可以用來設(shè)置元素的隱藏和顯示狀態(tài)。visible默認(rèn)值豺憔，元素默認(rèn)會(huì)在頁面中顯示额获。hidden元素會(huì)隱藏不顯示，但它的位置會(huì)依然保持恭应。
overflow
子元素默認(rèn)是存在于父元素的內(nèi)容區(qū)中抄邀，理論上講子元素的大小超過了父元素的最大可以等于父元素的內(nèi)容區(qū)，則超過的大小會(huì)在父元素意外的位置顯示昼榛，超過父元素的內(nèi)容境肾，我們稱為溢出內(nèi)容，在父元素外邊顯示胆屿，通過overflow可以設(shè)置父元素如何處理溢出內(nèi)容
可選值：
– scroll ：添加滾動(dòng)條,不論內(nèi)容是否溢出奥喻，都會(huì)添加水平和垂直方向的滾動(dòng)條。
– auto ：根據(jù)需要添加滾動(dòng)條
– hidden ：隱藏超出盒子的內(nèi)容
– visible visible visible：默認(rèn)值
文檔流
文檔流處在網(wǎng)頁的最底層非迹，它表示的是一個(gè)頁面中位置环鲤，我們創(chuàng)建的元素默認(rèn)都處在文檔流中。
元素在文檔流中的特點(diǎn)
塊元素在文檔流中會(huì)獨(dú)占一行憎兽，塊元素會(huì)自上向下排列冷离。塊元素在文檔流中默認(rèn)寬度是父元素的100%吵冒。塊元素在文檔流中的高度默認(rèn)被內(nèi)容撐開。
內(nèi)聯(lián)元素在文檔流中只有自身的大小西剥，會(huì)默認(rèn)從左向右排列痹栖，如果在一行中不足以容納所有的內(nèi)聯(lián)元素，則會(huì)到下一行蔫耽，繼續(xù)自左向右结耀。內(nèi)聯(lián)元素的寬度和高度默認(rèn)都被內(nèi)容撐開。
當(dāng)元素的寬度的值為auto時(shí)匙铡，此時(shí)指定內(nèi)邊距不會(huì)影響可見框的大小图甜，而是會(huì)自動(dòng)修改寬度，以適應(yīng)內(nèi)邊距鳖眼。
浮動(dòng)
塊元素在文檔流中默認(rèn)垂直排列黑毅，所以這個(gè)三個(gè)div自上至下依次排開，如果希望塊元素在頁面中水平排列钦讳，可以是使塊元素脫離文檔流矿瘦。使用float來使元素浮動(dòng)，從而脫離文檔流愿卒。
可選值：
– none：不浮動(dòng)
– left：向左浮動(dòng)
– right ：向右浮動(dòng)
當(dāng)為一個(gè)元素設(shè)置浮動(dòng)以后（float屬性是一個(gè)非none的值）缚去，元素會(huì)立即脫離文檔流，元素脫離文檔流以后琼开，它下邊的元素會(huì)立即向上移動(dòng)看易结，元素移動(dòng)后，會(huì)盡量向頁面的左上或右上漂浮柜候，直到遇到父元素的邊框或者其他的浮動(dòng)元素搞动，如果浮動(dòng)元素上邊是一個(gè)沒有浮動(dòng)的元素，則浮動(dòng)元素不會(huì)超過塊元素渣刷。浮動(dòng)的元素不會(huì)超過它上邊的兄弟元素鹦肿，最多最多一邊齊。
浮動(dòng)元素不會(huì)蓋住文字辅柴，文字會(huì)自動(dòng)環(huán)繞在浮動(dòng)元素的周圍箩溃，所以我們可以通過浮動(dòng)來設(shè)置文字環(huán)繞圖片的效果。
當(dāng)元素設(shè)置浮動(dòng)以后碌嘀，會(huì)完全脫離文檔流涣旨，塊元素脫離文檔流以后，高度和寬度都被內(nèi)容撐開筏餐。內(nèi)聯(lián)元素脫離文檔流以后會(huì)變成塊元素。
簡單布局
高度塌陷問題
在文檔流中牡拇，父元素的高度默認(rèn)就是被子元素?fù)伍_的魁瞪，也就是說子元素多高穆律，父元素就多高。但是為子元素設(shè)置浮動(dòng)以后导俘，子元素會(huì)完全脫離文檔流峦耘，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷旅薄。由于父元素高度塌陷辅髓，則父元素下的所有元素都會(huì)向上移動(dòng)。這樣將會(huì)導(dǎo)致頁面布局混亂少梁。所以在開發(fā)中一定要避免出現(xiàn)的高度塌陷的問題洛口，我們可以將父元素的高度寫死，以免塌陷的問題出現(xiàn)凯沪，但是一定高度寫死第焰，父元素的高度將不能自動(dòng)適應(yīng)子元素的高度，所以這種方案是不推薦使用的妨马！
解決高度塌陷問題
根據(jù)W3C的標(biāo)準(zhǔn)挺举，在頁面中元素都一個(gè)隱含的屬性叫做Block Formatting Context，簡稱BFC烘跺，該屬性可以設(shè)置打開或者關(guān)閉湘纵，默認(rèn)是關(guān)閉的。當(dāng)開啟元素的BFC以后滤淳，元素將會(huì)具有如下的特性：
父元素的垂直外邊距不會(huì)和子元素重疊
開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
開啟BFC的元素可以包含浮動(dòng)的子元素
如何開啟元素的BFC
設(shè)置元素浮動(dòng)——使用這種方式開啟梧喷，雖然可以撐開父元素，但是會(huì)導(dǎo)致父元素的寬度丟失娇钱，而且使用這種方式也會(huì)導(dǎo)致下邊的元素上移伤柄，不能解決問題。
設(shè)置元素絕對(duì)定位
設(shè)置元素為inline-block——可以解決問題文搂，但是會(huì)導(dǎo)致寬度丟失适刀，不推薦使用這種方式。
將元素的overflow設(shè)置為一個(gè)非visible的值
推薦方式：將overflow設(shè)置為hidden是副作用最小的開啟BFC的方式煤蹭。
但是在IE6及以下的瀏覽器中并不支持BFC笔喉，所以使用這種方式不能兼容IE6。在IE6中雖然沒有BFC硝皂，但是具有另一個(gè)隱含的屬性叫做haslayout常挚，該屬性的作用和BFC類似，所在IE6瀏覽器可以通過開haslayout來解決該問題稽物。開啟方式有很多奄毡，我們直接使用一種副作用最小的——直接將元素的zoom設(shè)置為1即可。
zoom表示放大的意思贝或，后邊跟著一個(gè)數(shù)值吼过，寫幾就將元素放大幾倍锐秦，zoom:1;表示不放大元素，但是通過該樣式可以開啟haslayout盗忱。zoom這個(gè)樣式只在IE中支持酱床，其他瀏覽器都不支持。
clear可以用來清除其他浮動(dòng)元素對(duì)當(dāng)前元素的影響趟佃，可選值：
none：默認(rèn)值扇谣，不清除浮動(dòng)
left：清除左側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響
right：清除右側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響
both：清除兩側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響，清除影響對(duì)它最大的那個(gè)元素的浮動(dòng)闲昭。
清除浮動(dòng)以后罐寨，元素會(huì)回到其他元素浮動(dòng)之前的位置。
解決高度塌陷方案二
可以直接在高度塌陷的父元素的最后汤纸，添加一個(gè)空白的div衩茸，由于這個(gè)div并沒有浮動(dòng)，所以它是可以撐開父元素的高度的贮泞，然后進(jìn)行清除浮動(dòng)楞慈，這樣可以通過這個(gè)空白的div來撐開父元素的高度，基本沒有副作用啃擦∧依叮或者通過after偽類向元素的最后添加一個(gè)空白的塊元素，然后對(duì)其清除浮動(dòng)令蛉，這樣做和添加一個(gè)div的原理一樣聚霜，可以達(dá)到一個(gè)相同的效果，而且不會(huì)在頁面中添加多余的div珠叔，這是我們最推薦使用的方式蝎宇，幾乎沒有副作用。
.clearfix:after{
? ? content:"";
? ? displayP:block;
? ? clear:both;
}
......
<div class="box1 clearfix">
導(dǎo)航條練習(xí)
開班信息練習(xí)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 12px/1 宋體;
}
.outer{
width: 300px;
margin: 50px auto;
}
.title{
border-top:2px #019e8b solid;
height: 36px;
background-color: #f5f5f5;
line-height: 36px;
padding: 0 22px 0 16px;
}
.title a{
float: right;
color: red;
}
.title h3{
font: 16px/36px "微軟雅黑";
}
.content{
border: 1px solid #deddd9;
padding: 0 28px 0 20px;
}
.content a{
color: black;
text-decoration: none;
font-size: 12px;
}
.content a:hover{
color: yellowgreen;
text-decoration: underline;
}
.content h3{
margin-top:14px ;
margin-bottom: 16px;
}
.content .right{
float: right;
}
ul{
list-style: none;
border-bottom:1px dashed #deddd9;
}
.content .border{
border: none;
}
.content .red{
color: red;
font-weight: bold;
}
.content li{
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="outer">
<div class="title">
<a href="#">16年面授開班計(jì)劃</a>
<h3>近期開班</h3>
</div>
<div class="content">
<h3><a href="">JavaEE+云計(jì)算-全程就業(yè)班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red">預(yù)約報(bào)名</span></a>
<a href="#">開班時(shí)間：<span class="red">2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span class="red">無座祷安，名額爆滿</span></a>
<a href="#">開班時(shí)間：<span class="red">2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間：<span>2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間：<span>2016-03-15</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間：<span>2016-02-25</span></a>
</li>
</ul>
<h3><a href="">Android+人工智能-全程就業(yè)班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red">預(yù)約報(bào)名</span></a>
<a href="#">開班時(shí)間：<span class="red">2016-04-10</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間：<span>2016-03-17</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間：<span>2016-02-20</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間：<span>2015-12-23</span></a>
</li>
</ul>
<h3><a href="">前端+HTML5-全程就業(yè)班</a></h3>
<ul class="no-border">
<li>
<a class="right" href="#"><span class="red">預(yù)約報(bào)名</span></a>
<a href="#">開班時(shí)間：<span class="red">2016-05-10</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時(shí)間：<span>2016-03-16</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
相對(duì)定位與絕對(duì)定位
定位：定位指的是將指定的元素放到頁面的任意位置姥芥，通過定位可以任意的擺放元素。通過position屬性來設(shè)置元素的定位
可選值：
static：默認(rèn)值汇鞭，元素沒有開啟定位
relative：開啟元素的相對(duì)定位
當(dāng)開啟了元素的相對(duì)定位以后凉唐，而不設(shè)置偏移量時(shí)，元素不會(huì)發(fā)生了變化霍骄。相對(duì)定位是相對(duì)于元素在文檔流中原來的位置進(jìn)行定位台囱。相對(duì)定位的元素不會(huì)脫離文檔流。相對(duì)定位會(huì)使元素提升一個(gè)層級(jí)读整。相對(duì)定位不會(huì)改變?cè)氐男再|(zhì)簿训，塊還是塊，內(nèi)聯(lián)還是內(nèi)聯(lián)。
通常偏移量只需要使用兩個(gè)就可以對(duì)一個(gè)元素進(jìn)行定位强品。
absolute：開啟元素的絕對(duì)定位
開啟絕對(duì)定位豺总，會(huì)使元素脫離文檔流。開啟絕對(duì)定位以后择懂，如果不設(shè)置偏移量，則元素的位置不會(huì)發(fā)生變化另玖。絕對(duì)定位是相對(duì)于離他最近的開啟了定位的祖先元素進(jìn)行定位的（一般情況困曙，開啟了子元素的絕對(duì)定位都會(huì)同時(shí)開啟父元素的相對(duì)定位），如果所有的祖先元素都沒有開啟定位谦去，則會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位慷丽。絕對(duì)定位會(huì)使元素提升一個(gè)層級(jí)。絕對(duì)定位會(huì)改變?cè)氐男再|(zhì)鳄哭，內(nèi)聯(lián)元素變成塊元素要糊，塊元素的寬度和高度默認(rèn)都被內(nèi)容撐開。
fixed：開啟元素的固定定位（也是絕對(duì)定位的一種）
固定定位是一種絕對(duì)定位妆丘，它的大部分特點(diǎn)和絕對(duì)定位一樣锄俄。不同的是固定定位永遠(yuǎn)都會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位，固定定位會(huì)固定在瀏覽器窗口某個(gè)位置勺拣，不會(huì)隨滾動(dòng)條滾動(dòng)奶赠。IE6不支持固定定位。
元素層級(jí)
如果定位元素的層級(jí)是一樣的药有，則下邊的元素會(huì)蓋住上邊的毅戈，通過z-index屬性可以用來設(shè)置元素的層級(jí)，可以為z-index指定一個(gè)正整數(shù)作為值愤惰，該值將會(huì)作為當(dāng)前元素的層級(jí)苇经。層級(jí)越高，越優(yōu)先顯示宦言。對(duì)于沒有開啟定位的元素不能使用z-index扇单。父元素的層級(jí)永遠(yuǎn)蓋不住子元素的層級(jí)。
透明背景
opacity可以用來設(shè)置元素背景的透明蜡励，它需要一個(gè)0~1之間的值令花，0表示全透明，1表示完全不透明凉倚，0.5表示半透明兼都。opacity屬性在IE8及以下的瀏覽器中不支持，IE8及以下的瀏覽器需要使用如下屬性代替alpha(opacity=透明度)稽寒。透明度扮碧，需要一個(gè)0~100之間的值，0表示完全透明，100表示完全不透明慎王，50為半透明蚓土。
背景
background-color:red;
使用background-image:url(相對(duì)路徑);來設(shè)置背景圖片，如果
? 背景圖片大于元素赖淤，默認(rèn)會(huì)顯示圖片的左上角
? 背景圖片和元素一樣大蜀漆，則會(huì)將背景圖片全部顯示
? 背景圖小于元素大小，則會(huì)默認(rèn)將背景圖片平鋪以充滿元素
可以同時(shí)為一個(gè)元素指定背景顏色和背景圖片咱旱，這樣背景顏色將會(huì)作為背景圖片的底色确丢。
用background-repeat:repeat;來設(shè)置背景圖片的重復(fù)方式，可選值：
repeat：默認(rèn)值吐限，背景圖片會(huì)雙向重復(fù)（平鋪）
no-repeat：背景圖片不會(huì)重復(fù)鲜侥，有多大就顯示多大
repeat-x：背景圖片沿水平方向重復(fù)
repeat-y：背景圖片沿垂直方向重復(fù)
用background-position：center center；來設(shè)置背景圖片的位置（九宮格）用right诸典、left描函、center、top狐粱、bottom舀寓。第一個(gè)值是左右，第二個(gè)值是上下肌蜻。如果只給出一個(gè)值基公，則第二個(gè)值默認(rèn)值是center。也可以直接指定兩個(gè)偏移量宋欺，第一個(gè)值水平偏移量轰豆，第二個(gè)是垂直偏移量。如果是正值就向右或下偏移齿诞，如果是負(fù)值就向左或上偏移酸休。
用background-attachment:fixed;來設(shè)置背景圖片是否隨頁面一起滾動(dòng)，可選值：
scroll：默認(rèn)值祷杈，背景圖片隨著窗口滾動(dòng)
fixed：背景圖片會(huì)固定在某一位置斑司，不隨頁面滾動(dòng)
不隨窗口滾動(dòng)的圖片，我們一般都是設(shè)置給body但汞，而不設(shè)置給其他元素宿刮。
按鈕練習(xí)
產(chǎn)生閃爍的原因：背景圖片是以外部資源加載進(jìn)網(wǎng)頁的，瀏覽器沒加載一個(gè)外部資源就需要單獨(dú)的發(fā)送一次請(qǐng)求私蕾，但是我們外部資源并不是同時(shí)加載僵缺，瀏覽器會(huì)在資源被使用采取才去加載資源。由于加載圖片需要一定時(shí)間踩叭，所以在加載和顯示過程會(huì)有一段時(shí)間磕潮，背景圖片無法顯示翠胰，導(dǎo)致出現(xiàn)閃爍的情況。
解決方法：通過將三張圖片整合到一張圖片上自脯，這樣就可以同時(shí)將三張圖片一起加載之景，就不會(huì)出現(xiàn)閃爍問題，再用background-position來切換要顯示的圖片的位置膏潮，這種技術(shù)叫做圖片整合技術(shù)（css-sprite）锻狗。
整合技術(shù)優(yōu)點(diǎn)：
將多個(gè)圖片整合成一張圖片里，瀏覽器只需要發(fā)送一次請(qǐng)求焕参，可以同時(shí)加載多個(gè)圖片屋谭，提高訪問效率，提高了用戶體驗(yàn)龟糕。
將多個(gè)圖片整合為一張圖片，減小了圖片的總大小悔耘，提高請(qǐng)求的速度讲岁，增加了用戶體驗(yàn)。
背景簡寫方式
background: red url() center center no-repeat fixed;
沒有順序要求衬以，也沒有數(shù)量要求缓艳，不寫就代表默認(rèn)值。
表格
通過border-spacing:0px屬性來設(shè)置table與td邊框之間距離看峻。
通過border-collapse：collapse阶淘；來設(shè)置表格邊框合并。
設(shè)置了邊框合并互妓，則border-spacing自動(dòng)失效溪窒。
在一些情況下表格是非常長的，這時(shí)就需要將表格分為三個(gè)部分冯勉，表頭澈蚌，表格主體，表格底部灼狰。thead宛瞄、tbody、tfoot來區(qū)分表格的不同部分交胚，他們都是table的子標(biāo)簽份汗，都需要直接寫到table中，tr需要寫到這些標(biāo)簽中蝴簇，并且thead中內(nèi)容永遠(yuǎn)會(huì)顯示到表格頭部杯活，tbody中內(nèi)容永遠(yuǎn)都會(huì)顯示在表格的底部，tfoot中的內(nèi)容永遠(yuǎn)都會(huì)顯示在表格底部熬词。
如果表格中沒有寫tbody轩猩，瀏覽器會(huì)自動(dòng)在表格中添加tbody，并且將所有的tr都放到tbody中，所以注意tr并不是table的子元素均践，而是tbody的子元素晤锹，通過table > tr 無法選中進(jìn)行，需要通過tbody > tr 來選擇設(shè)置彤委。
表格布局
表格的列數(shù)由td最多的決定鞭铆，表格可以嵌套，可以在td中放置一個(gè)表格焦影。
已經(jīng)被淘汰车遂，不易維護(hù)。
clearfix
子元素和父元素相鄰的垂直外邊距會(huì)發(fā)生重疊斯辰，子元素的外邊距會(huì)傳遞給父元素舶担。使用空的table標(biāo)簽可以隔離父元素的外邊距，阻止外邊距的重疊彬呻。
即可解決高度塌陷衣陶，又可確保父元素和子元素的垂直外邊距不會(huì)重疊
表單
使用?<form> </form>?標(biāo)簽來創(chuàng)建一個(gè)表單
表單中必須要有兩個(gè)屬性 action和method，
action表示提交單到服務(wù)器中的地址 method 闸氮。
用戶填寫的消息會(huì)附在url地址的后邊以查詢字符串的形式發(fā)送給服務(wù)器url地址剪况？查詢字符串
格式：屬性名=屬性值
用戶名<input type="text" name="username" value="admin">
密碼<input type="password" name="password">
單選按鈕：
性別<input type="radio" name="gender" value="man" />男
<input type="radio" name="gender" value="woman" />女
多選框：
<input type="checkbox" name="hobby" value="zq">足球
<input type="checkbox" name="hobby" value="ymq">羽毛球
<input type="checkbox" name="hobby" value="ppq">乒乓球
下拉列表：
<select name="char">
<optgroup label="前兩個(gè)">
<option value="A">a</option>
<option value="B" selected="selected">b</option>
</optgroup>
<optgroup label="后兩個(gè)">
<option value="C">c</option>
<option value="D">d</option>
</optgroup>
</select>
如果希望在單選框中或多選框中指定默認(rèn)選項(xiàng)，則可以在希望選中的項(xiàng)中添加checked="checked"屬性蒲跨。而在下拉列表option中添加selected="selected"來設(shè)置默認(rèn)選中項(xiàng)译断。在select添加一個(gè)multiple="multiple",則下拉列表變成一個(gè)多選的下拉列表。
在select中可以使用optgroup對(duì)選項(xiàng)進(jìn)行分組或悲，可以通過lable屬性來指定分組的名字孙咪。
<label for="id中的值">文字</label>用來設(shè)置點(diǎn)擊文字就跳到該選項(xiàng)框中招拙。
fieldset 洞斯、legend 台盯、label
? fieldset 用來為表單項(xiàng)進(jìn)行分組恨锚。
? legend 用于指定每組的名字赚瘦。
? label 標(biāo)簽用來為表單項(xiàng)定義描述文字缘回。
框架集
框架集和內(nèi)聯(lián)框架的作用類似秽誊，都是用于在一個(gè)頁面中引入其他的外部的頁面错览，框架集可以同時(shí)引入多個(gè)頁面理澎，而內(nèi)聯(lián)框架只能引入一個(gè)逞力，在h5標(biāo)準(zhǔn)中，推薦使用框架集糠爬，而不使用內(nèi)聯(lián)框架 寇荧。使用frameset來創(chuàng)建一個(gè)框架集，注意frameset不能和body出現(xiàn)在同一個(gè)頁面中执隧，所以要使用框架集揩抡，頁面中就不可以使用body標(biāo)簽户侥。
屬性：
rows：指定框架集中的所有的框架，一行一行的排列
cols：指定框架集中所有的頁面峦嗤，一列一列的排列
這兩個(gè)屬性frameset必須選擇一個(gè)蕊唐，并且需要在屬性中指定每一部分所占的大小。
franeset和iframe一樣烁设，它里邊的內(nèi)容都不會(huì)被搜索引擎所檢索替梨，所以如果使用框架集則意味著頁面中不能有自己的內(nèi)容，只能引入其他頁面装黑，而我們每單獨(dú)加載一個(gè)頁面副瀑，瀏覽器都需要重新發(fā)送一次請(qǐng)求，引入幾個(gè)頁面就需要發(fā)送幾次請(qǐng)求恋谭。
IE6中png修復(fù)
在IE6中對(duì)圖片格式png24糠睡，則會(huì)導(dǎo)致透明度效果無法正常顯示
解決方法：
可以使用png8來代替png24，即可解決問題疚颊，但是使用png8來代替png24以后狈孔，圖片的清晰度會(huì)有所下降。
使用Javascript來解決問題串稀，需要向頁面中引入一個(gè)外部的Javascript文件然后再寫一個(gè)簡單的JS代碼，來處理該問題狮杨。
有一些情況母截，有一些特殊的代碼我們只需要在某些特殊瀏覽器中執(zhí)行，而其他的瀏覽器中不需要執(zhí)行橄教，這時(shí)就可以使用CSS Hack來解決該問題清寇，CSS Hack實(shí)際上指的是一個(gè)特殊的代碼，這段代碼只在某些瀏覽器中可以識(shí)別护蝶，而其它瀏覽器不能識(shí)別华烟，通過這種方式，來為一些瀏覽器設(shè)置特殊的代碼持灰。
條件HACK只對(duì)IE瀏覽器有效盔夜，其他瀏覽器都會(huì)將它識(shí)別為注釋，IE10及以上的瀏覽器已經(jīng)不支持這種方式堤魁。
<!--[if IE 6]>
.......
<![endif]-->
屬性級(jí)HACK
.body{
? ? background-color:red;
? ? <!--在樣式前添加一個(gè)下劃線喂链，則該樣式只有IE6及以下的瀏覽器才可以識(shí)別-->
? ? _background-color:yellow;
? ? <!--在樣式前添加一個(gè)*的樣式，只有在IE7及以下的瀏覽器才能識(shí)別-->
? ? *background-color:blue;
}
