html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）

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>

运行结果：

列表制作

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

无序列表ul
有序列表ol
自定义列表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>

运行结果：

表单制作

表单的作用就是用来给后端提交数据，跟后端进行数据交互。
表单内容都放在一个form标签内。
表单给后端提交数据有两种方式：a、普通的submit按钮提交（要求表单中必须要有一个按钮，且type必须是submit）。b、通过ajax的方式给后端提交数据.(jsp学完就明白了)
form元素中的action表示把数据提交给谁，这儿写处理请求的地址.
前端给后端提交数据的方式：post和get.
提交数据要给表单元素添加name属性，根据name属性来提交数据。
如果action为空的，默认提交给自己，如果action有地址，就提交到对应的地址。
提交数据的格式： -表单制作.html?tel=123456789&username=admin
如果是get方式提交，提交的参数会显示在url地址栏（前提是满足第6点），如果是post提交，就不会在地址栏显示数据。
如果是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宝藏女孩欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）

html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）相关推荐

如何用JAVA制作一个漂亮的表格
如何用JAVA制作一个漂亮的表格表格图片: 选中一行时高亮显示,且字体变为红色: 在表格中添加数据: 代码如下: import java.awt.BorderLayout; import java. ...
表格下拉_【职场充电】要说制作一个漂亮的表格，高手都爱WPS
点击蓝字关注我们 Subscribe for More 表格的默认样式千篇一律,难免会造成视觉疲劳,为了让表格更加美观,可以在创建表格之后,对表格进行格式设置,包括文字方向.对齐方式.内置样式和自 ...
使用 ale.js 制作一个小而美的表格编辑器（3）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（2）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（1）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（4）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
jsp循环输出表格_使用 ale.js 制作一个小而美的表格编辑器（1）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
HTML制作色带,PS简单制作一个漂亮的混合色带gif动画效果
今天为大家介绍PS简单制作一个漂亮的混合色带gif动画效果方法,方法很简单的,教程介绍的很详细,好了,下面我们来看看吧! 先来看看案例的最终效果: 混合颜色带是一种特殊的高级蒙版,它可以快速隐藏像素. ...
android 心形上漂动画,PowerPoint Viewer制作一个漂亮心形飞出动画的操作教程
各位使用PowerPoint Viewer的同学们,你们知道怎么制作一个漂亮心形飞出动画吗?在这篇教程内小编就为各位呈现了PowerPoint Viewer制作一个漂亮心形飞出动画的操作教程. Pow ...

html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）

目录

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

列表制作

表单制作

html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）相关推荐

最新文章

热门文章