本教程案例在线演示
免费配套视频教程
教程配套源码资源
表格
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>
image
表格样式美化
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 6px; color: blue; } </style>
给表格添加边框，设置字体颜色，
以及给单元格设置一些padding
表单
image
表单就是收集用户信息的，就是让用户填写的、选择的。
<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>
