表格
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.png
表格样式美化
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 6px;
color: blue;
}
</style>
给表格添加边框,设置字体颜色,
以及给单元格设置一些padding
image.png
练习制作商品表格
image.png表单
image.png表单就是收集用户信息的,就是让用户填写的、选择的。
<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标签中的文字就可以选择相应的单选框
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="保存" >
image.png
项目实战
制作商品搜索表单
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="reset.css" rel="stylesheet">
<style>
.search{
width: 409px;
margin: 0 auto;
margin-top: 60px;
height: 40px;
}
.search .input{
width: 300px;
height: 36px;
border: 3px solid red;
font-size: 20px;
}
.search .btn{
vertical-align: top;
height: 44px;
width: 100px;
margin-left: -3px;
border: 0px solid black;
background-color: red;
color: white;
font-size: 18px;
font-weight: bold;
letter-spacing: 6px;
}
</style>
</head>
<body>
<div class="search">
<form>
<input type="text" class="input" placeholder="书名">
<input type="button" value="搜索" class="btn">
</form>
</div>
</body>
</html>
课后作业
1.制作搜索框(表单样式)
2.制作个人信息( 表单)
3.制作课程表(表格)
网友评论