1、表格元素(table)
表格组成 | 标签 |
---|
表格元素容器 | <table> |
表头行 | <thead> |
表头单元格 | <th> |
表体 | <tbody> |
表体行 | <tr> |
表体单元格 | <td> |
横向合并单元格 | colspan 属性 |
纵向合并单元格 | rowspan 属性 |
<table border="1px;">
<thead>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jasmine</td>
<td>18</td>
</tr>
</tbody>
</table>
2、表单元素(form)
表单组成 | 标签 |
---|
表单容器 | <form> |
输入框 | <input> |
描述输入框 | <label> |
选择容器 | <select> |
选择项 | <option> |
按钮 | <button> |
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名">
<label for="password">密码</label>
<input type="text" id="password" placeholder="请输入密码">
<select id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
3、源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格和表单元素</title>
</head>
<body>
<table border="1px;">
<thead>
<th colspan="4">学生信息列表</th>
</thead>
<thead>
<th>序号</th>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="3">web3</td>
<td>jasmine</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>QiQi</td>
<td>19</td>
</tr>
<tr>
<td>3</td>
<td>jasmine_qiqi</td>
<td>20</td>
</tr>
</tbody>
</table>
<form action="">
<label for="username">用户名</label>
<input id="username" type="text" placeholder="请输入用户名">
<label for="password">密码</label>
<input id="password" type="password" placeholder="请输入密码">
<input type="radio" name="" id="">
<select name="" id="">
<option value="男">男</option>
<option value="女">女</option>
</select>
<input type="submit" value="登陆">
<input type="button" value="登陆">
</form>
</body>
</html>