共计 2763 个字符，预计需要花费 7 分钟才能阅读完成。
本教程案例在线演示
有路网 PC 端
有路网挪动端
收费配套视频教程
收费配套视频教程
教程配套源码资源
教程配套源码资源
表格
table 标签（表格）、
tr 标签（行）、
td 标签（规范单元格）、
caption 标签（题目）、
th 标签（表头单元格）。
为了更深一层对表格进行语义化，HTML 引入了 thead、tbody 和 tfoot 这三个标签。
这三个标签把表格分为三局部：表头、表身、表脚。
table 表格
caption 题目
thead 表头（语义划分）
tbody 表身（语义划分）
tfoot 表尾（语义划分）
tr 行
th 表头单元格
td 表格单元格
<table>
<caption> 考试成绩表 </caption>
<thead>
<tr>
<th> 姓名 </th>
<th> 语文 </th>
<th> 英语 </th>
<th> 数学 </th>
<tr>
</thead>
<tbody>
<tr>
<td> 小明 </td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td> 小红 </td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td> 小杰 </td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> 均匀 </td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
表格款式丑化
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 6px;
color: blue;
}
</style>
给表格增加边框，设置字体色彩，
以及给单元格设置一些 padding
表单
表单就是收集用户信息的，就是让用户填写的、抉择的。
<div> <h3> 欢送注册本网站 </h3>
<form> 所有的表单内容，都要写在 form 标签外面 </form>
</div>
form 是英语表单的意思，form 两头能够增加文本框、明码框、单选按钮、复选框、下拉列表、按钮、文本域等内容
1. 文本框
<input type="text" value="默认值" />2. 明码框
<input type="password"/>3. 单选按钮
<input type="radio" name="命名" checked="checked"/> 男 <input type="radio" name="命名"/> 女input 的 type 的值如果是 radio 就是单选按钮。
须要留神的是必须要有雷同的 name 属性，单选按钮能力互斥。
label 标签
<input type=“radio”name=“sex”id=“nan”/>
<label for=“nan”> 男 </label>
<input type=“radio”name=“sex”id=“nv”/>
<label for=“nv”> 女 </label> input 元素要有一个 id，而后 label 标签就有一个 for 属性，和 id 雷同，就示意绑定了，这个 label 和 input 就有绑定关系了。点击 label 标签中的文字就能够抉择相应的单选框
5.4. 复选框
<input type="checkbox" name="aihao"/> 睡觉
<input type="checkbox" name="aihao"/> 吃饭 复选框，最好也是有雷同的 name（便于服务器端收集用户选中的信息）。
5. 下拉列表
<select>
<option> 吃饭 </option>
<option> 睡觉 </option>
<option> 打豆豆 </option>
</select>
select 就是“抉择”，
select 标签和 ul、ol、dl 一样，都是组标签
option“选项”。
6. 文本域
<textarea cols="20" rows="10"></textarea> cols 属性示意 columns“列”，
rows 属性示意 rows“行”。
值就是数字，示意行数和列数。标签对儿两头的文字是默认呈现在文本框的文字，个别不须要写字。
7. 按钮
一般按钮
<input type="button" value="我是一个一般按钮" /> button 就是英语“按钮”的意思。value 的“值”就是按钮下面显示的文字。
提交按钮
<input type="submit" />submit 就是英语“提交”的意思。这个按钮不须要写 value 主动就有“提交”文字。这个按钮点击，表单会提交到服务器。
重置按钮
<input type="reset" />reset 就是“复位”“重置”的意思，能够重置后面各个表单元素中填写的值。
只读和禁用
<input name="name" type="text" value="张三" readonly="readonly">
<input type="submit" disabled="disabled" value="保留" >我的项目实战
制作商品搜寻表单
search-form.css
.search{
height: 40px;
width: 420px;
margin: 0 auto;
margin-top: 60px;
}
.search .input{
border: 3px solid red;
width: 300px;
height: 36px;
font-size: 20px;
}
.search .btn{
height: 44px;
width: 100px;
border:0;
background-color: red;
color: white;
font-size: 18px;
font-weight: bold;
margin-left: -4px;
vertical-align: top;
letter-spacing: 6px;
}youlu-search-form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="search-form.css">
</head>
<body>
<div class="search">
<form action="#">
<input class="input" type="text" placeholder="书名">
<input class="btn" type="button" value="搜寻">
</form>
</div>
</body>
</html>