您现在的位置是:首页 > 正文

html如何制作一个漂亮的表格?+ 列表制作 + 表单制作(干货!直接收代码)

2024-02-01 01:11:10阅读 2

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注!
欢迎关注微信公众号:宝藏女孩的成长日记
如有转载,请注明出处(如不注明,盗者必究)


表单制作是重点哈哈哈!压轴出场!

html如何制作一个漂亮的表格?

html如何制作一个漂亮的表格?直接上代码!拿去运行一下就知道啦!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				border-collapse: collapse;/*让靠在一起的单元格只显示一个边框,边框不进行叠加*/
			}
			
			table tr th{
				border: solid 1px #ccc;
				height: 30px;
				width: 200px;
				background-color: #eee;
			}
			
			table tr td{
				border: solid 1px #ccc;
				height: 30px;
				text-align: center;
			}
			
			table tr:hover
			{
				background-color: red;/*hover:鼠标移上去就会变成红色*/
			}
		</style>
	</head>
	<body>
	<table border="0" cellspacing="0" cellpadding="0">
		<tr><th>生日年份</th><th>姓名</th><th>年龄</th><th>种类</th></tr>
		<tr><td>2005</td><td>嘎嘎</td><td>1</td><td>鸭子</td></tr>
		<tr><td>2000</td><td>黄儿</td><td>15</td><td>狗狗</td></tr>
		<tr><td>2005</td><td>黑儿</td><td>3</td><td>狗狗</td></tr>
		<tr><td>2008</td><td>喵喵</td><td>1</td><td>小猫</td></tr>
		<tr><td>2004</td><td>财财</td><td>2</td><td>狗狗</td></tr>
		<tr><td>2018</td><td>多比</td><td>50</td><td>精灵</td></tr>
	</table>	
	</body>
</html>

运行结果:

在这里插入图片描述

列表制作

列表分为有序列表,无序列表,自定义列表

  1. 无序列表ul
  2. 有序列表ol
  3. 自定义列表dl dt dd

上代码来实操,就知道怎么用了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--无序列表-->
		<ul>
			<li>从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜。</li>
			<li>从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜。</li>
			<li>从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜。</li>
			<li>从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜。</li>
			<li>从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜。</li>
		</ul>
		<!--有序列表-->
		<ol>
			<li>从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜。</li>
			<li>从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜。</li>
			<li>从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜。</li>
			<li>从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜。</li>
			<li>从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜。</li>
		</ol>
		
		<dl>
        	<dt>《一路向北》</dt>
			<dd>我一路向北,离开有你的季节</dd>
		</dl>

	</body>
</html>

运行结果:

在这里插入图片描述

表单制作

  1. 表单的作用就是用来给后端提交数据,跟后端进行数据交互。
  2. 表单内容都放在一个form标签内。
  3. 表单给后端提交数据有两种方式:a、普通的submit按钮提交(要求表单中必须要有一个按钮,且type必须是submit)。b、通过ajax的方式给后端提交数据.(jsp学完就明白了)
  4. form元素中的action表示把数据提交给谁,这儿写处理请求的地址.
  5. 前端给后端提交数据的方式:post和get.
  6. 提交数据要给表单元素添加name属性,根据name属性来提交数据。
  7. 如果action为空的,默认提交给自己,如果action有地址,就提交到对应的地址。
  8. 提交数据的格式: -表单制作.html?tel=123456789&username=admin
  9. 如果是get方式提交,提交的参数会显示在url地址栏(前提是满足第6点),如果是post提交,就不会在地址栏显示数据。
  10. 如果是post提交,如果我们在调试窗口中检查http请求,其实是可以看到数据的。比如说我运行下面这段代码,

代码走

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<form action="" method="post">
			color<input type="color" name="color" id="" value="" /><br/>
			date<input type="date" name="" id="" value="" /><br/>
			datetime<input type="datetime" name="" id="" value="" /><br/>
			datetime-local<input type="datetime-local" name="" id="" value="" /><br/>
			email<input type="email" name="" id="" value="" /><br/>
			month<input type="month" name="" id="" value="" /><br/>
			number<input type="number" name="" id="" value="" /><br/>
			range<input type="range" name="" id="" value="" /><br/>
			search<input type="search" name="" id="" value="" /><br/>
			tel<input type="tel" name="tel" id="" value="" /><br/>
			time<input type="time" name="" id="" value="" /><br/>
			url<input type="url" name="" id="" value="" /><br/>
			week<input type="week" name="" id="" value="" /><br/>
			text<input type="text" name="text" id="" value="" /><br/>
			password<input type="password" name="password" id="" value="" /><br/>
			<input type="submit" value="提交"/>
		</form>
		
		
	</body>
