一.表格标签
1.<table></table> 创建表格
2.<caption></caption> 表格的标题
3.<tr></tr>Table Row（表格行）
4.<td></td>Table Data（表格数据）其中有属性rowspan="2" colspan="2" 用来优化表格 合并表格
5. <thead></thead>表格头部标签 <tbody></tbody> <tfoot></tfoot> 将表格分成三个部分
<!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 bgcolor="#ff6347" border="1" width="80" height="200" align="center" cellspacing="0">
<caption><h2>我是表格的标题</h2></caption>
<tr align="center" valign="top" bgcolor="red">
<td rowspan="2">1</td>
<td colspan="2">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>效果展示:
二.表单
表单(form)
提供一个让用户进行交互的窗口(输入框,选择框,提交按钮,登入框)
form属性:
action=数据提交的位置(后台/数据库)
method=数据提交的方式(get/post)默认为get
form的功能控件(工具箱)
input--输入框
textarea--多行输入框 共有属性:placeholder:提醒要输入的内容
select:下拉菜单
option:下拉菜单里的选项
bottom:按钮,一般是结合js来操作
input的类型
text--文本框
password--密码框
checkbox--多选框
radio--单选框.基于name判断是否为同一事件
submit--提交
file--文件
reset--重置
1.<form action="" method="post" enctype="multipart/form-data" > </form>,其中 action属性表示数据提交到的路径
注意:
如果表单项中出现文件上传项那么需要两件事
1.表单的传输方式必须为post方式
2.更改传输编码格式 在form标签中enctype="multipart/form-data"
2.<input type="text" name="username" value="" > 文本格式
3.<input type="password" name="password" value="">密码格式
4. <input type="radio" id="nan" name="sex" value="1"> 单选框
如
5.<input type="checkbox" name="hobby[]" id="one" value="0"> 多选框
注意在设置成多选框时name后面一定要有[].这样后端才能拿到数据
6.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签及其属性</title>
</head>
<body>
<h2> 用户登入</h2>
如果表单项中出现文件上传项那么需要两件事
1.表单的传输方式必须为post方式
2.更改传输编码格式 在form标签中enctype="multipart/form-data"
<form action="" method="post" enctype="multipart/form-data" >
用户名:
<input type="text" name="username" value="" >
<br>
密码:
<input type="password" name="password" value="">
<br>
<input type="radio" id="nan" name="sex" value="1">
<label for="nan">男</label>
<input type="radio" id="nv" name="sex" checked value="2">
<label for="nv">女</label>
<label >
<input type="radio" id="w" name="sex" value="3" >未知
</label>
<input type="submit" value="登入">
<br>爱好:
<input type="checkbox" name="hobby[]" id="one" value="0">
<label for="one">学习</label>
<input type="checkbox" name="hobby[]" value="1" checked>打球
<input type="checkbox" name="hobby[]" value="2">吃
<input type="checkbox" name="hobby[]" value="3">喝
<input type="checkbox" name="hobby[]" value="4">乐
<br>
<input type="file" name="" id="">
<input type="hidden" name="hidde" id="hello">
</form>
</body>
</html>效果展示
会员表
thead,tbody,tfoot的运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
tbody:hover{
background-color: tomato;
}
</style>
</head>
<body>
<table border="1" width="600" align="center" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>用户名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td>admin</td>
<td>18</td>
<td>男</td>
<td>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
<tr align="center">
<td>1</td>
<td>admin</td>
<td>18</td>
<td>男</td>
<td>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
<tr align="center">
<td>2</td>
<td>xiaohong</td>
<td>18</td>
<td>女</td>
<td>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
<tr align="center">
<td>3</td>
<td>xiaoming</td>
<td>19</td>
<td>男</td>
<td>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
<tr align="center">
<td>4</td>
<td>xiaohei</td>
<td>19</td>
<td>男</td>
<td>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" align="center">
<a href="">首页</a>
<a href="">上一页</a>
<a href="">下一页</a>
<a href="">尾页</a>
</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
</tfoot>
</table>
</body>
</html>
下拉列表
1.<select> </select> 下拉列表标签
2.<option value=""></option> 选项标签
<!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>
<form action="" method="get">
<input type="text" name="" id="">
<!-- <input type="image" src="../../img/img2.png" name="" id="" width="50"> -->
<button>提交</button>
<input type="submit" name="submit" id="">
<button type="button">这只是一个按钮</button>
<input type="reset" value="重置" name="" id="">
<br>
<!-- 多行文本输入 -->
地址:<textarea name="address" id="" rows="5" cols="50"> admim</textarea>
<!-- 下拉列表 -->
<select name="xueli" id="">
<option value="xueli">--请选择--</option>
<option value="0">小学</option>
<option value="1">初中</option> 有value拿value没有就拿文本
<option value="2">高中</option>
<option value="3">专科</option>
<option value="4" selected>本科</option>
<option value="5">研究生</option>
</select>
</form>
</body>
</html>效果展示
h5中新增表单
请看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5中新增的表单</title>
</head>
<body>
<form action="" method="get">
<fieldset>
<legend>个人基本信息</legend>
姓名:
<input type="text" name="name" id="">
性别:
<input type="radio" name="sex" value="0">女
<input type="radio" name="sex" value="1">男
<br>
年龄:
<input type="text" name="age" id="" value="">
电话:
<input type="text" name="phone" id="">
</fieldset>
<br>
<fieldset>
<legend>基本情况</legend>
身高:
<input type="text" name="height" id="">
体重:
<input type="text" name="weight" id="">
<br>
三围
<input type="text" name="" id="">
</fieldset>
<select name="" id="">
<option value="">--请选择--</option>
<optgroup label="服装">
<!-- <option value="">服装</option> -->
<option value="">女装</option>
<option value="">童装</option>
</optgroup>
<optgroup label="数码">
<!-- <option value="">数码</option> -->
<option value="">笔记本</option>
<option value="">台式</option>
<option value="">照相机</option>
</optgroup>
</select>
<br>
邮箱验证
<input type="email" name="email" id="">
URL验证
<input type="url" name="url" id="">
<input type="submit" name="submit" id=""> <br>
数值<input type="number" name="num" id="" min="0" max="100">
滑块<input type="range" name="range" id=""min="0" max="100" value="100">
<br>
搜索<input type="search" name="search" id="">
<br>
颜色选取<input type="color" name="color" id="">
电话:
<input type="tel" name="phone" id="">
日期<input type="date" name="" id="">
<br>
时间<input type="time" name="" id="">
<br>
周<input type="week" name="" id="">
<br>
月<input type="month" name="" id="">
<br>
<input type="datetime-local" name="" id="">
</form>
</body>
</html>
Form表单常用属性
1.readonly只读
2.novalidate取消表单验证 适用于Form标签
3.multiple可以选择多个
4.pattern正则匹配
5.step 用于数值表单设置步长
<!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>
<form action="" method="get" novalidate> novalidate取消表单验证 适用于Form标签
<input type="text" name="admin" id="" value="admin" readonly>
<br>
<input type="text" name="user1" id="" value="admin" disabled>
<br>
<input type="text" name="user2" id="" autofocus>
<br>
<input type="text" name="user3" id="" required placeholder="手机号/用户名/邮箱">
<input type="submit" name="" id="">
<br>
<input type="file" name="file" id="" multiple> multiple可以选择多个
<br>
<input type="text" name="pattern" id="" pattern="[a-z]">正则匹配
<br>
<input type="number" name="" id="" step="2">
<input type="submit" name="" id=""
formaction="http://www.baidu.com"
formmethod="post"
formenctype="multipart/form-data"
value="提交">
</form>
</body>
</html>
框架标签
<iframe>用来将浏览器分块
<!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>
框架标签
<iframe src="http://www.lmonkey.com" width="100%" frameborder="0">
</iframe>
</body>
</html>如
4099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
