表格
标签
<table></table>
用于定义一个表格。- .tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。
- th /td:用于定义表格中的单元格,必须嵌套在
<tr></tr>
标签中,一对<tr> </tr>
中包含几对<td></td>
,就表示该行中有多少列(或多少个单元格)。
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" align="center" cellspacing="0" cellpadding="10">
<caption>
<h2>学生信息表</h2>
</caption>
<thead>
<!-- tr用来定义一行 -->
<tr>
<!-- th是表头 -->
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<!-- td是每一个行中的单元格 -->
<td>1</td>
<td>张三</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>28</td>
</tr>
</tbody>
</table>
</body>
</html>
table属性
如:
<table border="1" width="500" align="center" cellspacing="0" cellpadding="10">
</table>
表格标题
使用<caption></caption>
定义表格标题,会在表格上方自动居中并加黑
合并单元格
跨行合并:rowspan
跨列合并:colspan
合并单元格的步骤:
- 先判断跨行合并还是跨列合并
- 跨行合并用rowspan属性,跨列合并用个colspan属性
- 将rowspan 或者colspan写在第一个要合并的单元格上
- 将合并的行数和列数写在指定的属性值上
- 将多余的单元格注释掉
表单
概述
表单主要用于对用户进行疏忽采集,让用户输入数据
比如登录,注册,添加,更改等所有需要用户输入数据的地方。
表单标签
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
- action在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。
- method用于设置表单数据的提交方式,其取值为get或post。
- name用于指定表单的名称,以区分同一个页面中的多个表单。
input控件
input标签在from表单标签内部使用
主要属性值有以下几种:
注意:
- radio如果是一组,必须给他们命名相同的名字name,这样就可以多个选其中的一个啦。
- Input的size跟字体大小有关系,不设置的情况下,浏览器默认情况下,input默认的输入框的宽度就是169px
使用如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border="1" width="500" cellpadding="2" cellspacing="0">
<caption>
<h3>学员信息录入</h3>
</caption>
<!-- input : 以name=value 进行数据传递
select : 以select的name=option的value 进行数据传递
-->
<form action="http://www.baidu.com" method="GET">
<!-- 隐藏 -->
<input type="hidden" name="id" value="2">
<tr>
<td>姓名</td>
<!-- 普通输入框 -->
<!-- placeholder : 输入框中默认提示信息 -->
<td><input size="20" type="text" name="username" placeholder="请输入用户名"> </td>
</tr>
<tr>
<td>密码</td>
<!-- 密码输入框 -->
<td><input type="password" name="password"> </td>
</tr>
<tr>
<td>性别</td>
<!-- 密码输入框 -->
<td>
<!-- 单选的name必须一致 -->
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="0"> 女
<!-- checked 默认选择项
checked , checked=true , checked="checked"
-->
<input type="radio" name="sex" checked="checked" value="2"> 保密
</td>
</tr>
<tr>
<td>学校</td>
<!-- 下拉列表 -->
<td>
<!-- 对select添加 multiple 属性 可以选择多个项
对option添加 selected属性 设置默认选择项
-->
<select name="edu">
<option value="河北科技大学1">河北科技大学</option>
<option value="河北师范大学1">河北师范大学</option>
<option selected="selected" value="河北地质大学1">河北地质大学</option>
</select>
</td>
</tr>
<tr>
<td>选修课程</td>
<td>
<!-- 复选框默认选择的设置方式和单选一样 -->
<input type="checkbox" checked="checked" name="courses" value="java"> java
<input type="checkbox" name="courses" value="Oracle"> Oracle
<input type="checkbox" name="courses" value="Android"> Android
</td>
</tr>
<tr>
<td>自我评价</td>
<td>
<textarea name="eval" cols="30" rows="4"></textarea>
</td>
</tr>
<tr>
<td>上传头像</td>
<td><input type="file"></td>
</tr>
<tr>
<td>家庭地址</td>
<td>
<!-- 不可选中,不可更改,不可传递 -->
<input disabled="disabled" type="text" name="addr" value="河北省石家庄市">
<!-- 可选中,不可更改,可传递 -->
<!-- <input readonly="readonly" type="text" name="addr" value="河北省石家庄市"> -->
</td>
</tr>
<tr align="center">
<td colspan="2">
<!-- 可以提交 -->
<button>button会触发action</button>
<!-- 普通按钮 -->
<button type="button">button[type="button"]不会触发action</button>
<!-- 普通按钮 -->
<input type="button" value="input[type='button']不会触发action">
<!-- 提交按钮 -->
<input type="submit" value="input[type='submit']会触发action">
<!-- 重置按钮 -->
<input type="reset" value="重置">
<!-- 使用图片代替提交按钮 -->
<input type="image" src="./images/faq01.jpg">
</td>
</tr>
</form>
</table>
</body>
</html>