表格
基本標(biāo)簽
<table> </table> 表示表格的整體
<tr> </tr> 表示表格每行
<td> </td> 表示單元格
嵌套關(guān)系: table>tr>td
表格相關(guān)屬性
1.border表示邊框?qū)挾?border=" "默認(rèn)無(wú)邊框
2.width表示表格寬度
3.height表示表格高度
以上屬性寫在<table>標(biāo)簽內(nèi)
<table border="1" width="300" height="300">
表格標(biāo)題和表頭單元格標(biāo)簽
1.caption表示表格大標(biāo)題,默認(rèn)在表格整體頂部居中顯示
<caption>
<h3>學(xué)生成績(jī)單</h3>
</caption>
2.th表示表頭單元格,用于表格第一行,默認(rèn)內(nèi)部文字加粗居中顯示,寫在tr內(nèi)
<table>
<tr>
<th> </th>
</tr>
</table>
表格的結(jié)構(gòu)標(biāo)簽
1.thead表示表格頭部
2.tbody表示表格主體
3.tfoot表示表格底部
<thead>
<tr>
<th>姓名</th>
<th>成績(jī)</th>
<th>評(píng)分</th>
</tr>
</thead>
<tbody>
<tr>
<td>小劉</td>
<td>100分</td>
<td>A</td>
</tr>
<tr>
<td>兔子</td>
<td>100分</td>
<td>A</td>
</tr>
<tbody>
<tfoot>
<tr>
<td>總結(jié)</td>
<td>勇敢牛牛不怕困難</td>
<td>勇敢牛牛不怕困難</td>
</tr>
</tfoot>
合并單元格
1.跨行合并:rowspan
2.跨列合并:colspan
左上原則:上下合并,保留最上邊單元格;右合并,保留最左邊單元格
表單
input表單標(biāo)簽
input標(biāo)簽可以通過(guò)type屬性值的不同,展示不同效果
placeholder=" " 占位符,提示用戶輸入文本內(nèi)容
form:表單域是一個(gè)包含表單元素的區(qū)域,會(huì)把表單域中收集的信息提交給服務(wù)器
1.文本框:text,type屬性的默認(rèn)值
昵稱：<input type="text" placeholder="請(qǐng)輸入您的昵稱">
2.密碼框:password
密碼：<input type="password" placeholder="請(qǐng)輸入您的密碼">
3.單選框:radio
name:分組,有相同name屬性值的單選框?yàn)橐唤M,一組只能有一個(gè)被選中
checked:打開瀏覽器默認(rèn)選中
性別：<input type="radio" name="sex">男
<input type="radio" name="sex">女
4.復(fù)選框:checkbox
愛(ài)好：<input type="checkbox" checked>吃飯
<input type="checkbox" checked>睡覺(jué)
<input type="checkbox" checked>打游戲
5.文件上傳:file
multiple:多文件選擇
<input type="file" multiple>
6.提交:submit
<input type="submit">
7.重置:reset,重置form中的信息,如要重置表單內(nèi)的信息,整個(gè)表單應(yīng)包含在<form></form>中
<input type="reset">
8.普通按鈕:button
<input type="button" value="普通按鈕">
button按鈕標(biāo)簽
標(biāo)簽可以通過(guò)type屬性值的不同,展示不同效果,默認(rèn)是提交按鈕
1.提交:submit
<button type="submit">提交</button>
2.重置:reset,重置form中的信息,如要重置表單內(nèi)的信息,整個(gè)表單應(yīng)包含在<form></form>中
<button type="reset">重置</button>
3.普通按鈕:button
<button type="button">普通按鈕</button>
select下拉菜單標(biāo)簽
1.select:下拉菜單的整體
2.option:下拉菜單的每一項(xiàng)
3.selected:下拉菜單的默認(rèn)選中
所在城市：
<select>
<option>上海</option>
<option selected>北京</option>
<option>浙江</option>
<option>四川</option>
<option>河南</option>
</select>
textarea文本域標(biāo)簽
1.cols:規(guī)定了文本域內(nèi)可見(jiàn)寬度
2.rows:規(guī)定了文本域內(nèi)可見(jiàn)行數(shù)
文本域右下角可以拖拽改變大小
<textarea cols="30" rows="10"></textarea>
lable標(biāo)簽
lable:綁定表單元素,增大可點(diǎn)擊區(qū)域,增加用戶體驗(yàn)
方法1:
性別：<input type="radio" name="sex" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
方法2:
性別：<label>
<input type="radio" name="sex">男
</label>
<label>
<input type="radio" name="sex">女
</label>
