html中的table标签和表单标签
资料来源于：B站尚硅谷JavaWeb教程(全新技术栈,全程实战) ，本人才疏学浅，记录其笔记以供他日回顾
table标签 视频链接
表单标签 视频链接
table标签
知识点
<!--
17) 表格 table
行 tr
列 td
表头列 th
table中有如下属性（虽然已经淘汰，但是最好了解一下）
- border：表格边框的粗细
- width:表格的宽度
- cellspacing：单元格间距
- cellpadding：单元格填充
tr中有一个属性： align -> center , left , right
rowspan : 行合并
colspan : 列合并
-->
具体示例
<html>
<head>
<title>表格标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" width="600" cellspacing="0" cellpadding="4">
<tr align="center">
<th>姓名</th>
<th>门派</th>
<th>成名绝技</th>
<th>内功值</th>
</tr>
<tr align="center">
<td>乔峰</td>
<td>丐帮</td>
<td>少林长拳</td>
<td>5000</td>
</tr>
<tr align="center">
<td>虚竹</td>
<td>灵鹫宫</td>
<td>北冥神功</td>
<td>15000</td>
</tr>
<tr align="center">
<td>扫地僧</td>
<td>少林寺</td>
<td>七十二绝技</td>
<td>未知</td>
</tr>
</table>
<hr/>
<table border="1" cellspacing="0" cellpadding="4" width="600">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr align="center">
<td>苹果</td>
<td rowspan="2">5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>菠萝</td>
<td>15</td>
<td>45</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>西瓜</td>
<td>6</td>
<td>6</td>
<td>36</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>总计</td>
<td colspan="4">181</td>
</tr>
</table>
</body>
</html>
表单标签
知识点
<!--
18) 表单 form
19) input type="text" 表示文本框 ， 其中 name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
input type="password" 表示密码框
input type="radio" 表示单选按钮。需要注意的是，name属性值保持一致，这样才会有互斥的效果;可以通过checked属性设置默认选中的项
input type="checkbox" 表示复选框。name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
select 表示下拉列表。每一个选项是option，其中value属性是发送给服务器的值 , selected表示默认选中的项
textarea 表示多行文本框（或者称之为文本域）,它的value值就是开始结束标签之间的内容
input type="submit" 表示提交按钮
input type="reset" 表示重置按钮
input type="button" 表示普通按钮
-->
具体示例
表单页面
<html>
<head>
<title>表单标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
<form action="demo04.html" method="post">
昵称：<input type="text" value="请输入你的昵称"/><br/>
密码：<input type="password" name="pwd"/><br/>
性别：<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked/>女<br/>
爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football" checked/>足球
<input type="checkbox" name="hobby" value="earth" checked/>地球<br/>
星座：<select name="star">
<option value="1">白羊座</option>
<option value="2" selected>金牛座</option>
<option value="3">双子座</option>
<option value="4">天蝎座</option>
<option value="5">天秤座</option>
</select><br/>
备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
<input type="submit" value=" 注 册 "/>
<input type="reset" value="重置"/>
<input type="button" value="这是一个普通按钮"/>
</form>
</body>
</html>
发送表单后跳转的页面
<html>
<head>
<title>表单标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
<h1><font color='red'>注册成功</font></h1>
</body>
</html>
浙公网安备 33010602011771号