文章目录
前言
表格是一个表，用于展示数据给人看,表单是一个可以填写的表,填完之后提交数据,列表是一个目录下有一系列数据，将数据一条一条展示给别人看
一、概述表格
1.创建表单使用的标签及其作用
- from
属性 action="xxx.java" //将表单提交到的服务器,可以是一个url method="GET" //请求方法,默认可以是get,post,经过处理可以支持put等请求
- input
属性 type type name value checked="checked"
- th
一般用于表头,也就是表格的第一行 • 1
- td
展示的表格,用于展示一般的数据
2.创建一个简单的表格
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="10" width=500 cellpadding="10" cellspacing="6" align="center"> <tr><th>姓名</th><th>年龄</th><th>性别</th></tr> <tr><td>小数</td><td>20</td><td>阿斯顿</td></tr> <tr><td>整数</td><td>21</td><td>手动分</td></tr> <tr><td>负数</td><td>22</td><td>请问饿</td></tr> </body> </html>
效果展示：
3.单元格合并
在日常生活中,难免要合并单元格,而合并单元格往往要用到colspan与rowspan属性
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 合并单元格小练习 --> <!-- 合并列就在所要合并列的最左边的标签上写上colspan="要合并的列的数量" --> <!-- 合并行就在所要合并行的最上面写上rowspan="要合并的行的数量" --> <table border="10" width=500 cellpadding="10" cellspacing="6" align="center"> <tr><th>姓名</th><th>年龄</th><th>性别</th></tr> <tr><td colspan="2">小数</td><td >阿斯顿</td></tr> <tr><td>整数</td><td>21</td><td rowspan="2">手动分</td></tr> <tr><td>负数</td><td>22</td></tr> </table> </body> </html>
效果展示：
二、概述表单
1.创建表格使用的标签及其作用
- from
属性 action="xxx.java" //将表单提交到的服务器,可以是一个url method="GET" //请求方法,默认可以是get,post,经过处理可以支持put等请求
- input
属性 type 对type赋值（"text" 文本框，"radio" 单选框，"checkbox" 复选框， 还可以是密码框、提交按钮....） name 这个input的名字，可以使用javascript将其筛选出来,或者后端处理数据时使用 value 默认值 checked="checked" 用于单选按钮的属性
- select
下拉表单框,内部可以嵌套option
- textarea
一个文本区域,可以在一块区域键入相应的文本
2.创建一个简单的表单
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- action填写的值是将数据提交到后端的配置 --> <form action="xxx.java" method="GET"> <!-- 表单是前台界面采集数据的模块,可以将采集到的信息传递给后台进行处理 --> <!-- 1.文本标签 --> <!-- maxlength用于限定密码的长度,限定之后多出的密码不再进行输入 --> <!-- name给指定的按钮或文本框起一个名字 --> <!-- value给出默认值 --> <!-- checked="checked"默认选定该按钮 --> 用户名：<input type="text" name="username" ><br> 密   码：<input type="password" name="userpwd" maxlength="6"><br> 男<input type="radio" name="usersex" value="男" checked="checked">女<input type="radio" name="usersex" value="女">待定<input type="radio" name="usersex" value="待定"> <br> 请选择你的爱好<br> 吃饭<input type="checkbox"> 树胶<input type="checkbox"> 睡觉<input type="checkbox"><br> <!-- span是一个行内块元素，与p的作用类似 --> <span>请选择你的家乡</span> <select> <option>北京</option> <option selected="selected">河南</option> <option>上海</option> <option>广东</option> <option>深圳</option> </select> <br> <p>请键入你的感想：</p> <!--textarea-->、 <!-- 文本输入框可以将数据输进文本框内,可以指定文本框大小,一般用css指定文本框大小 --> <textarea rows="5" cols="20">叮叮当,叮叮当,铃儿响叮当</textarea> <br> <!--常用的按钮 --> <!-- reset将表单内的数据清空 --> <!-- button结合js使用,可以获取验证码之类的 --> <!-- submit提交表单内的数据到服务器 --> <!-- file上传文件 --> <input type="reset" value="重新填写"> <input type="button" value="获取验证码" > <input type="submit" value="提交"> <input type="file" name="Filet"> </form> </body> </html> </html>
效果展示：
三、概述列表
1.列表分类
数据存放在li标签内,而li标签存放在ul或者ol内,ul，ol最主要的区别就是有序或无序。
- 无序列表
每一条数据,都没有区分顺序,前面有小黑点,通过list-style=“none”可以将小黑点去掉
<ul> <li>芝麻开门</li> <li>未雨绸缪</li> <li>温文尔雅</li> </ul>
- 有序列表
每一条数据像是标好了顺序，序号总是伴随每一条数据,没有间隔
<ol> <li>芝麻开门</li> <li>玛卡巴卡</li> <li>叶斯摩拉</li> </ol>
- 自定义列表
自己可以对列表进行自定义操作
<dl> <!-- nbsp是空格 --> <dt>      网址之家</dt> <dd>百度</dd> <dd>腾讯</dd> <dd>360</dd> </dl>
2.效果展示
总结
表格一般用于展示数据,表单一般用于收集数据,列表可以展示条例数据与做底部导航栏。
