一、表单 <from>
所有HTML表单都以一个<form>元素开始
-
action属性表示表单要提交到的后台程序的网址 -
method属性表示表单提交的方式，有get或post
<form action="save.php" method="post">
</form>1.1 单行文本框
使用type属性值被设置为text的<input>元素可以创建单行文本框，它是一个单标签
-
value属性表示已经填写好的值 -
placeholder属性表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值 -
disabled属性表示用户不能与元素交互，即“锁死”
<input type="text" value="123" placeholder="请输入姓名">
<input type="text" disabled>1.2 单选按钮
使用type属性值被设置为radio的<input>元素可以创建单选按。
- 互斥的单选按钮应该设置它们的
name为相同值 - 单选按钮要有
value属性值，向服务器提交的就是value值 - 单选按钮如果加上了
checked属性，表示默认被选中
<input type="radio">1.3 label标签
label标签用来将文字和单选按钮进行绑定，用户单击文字的时候也视为点击了单选按钮
<label>
<input type="radio"> 男
</label>
<label>
<input type="radio"> 女
</label>在HTML4时代，label标签是通过for属性和单选按钮的id属性进行绑定的
<input type="radio" id="nan"><label for="nan">男</label>1.4 复选框
使用type属性值被设置为checkbox的<input>元素可以创建复选框
- 同组复选框应该设置它们的
name为相同值 - 复选框要有
value属性值，向服务器提交的就是value值
<input type="checkbox">1.5 密码框
使用type属性值被设置为password的<input>元素可以创建密码框
<input type="password">1.6 下拉菜单 <select>
<select>标签表示下拉菜单，<option>是它内部的选项
<select>
<option value="alipay">支付宝</option>
<option value="wx">微信</option>
<option value="bank">网银</option>
</select>1.7 多行文本框 <textarea>
<textarea></textarea>表示多行文本框
-
rows和cols属性，用于定义多行文本框的行数和列数
<textarea cols="50" rows="30"></textarea>1.8 按钮
表单中常见三种按钮，它们也都是input标签，type属性值不同
type属性值 | 描述 |
button | 普通按钮，可以简写为 |
submit | 提交按钮 |
reset | 重置按钮 |
<input type="butten" value="按钮">
<button>按钮</button>
<input type="submit">
<input type="reset">1.9 HTML5新增表单控件
type属性值 | 描述 |
color | 颜色选择控件 |
date、time | 日期、时间选择控件 |
email | 电子邮件输入控件 |
file | 文件选择控件 |
number | 数字输入控件 |
range | 拖拽条 |
search | 搜索框 |
url | 网址输入控件 |
1.10 备选项 <datalist>
<datalist>控件可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应
<input type="text" list="province-list">
<datalist id="province-list">
<option value="山东">
<option value="山西">
<option value="广东">
<option value="广西">
<option value="河南">
<option value="河北">
<option value="湖南">
<option value="湖北">
</datalist>1.11 必填
使用required则表示必填
<input type="text" required>二、表格标签
2.1 表格
- 为了让表格能够显示边框，
<table>标签通常有border属性 -
<caption>是表格的标题， 它常常作为<table>的第一个子元素出现 -
<tr>代表一行 -
<td>代表一行中的一个单元格
<table border="1">
<caption>这里是标题</caption>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>2.2 <th> 标签
<th> 是“标题小格”，可以替代<td>的作用，表示标题小格
<table border="1">
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>2.3 colspan属性(横合并)
colspan属性用来设置td或者th的列跨度
<table border="1">
<tr>
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td colspan="3">E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>2.4 rowspan属性(纵合并)
rowspan属性用来设置td或者th的行跨度
<table border="1">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td rowspan="2">F</td>
<td>G</td>
<td rowspan="3">H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>K</td>
<td>L</td>
<td>M</td>
</tr>
</table>2.5 <thead>、<tbody>、<tfoot>标签
-
<thead>标签定义表头 -
<tbody>标签定义表核心内容 -
<tfoot>标签定义表脚，通常是汇总行
<table border="1" width="400">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
</tr>
</tfoot>
</table>2.6 cellspacing、cellpadding属性
cellpadding 属性定义了表格单元的内容和边框之间的空间，已经废弃，使用CSS替代它cellspacing 属性（使用百分比或像素）定义了两个单元格之间空间的大小，已经废弃，使用CSS替代它
