标签 <table>...完整代码见示例</table>
作用 布局,呈现需要表格布局的内容
1.表格标签是块级元素
2.全页布局的作用已经退出舞台了
3.专注于自己应该专注的布局领域
4.表格样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>17120581028</td>
<td>小朱</td>
<td>女</td>
</tr>
</table>
</body>
</html>
带表格头的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>总分</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1712058</td>
<td>小朱</td>
<td>100</td>
</tr>
<tr>
<td>1711050</td>
<td>小谷</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>
表格的几个重要的知识点:边框问题(border),单元格间距(cellspacing),单元格边距(cellpadding),单元格跨列(colspan),内容对齐(align)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格属性</title>
</head>
<body>
<table align="left" border=2 cellspacing="1" cellpadding="3" >
<tbody align="center">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>1717</td>
<td>猪</td>
<td rowspan="2">母</td>
</tr>
<tr>
<td>1717</td>
<td>猪</td>
</tr>
<tr>
<td>1111</td>
<td>狗</td>
<td>公</td>
</tr>
<tr>
<td colspan="2">按钮</td>
</tr>
<tr >
<td colspan="3">按钮</td>
</tr>
</tbody>
</table>
</body>
</html>
表单
标签 <form>...</form>
作用 收集用户输入的内容(文本,文件)
属性 action:提交到的服务器端地址
method:指定提交时用哪种HTTP方法:post、get
name:标识
autocomplete:浏览器是否可以自动填充
enctype:指定表单内容编码
表单元素
input:文本、密码、单选、多选、按钮、数字、日期、颜色、范围、邮件、URL、文件
select:下拉列表
textarea:文本域
button:按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form name="test" id="1" action="" method="POST/GET" autocomplete="" enctype="UTF-8">
<input type="text" maxlength="10" value="文本"/>
</br>
<input type="password"/>
</br>
<input name="gender" value="0" type="radio">男
<input name="gender" value="1" type="radio">女
</br>
<input value="0" type="checkbox">电影
<input value="1" type="checkbox">音乐
<input value="2" type="checkbox">美术
<input value="3" checked type="checkbox">被锁定
</br>
<input type="button" value="按钮">
</br>
<input type="number">
</br>
<input type="date">
</br>
<input type="color">
</br>
<input min="10" max="50" type="range">
</br>
<input type="email">
</br>
<input type="submit">
</br>
<input type="url">
</br>
<input type="file" multiple="multiple">
</br>
<select name="" id="" multiple size="2">
<option value="">易烊千玺</option>
<option value="">刘昊然</option>
<option selected value="">谭松韵</option>
</select>
</br>
<select name="" id="" >
<option value="">易烊千玺</option>
<option value="">刘昊然</option>
<option value="">谭松韵</option>
</select>
</br>
<style>
textarea{
resize:none;
}
</style>
<textarea rows="3" cols="8">
哈哈哈哈哈哈哈哈哈哈哈哈
</textarea >
</br>
<button type="submit" form="1">
提交
</button>
</br>
<button type="reset" form="1">
重置提交
</button>
</br>
</form>
<button type="submit" form="1">
1提交
</button>
</br>
<button type="submit" name="test">
2提交
</button>
</br>
</body>
</html>