1. 程式人生 > >前端開發之html基礎知識02

前端開發之html基礎知識02

輸入框 option cap 性別 下拉菜單 設置 checkbox ble submit

經典表格:表格沒有列的概念,只有行的概念, 一行 tr,行中的單元格 td
表頭的突出顯示:tr>th

<table width="400px" align="center" border="1px" cellspacing="0"
cellpadding="5px"
> <!-- align = "center" 表格整體劇中-->
<caption>個人信息表</caption>
<thead>
<tr align="center">
<td>姓名</td>
<td>性別</td>
<td>電話</td>
</tr>
</thead>
<tbody>
<tr align="center">
<td>小明</td>
<td>男</td>
<td>187</td>
</tr>
<tr align="center">
<td>小紅</td>
<td>女</td>
<td>157</td>
</tr>
</tbody>
</table>

表格其他設置:單元邊框和表格邊框的距離-> cellspacing 0

合並單元格:
跨行 rowspan
跨列 colspan

表單控件

<label for="i1">用戶名<input type="text" id = i1></label>
label 標簽用於點擊標簽即可跳轉到輸入框,提高用戶體驗

文本域,不支持富文本:<textarea name="" id="" cols="3" rows="5" ></textarea>

下拉菜單:select>option
<select name="" id="">
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
</select>

input屬性: 提示: checked = "checked" 為單選默認選中狀態 maxlength = 6

text
password

radio 單選 需要在每個選項中 name的值保持一致
<label for=""><input type="radio" name="gender">男</label>
<label for=""><input type="radio" name = "gender">女</label>

checkbox 多選
<label for=""><input type="checkbox" name = “like1”>籃球</label>
<label for=""><input type="checkbox" name = “like2”>足球</label>
<label for=""><input type="checkbox" name = “like2”>排球</label>

btton 按鈕
submit 提交
reset 重置
image
file

form 表單:
<form action="http://baidu.com" method="get" name = "mydata">

前端開發之html基礎知識02