表格
table标签（表格）、tr标签（行）、td标签（标准单元格）、caption标签（标题）、th标签（表头单元格）。
为了更深一层对表格进行语义化，HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分：表头、表身、表脚。
标签 说明
table 表格
caption 标题
thead 表头（语义划分）
tbody 表身（语义划分）
tfoot 表尾（语义划分）
tr 行
th 表头单元格
td 表格单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<thead>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</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>
</body>
</html>
效果图
表格样式美化
<style>
table,th,td{
border: 1px solid black;
border-collapse: collapse;
}
th,td{
padding: 6px;
color: blue;
}
</style>
效果图
表单
表单就是收集用户信息的，就是让用户填写的、选择的。
<form> 所有的表单内容，都要写在form标签里面</form>
<from action="xx"></form>
xx是服务器的域名或者网址是要提交到服务器的内容
1.文本框
<input type="text" value="默认值" >
<input type="text" value="name" placeholder="请输入用户名">
placeholder提示信息，当开始输入信息时消失
2.密码框
<input type="password"/>
3.单选按钮
<input type="radio" name="命名">男
<input type="radio" name="命名">女
input的type的值如果是radio就是单选按钮。
需要注意的是必须要有相同的name属性，单选按钮才能互斥。
也就是说name要设置的一样，才能实现选择男或者选择女
<input type="radio" name="命名" checked="checked"/>男
默认选择男
label标签
<input type="radio" name="sex" id="man" >
<label for="man">男</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.按钮
(1)普通按钮
<input type="button" value="我是一个普通按钮" />
button就是英语“按钮”的意思。value的“值”就是按钮上面显示的文字。
(2)提交按钮
<input type="submit" />
submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字，可以写value=""。这个按钮点击，表单会提交到服务器。
(3)重置按钮
<input type="reset" />
reset就是“复位”“重置”的意思，可以重置前面各个表单元素中填写的值。
只读和禁用
<input name="name" type="text" value="张三" readonly="readonly">
<input type="submit " disabled="disabled" value="保存" >
练习制作调查问卷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子产品调查表</title>
<style>
h1
{
color:#800080;
}
h1 span
{
color:red;
}
div
{
margin: 10px;
}
textarea
{
margin-left: 10px;
}
</style>
</head>
<body>
<h1><span>American Metric</span> 电子产品调查表</h1>
<form>
<div>
请输入您的姓名：<input type="text">
</div>
<div>
请输入您的购买日期：<input type="text">年
<select>
<option>1月</option>
<option>2月</option>
<option>3月</option>
<option>4月</option>
</select>月
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>日
</div>
<div>
请输入您的电子邮件地址：<input type="text">
</div>
<div>
您是否查看过我们的在线产品目录？
<input type="radio" name="yes">是
<input type="radio" name="yes">否
</div>
<div>
如果查看过，您对哪些产品有兴趣购买？ （选择提供的产品）
</div>
<div>
<input type="checkbox"> 大屏幕电视机
<input type="checkbox"> 音频设备
<input type="checkbox"> 视频设备
<input type="checkbox"> 相机
</div>
<div>
在填写订单之前，您还有什么问题、意见或建议？
</div>
<textarea cols="40" rows="6">您的输入：</textarea>
<div>
<input type="submit">
<input type="reset">
</div>
</form>
</body>
</html>
给每一个标签都放在div里是因为可以独立的一行的显示内容
网友评论