1桌粉、表格元素
在網(wǎng)頁中，我們通常用表格來顯示數(shù)據(jù)表格默認(rèn)是沒有樣式的衙四，我們添加了border屬性來設(shè)置邊框铃肯，
width屬性設(shè)置表格的寬度。在實(shí)際開發(fā)中传蹈，我們用css來設(shè)置表格的樣式押逼，而不是用表格的屬性。
table標(biāo)簽：表格容器
thead標(biāo)簽：表示表頭
tbody標(biāo)簽：表示表體
tr標(biāo)簽：表示行惦界，內(nèi)部一定是只有td或th
th標(biāo)簽：表示表頭單元格挑格，字體會(huì)加粗
td標(biāo)簽：表示單元格
2.合并單元格
通過colspan屬性可以合并行，colspan屬性可以讓單元格在同行占據(jù)兩個(gè)單元格的位置沾歪。
<table border="1" width="100%">
<tr>
<tdalign="center"colspan="2">學(xué)生列表</td>
</tr>
<tr>
<td>小明</td>
<td>2歲</td>
</tr>
<tr>
<td>小紅</td>
<td>3歲</td>
</tr>
</table>
通過rowspan屬性可以合并列漂彤，rowspan屬性可以讓單元格在同一列占據(jù)3行的位置
3.表單
在網(wǎng)頁中，我們通常用表單向服務(wù)器發(fā)送數(shù)據(jù)，例如下面一個(gè)最簡單的登錄功能挫望。
<formaction="">
<div>
<label for="username">用戶名：</label><inputid="username"type="text"></div>
<div><labelfor="password">密碼：</label><inputid="password"type="password"></div>
<div><label>性別:</label><select><option>男</option><option>女</option></select></div>
<inputtype="submit"value="注冊(cè)">
</form>
3.1 form標(biāo)簽
<form action=""method="get">
</form>
form標(biāo)簽是表單的容器立润，為了實(shí)現(xiàn)采集數(shù)據(jù)的功能，其他表單標(biāo)簽應(yīng)當(dāng)放在form標(biāo)簽之內(nèi)士骤。
3.2 input標(biāo)簽
<input type="text"><!-- 文本框 -->
<inputtype="password"><!-- 密碼輸入框 -->
<inputtype="radio"><!-- 單選框 -->
<inputtype="checkbox"><!-- 復(fù)選框 -->
<inputtype="button"><!-- 按鈕 -->
<inputtype="submit"><!-- 提交按鈕 -->
input標(biāo)簽通過type屬性可以分為多個(gè)類別范删，常用的input上面的代碼已經(jīng)列出：
type="text"：文本框，用于文本的輸入拷肌。
type="password"：密碼輸入框到旦，用于密碼的輸入，與文本框的區(qū)別是巨缘，輸入的內(nèi)容不能被用戶看到添忘。
type="radio":單選框，通過name控制類別若锁，name想通的radio只能被選擇一個(gè)搁骑。
type="checkbox":復(fù)選框，用過name控制類別又固，但是可以選擇多個(gè)仲器。
type="button":按鈕，如果不做進(jìn)一步處理仰冠，沒有任何功能乏冀。
type="submit":提交按鈕，可以將表單數(shù)據(jù)提交至網(wǎng)站后臺(tái)洋只，關(guān)于數(shù)據(jù)傳輸辆沦，后續(xù)會(huì)深入講解。
3.3 label
通過label標(biāo)簽识虚，可以指定文字相對(duì)應(yīng)的表單空間肢扯，例如下面的示例，使用for屬性對(duì)應(yīng)input的id担锤，這樣當(dāng)鼠標(biāo)點(diǎn)擊label標(biāo)簽的文字時(shí)蔚晨，光標(biāo)就會(huì)聚焦到相對(duì)的input標(biāo)簽之上。
<div>
<label for="username">用戶名：</label>
<input id="username" type="text">
</div>
3.4? placeholder屬性
placeholder可以設(shè)置文本框默認(rèn)的提示信息肛循，示例效果和代碼如下所示：
<div>
<label for="username">用戶名：</label>
<input id="username" type="text" placeholder="請(qǐng)輸入用戶名">
</div>
3.5下拉菜單
<form action="">
<label>請(qǐng)選擇性別</label>
<select>
<option>男</option>
<option>女</option>
</select>
</form>
select標(biāo)簽定義了網(wǎng)頁中的下拉菜單铭腕，下拉菜單的選項(xiàng)用option標(biāo)簽。
4.盒子模型概述
我們可以把一個(gè)網(wǎng)頁分解成一個(gè)個(gè)區(qū)域育拨，大的區(qū)域內(nèi)部可以嵌套小的區(qū)域
每個(gè)區(qū)域都可以看做一個(gè)盒子谨履，一個(gè)網(wǎng)頁就是由一個(gè)個(gè)大大小小的盒子嵌套而成。
盒子之間或內(nèi)外是有邊距的熬丧，通過屬性控制盒子的邊距
margin：外邊距
padding：內(nèi)邊距
盒子模型還會(huì)涉及到我們之前學(xué)過的一個(gè)屬性
border:設(shè)置元素的邊框
5.盒子模型屬性講解
5.1 margin
margin屬性可以控制元素的外邊距笋粟，設(shè)置margin的這個(gè)元素與其相鄰的元素或外部容器元素的距離怀挠，
對(duì)應(yīng)有四個(gè)屬性，上下左右：
margin-top:上外邊距
margin-bottom:下外邊距
margin-left:左外邊距
margin-right:右外邊距
margin:value - 將上下左右都設(shè)置成value值
margin:value1 value2 value3 value4; - 4個(gè)值分別是上右下左
margin:value1 value2; - 第一個(gè)值表示上下害捕，第二個(gè)值表示左右
margin:value1 value2 value3; -第一個(gè)值表示上绿淋，第二個(gè)值表示左右，第三個(gè)值表示下尝盼。
margin屬性還有一個(gè)常用的技巧吞滞，將塊元素水平居中展示
.box{
width:100px;
height:100px;
background-color:red;???
margin: 0 auto; ? ? /* 為margin設(shè)置兩個(gè)值，第一個(gè)值為上下的外邊距盾沫，第二個(gè)值為左右的外邊距裁赠。 */
}
左右外邊距的值設(shè)置為auto，元素就會(huì)根據(jù)其父級(jí)容器的實(shí)際寬度赴精，將元素左右兩邊的外邊距設(shè)置為相同的值佩捞，這樣元素就實(shí)現(xiàn)了水平居中的效果。
5.2? padding
padding屬性可以控制元素的內(nèi)邊距蕾哟，簡單的說就是控制容器與內(nèi)部元素之間的距離一忱，
與margin一樣，padding也有對(duì)應(yīng)的四個(gè)屬性分別表示上下左右
padding-top:上內(nèi)邊距
padding-bottom:下內(nèi)邊距
padding-left:左內(nèi)邊距
padding-right:右內(nèi)邊距
以padding-top為例
.box1{
width:300px;
height:300px;
background-color:#f00;
padding-top:50px;
}
.box2{
width:100px;
height:100px;
background-color:#0f0;
}
5.3 border
.box{
/* 設(shè)置一像素谭确，紅色帘营，實(shí)現(xiàn)邊框 */
border: 1px solid red;
}
5.3.1其實(shí)設(shè)置border樣式是一個(gè)簡寫，它其實(shí)包含了三個(gè)屬性
border-style
border-width
border-color
完整的寫法
.box{
/* 邊框?qū)挾?*/
border-width:1px;
/* 邊框樣式 */
border-style:solid;
/* 邊框顏色 */
border-color:red;
}
5.3.2? border-style比較常用的值如下所示
none定義無邊框
dotted定義點(diǎn)狀邊框
dashed定義虛線
solid定義實(shí)線
double定義雙線
border屬性簡寫的三個(gè)值是沒有順序要求的
.box{
border: blue 1px solid;
}
/* 或者 */
.box{
border: blue solid 1px;
}
都不會(huì)影響顯示效果逐哈。
6 寬高計(jì)算
通過width和height屬性可以設(shè)置元素的寬高芬迄，但元素的實(shí)際寬高可能與我們?cè)O(shè)置的width和height屬性不同。因?yàn)樵谀J(rèn)情況下：
元素的實(shí)際寬度 = border-left + border-right + width + padding-left + padding-right;
元素的實(shí)際高度 = border-top + border-bottom + width + padding-top + padding-bottom;
但是在實(shí)際開發(fā)中鞠眉，為了方便計(jì)算薯鼠，我們希望設(shè)置的width的值就是原生的實(shí)際寬度择诈，不再希望考慮padding和border的加減運(yùn)算械蹋，我們可以通過box-sizing屬性實(shí)現(xiàn)這個(gè)功能
.box{
width:300px;
height:300px;
background-color:#f00;
padding-left:50px;
border-right: 50px solid blue;
box-sizing: border-box;
/*原生的實(shí)際寬度就是width的寬度*/
}
通過設(shè)置box-sizing: border-box; 元素的實(shí)際寬度就是width設(shè)置的寬度，
而padding和border的值是顯示在width值內(nèi)部的羞芍。
其實(shí)在實(shí)際開發(fā)中哗戈，將元素設(shè)置box-sizing: border-box;確實(shí)會(huì)給開發(fā)帶來便利，
所以我們可以在元素初始化的時(shí)候荷科，將box-sizing: border-box;賦值給所有元素唯咬。
*{
margin: 0px;
padding:0px;
box-sizing:border-box;
}
這樣，我們既能清楚所有元素的默認(rèn)邊距畏浆，又能便利地設(shè)置元素的寬度和高度值胆胰。