</html>

运行结果:
在这里插入图片描述

输入tel和password,点击提交,用get的话就会显示我所填的信息,而post在网址栏处没有显示,但是,我们可以用检查来查看用户填写的电话号码和密码

步骤
在还没有填写密码的时候,右键点击检查,点击Network
在这里插入图片描述
输入密码之后,点击提交,会自动出现一条数据——》点击这条红色的数据!
在这里插入图片描述
然后在Headers下滑,就可看到刚刚我们提交的数据,就算是密码也不例外!
在这里插入图片描述
在这里插入图片描述
以前老师总是教的post比较安全,我也是最近才知道post提交其实也可以看见密码的,涨知识!一起涨知识吧!

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注!
欢迎关注微信公众号:宝藏女孩的成长日记
如有转载,请注明出处(如不注明,盗者必究)

网站文章

  • java学习之路 之 反射机制综合练习题、动态代理实例

    在上一篇博文中我们已经进行了反射机制的习题练习,这里我们在做一个考察比较全面的练习,如下:写一个类ReflectUtil类, 类中写一个静态方法Object methodInvoker(String classMethd) 此方法为无参方法如,我们传入的实参字符串为:classMethod "java.lang.String.length()"就可以通过反射执行String类中的lengt

    2024-02-01 01:10:42
  • 分布式发布订阅消息系统 Kafka 架构设计

    分布式发布订阅消息系统 Kafka 架构设计

    我们为什么要搭建该系统Kafka是一个消息系统,原本开发自LinkedIn,用作LinkedIn的活动流(activity stream)和运营数据处理管道(pipeline)的基础。现在它已为多家不...

    2024-02-01 01:10:35
  • 使用Axure+svn+httpd搭建自己的在线画图工具

    使用Axure+svn+httpd搭建自己的在线画图工具

    文章目录一、为什么要画图?二、Axure团队项目搭建三、Axure团队项目拉取四、​搭建Apache服务使用http协议访问svn安装httpd配置httpd添svn.conf配置配置http用户名密...

    2024-02-01 01:10:27
  • netty设计模式-责任链模式

    netty设计模式-责任链模式

    责任链模式的定义:使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系, 将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理他为止。 首先来看看责任链模式的四个要素: 1、责任处理器接口 2、创建链,添加删除责任处理器接口 3、上下文 4、责任链终止机制。 在netty里面,很明显channelHandler和Pipeline构成了责任链模式。让我们通过...

    2024-02-01 01:10:22
  • 根据二叉树的中序和后续遍历,求树的前序遍历(附Java代码实现)

    根据二叉树的中序和后续遍历,求树的前序遍历(附Java代码实现)

    根据树的中序遍历和后续遍历求前序遍历

    2024-02-01 01:09:52
  • 目标检测网络系列——YOLO V4

    YOLO4的设计目标也还是YOLO系列的主要关注点,就是要快。 The main goal of this work is designing a fast operating speed of an...

    2024-02-01 01:09:46
  • 如何不优雅的解决子组件丢失this.props的三个重要对象

    如何不优雅的解决子组件丢失this.props的三个重要对象

    把父组件的this.props暴力传给子组件在组件里就不能用this.props了 要用this.props.data 才相当于this.props然后就可以正常用这三个对象的属性和方法了 

    2024-02-01 01:09:39
  • SpringMVC(五):异常处理器

    作用:设置指定异常的处理方案,功能等同于控制器方法,出现异常后终止原始控制器执行,并转入当前方法执行。工具类抛出的异常:因工具类书写不严谨不够健壮导致(例如:必要释放的连接长期未释放等)业务层抛出的异...

    2024-02-01 01:09:11
  • 力扣232 - 用栈实现队列【C语言实现】

    力扣232 - 用栈实现队列【C语言实现】

    力扣232 - 用栈实现队列,教你如何使用双栈实现队列操作

    2024-02-01 01:09:04
  • 友元函数练习

    #include &quot;stdafx.h&quot; #include&quot;iostream&quot; using namespace std; class Date; class Ti...

    2024-02-01 01:08:57