HTML（表结构，关联三个小练习）

最新推荐文章于 2023-12-15 20:19:25 发布
最新推荐文章于 2023-12-15 20:19:25 发布
阅读量406 收藏 5
点赞数 1
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47514459/article/details/116859323
版权

千里之行始于足下，不知不觉我也不知道学习了IT有些时间了，小编此篇博客为练习处理，希望帮助到一些和我一样的小白，不多说，上干货。

练习1.用表结构，构造出下图的银行汇款单。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<!-- 注释
			meta 用来规定编码-->
		<meta challenge="utf-8">
	</head>
	<body>
		<h1>工商电子银行汇款单</h1>
		
		<table border="1" cellpadding="0" cellspacing="0" width="1000">
		<!-- width(宽度) cellspacing(单元格间距) cellpadding(单元格边距)  border(边境)-->
			<tr>
				<td colspan="2">回单类型</td>
				<td><small>网上转账货款</small></td>
				<td  colspan="2">指令序号</td>
				<td><small>xxxxxxxxx</small></td>
			</tr>
			<tr>
				
				<td rowspan="6" width="10"><strong>收款人</strong></td>
				
					<td>户名</td>
					<td>xx</td>
				<td rowspan="6" width="10"><strong>收款人</strong></td>
				<!-- rowspan 行宽 -->
					<td>户名</td>
					<td>xx</td>
				
			</tr>
			<tr>
				<td>卡号</td>
				<td>xxx</td>
				<td>卡号</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>地区</td>
				<td>xxx</td>
				<td>地区</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>网点</td>
				<td>xxx</td>
				<td>网点</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>币种</td>
				<td>xxx</td>
				<td>钞标记</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>金额</td>
				<td>xxx</td>
				<td>手续费</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td colspan="2" >合计</td>
				<td colspan="4">xxx</td>
				<!-- collapse 列宽 -->
				
			</tr>
			<tr>
				<td colspan="2">交易时间</td>
				<td>xxx</td>
				<td  colspan=" 2">时间戳</td>
				<td>xxx</td>
			</tr>
			
			
		</table>
		<hr>
		<p>票据打印时间</p>
		<p>操作员：xx</p>
	
	</body>
</html>

处理现象：
在这里插入图片描述

练习1.用表结构，构造出下图的诗句。（图片小编想弄一个更好的）
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<!-- 注释
			meta 用来规定编码-->
		<meta challenge="utf-8">
		<title>将进酒</title>
		<!-- title  设置标题  -->
	</head>
	<body>
		<h1>君不见<small>黄河之水天上来</small></h1>
		<table   >
		<!-- width(宽度) cellspacing(单元格间距) cellpadding(单元格边距)  border(边境) align="center"(居中对齐）-->
			<tr> 
				<td>
					<img src="C:\Users\Lenovo\Pictures\Saved Pictures\picture\李白.jpg" alt=""  style="height:400px;">
					<!--style="height:400px;wait:1000px;" 设置样式  height 高 px 像素单位-->
					
				</td>
				<td>
					<table align="center">
						<tr>
						<td style="width:200px; text-align:center;"> 
							<table align="center">
							<tr>
								<td><p>君不见黄河之水天上来，奔流到海不复回。</p>
									<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
									<p>人生得意须尽欢，莫使金樽空对月。</p>
									<p>天生我材必有用，千金散尽还复来。</p>
									<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
									<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
									<p>与君歌一曲，请君为我倾耳听。</p>
									<p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
									<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
									<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
									<p>主人何为言少钱，径须沽取对君酌。</p>
									<p>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。<p>
								</td>
							<tr>
						</td>
						</tr>
				</td>
				
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述
练习3：用表结构，构造出下图的网址。（图片原因，所以说小编简单化了）
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<!-- 注释
			meta 用来规定编码-->
		<meta challenge="utf-8">
		<title>电影</title>
		<!-- title  设置标题  -->
	</head>
	<body>
	<table border="1" cellpadding="0" cellspacing="0" width="1000">
		<!-- width(宽度) cellspacing(单元格间距) cellpadding(单元格边距)  -->
		<tr >
			<td colspan="8"><h1>热门电影板块</h1></td>
		</tr>
		<hr>
		<tr>
			<td colspan="8">
			
			<a href="#"><strong> 最新热门电影</strong></a>	
			<a href="#">热门</a>	
			<a href="#">最新</a>	
			<a href="#">冷门</a>	
			<a href="#">华语</a>	
			<a href="#">更多>></a>
			</td>
			
			
		</tr>
		<tr >
			<td colspan="1">
			<img src="C:\Users\Lenovo\Pictures\Camera Roll\a1.jpg" style="height:100px;">
			</td>
			<td>
			<img src="C:\Users\Lenovo\Pictures\Camera Roll\a1.jpg" style="height:100px;">
			</td>
			<td>
			<img src="C:\Users\Lenovo\Pictures\Camera Roll\a1.jpg" style="height:100px;">
			</td>
			<td>
			<img src="C:\Users\Lenovo\Pictures\Camera Roll\a1.jpg" style="height:100px;">
			</td>
						
		</tr>

		<tr>
			<td>xx</td>
			<td>xx</td>
			<td>xx</td>
			<td>xx</td>
		
		
		</tr>
		</table>
	</body>
<html>

在这里插入图片描述4.关联图片与瞄点（代码优化）
优化一

<!DOCTYPE html>
<html>
	<head>
		<!-- 注释
			meta 用来规定编码-->
		<meta challenge="utf-8">
	</head>
	<body>
		
		<a href="E:\jhj\练习2.html">作业2</a>
		<a href="E:\jhj\练习3.HTML">作业3</a>
		<!-- a标签 href="可以是网络也可以是本地地址  #加上id会让显示向id靠拢" -->
		<h1>工商电子银行汇款单</h1>
		
		<table border="1" cellpadding="0" cellspacing="0" width="1000">
		<!-- width(宽度) cellspacing(单元格间距) cellpadding(单元格边距)  border(边境)-->
			<tr>
				<td colspan="2">回单类型</td>
				<td><small>网上转账货款</small></td>
				<td  colspan="2">指令序号</td>
				<td><small>xxxxxxxxx</small></td>
			</tr>
			<tr>
				
				<td rowspan="6" width="10"><strong>收款人</strong></td>
				
					<td>户名</td>
					<td>xx</td>
				<td rowspan="6" width="10"><strong>收款人</strong></td>
				<!-- rowspan 行宽 -->
					<td>户名</td>
					<td>xx</td>
				
			</tr>
			<tr>
				<td>卡号</td>
				<td>xxx</td>
				<td>卡号</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>地区</td>
				<td>xxx</td>
				<td>地区</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>网点</td>
				<td>xxx</td>
				<td>网点</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>币种</td>
				<td>xxx</td>
				<td>钞标记</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>金额</td>
				<td>xxx</td>
				<td>手续费</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td colspan="2" >合计</td>
				<td colspan="4">xxx</td>
				<!-- collapse 列宽 -->
				
			</tr>
			<tr>
				<td colspan="2">交易时间</td>
				<td>xxx</td>
				<td  colspan=" 2">时间戳</td>
				<td>xxx</td>
			</tr>
			
			
		</table>
		<hr>
		<p>票据打印时间</p>
		<p>操作员：xx</p>
	
	</body>
</html>

优化 练习二（因为只有二有一点长，所有只在这个练习上进行了瞄点）

<!DOCTYPE html>
<html>
	<head>
		<!-- 注释
			meta 用来规定编码-->
		<meta challenge="utf-8">
		<title>将进酒</title>
		<!-- title  设置标题  -->
	</head>
	<body>
	<div>
		<div id=one></div>
		<a href="E:\jhj\练习3.HTML">作业3</a>
		<a href="E:\jhj\练习1.HTML">作业1</a>
		<a href="#mw">返回底部</a>
		<!-- a标签 href="可以是网络也可以是本地地址" #加上id会让显示向id靠拢"-->
			<h1>君不见<small>黄河之水天上来</small></h1>
			<table   >
			<!-- width(宽度) cellspacing(单元格间距) cellpadding(单元格边距)  border(边境) align="center"(居中对齐）-->
				<tr> 
					<td>
						<img src="C:\Users\Lenovo\Pictures\Saved Pictures\picture\李白.jpg" alt=""  style="height:400px;">
						<!--style="height:400px;wait:1000px;" 设置样式  height 高 px 像素单位-->
						
					</td>
					<td>
						<table align="center">
							<tr>
							<td style="width:200px; text-align:center;"> 
								<table align="center">
								<tr>
									<td><p>君不见黄河之水天上来，奔流到海不复回。</p>
										<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
										<p>人生得意须尽欢，莫使金樽空对月。</p>
										<p>天生我材必有用，千金散尽还复来。</p>
										<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
										<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
										<p>与君歌一曲，请君为我倾耳听。</p>
										<p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
										<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
										<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
										<p>主人何为言少钱，径须沽取对君酌。</p>
										<p>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。<p>
									</td>
								<tr>
							</td>
							</tr>
					</td>
					
				</tr>
			</table>
		</div>
		<div id=mw></div>
		<a href="#one">返回头部</a>
	</body>
</html>

优化 练习三

<!DOCTYPE html>
<html>
	<head>
		<!-- 注释
			meta 用来规定编码-->
		<meta challenge="utf-8">
		<title>电影</title>
		<!-- title  设置标题  -->
	</head>
	<body>
	<a href="E:\jhj\练习1.HTML">作业1</a>
	<a href="E:\jhj\练习2.HTML">作业2</a>
	<!-- a标签 href="可以是网络也可以是本地地址" -->
	<table border="1" cellpadding="0" cellspacing="0" width="1000">
		<!-- width(宽度) cellspacing(单元格间距) cellpadding(单元格边距)  -->
		<tr >
			<td colspan="8"><h1>热门电影板块</h1></td>
		</tr>
		<hr>
		<tr>
			<td colspan="8">
			
			<a href="#"><strong> 最新热门电影</strong></a>	
			<a href="#">热门</a>	
			<a href="#">最新</a>	
			<a href="#">冷门</a>	
			<a href="#">华语</a>	
			<a href="#">更多>></a>
			</td>
			
			
		</tr>
		<tr >
			<td colspan="1">
			<img src="C:\Users\Lenovo\Pictures\Camera Roll\a1.jpg" style="height:100px;">
			</td>
			<td>
			<img src="C:\Users\Lenovo\Pictures\Camera Roll\a1.jpg" style="height:100px;">
			</td>
			<td>
			<img src="C:\Users\Lenovo\Pictures\Camera Roll\a1.jpg" style="height:100px;">
			</td>
			<td>
			<img src="C:\Users\Lenovo\Pictures\Camera Roll\a1.jpg" style="height:100px;">
			</td>
						
		</tr>

		<tr>
			<td>xx</td>
			<td>xx</td>
			<td>xx</td>
			<td>xx</td>
		
		
		</tr>
		</table>
	</body>
<html>

现象：（如果对现象感兴趣的可以看看小编分享视频了解了解）
在这里插入图片描述

链接：https://pan.baidu.com/s/1fKiMiQTkIuRsdV021pUJUQ 
提取码：hdy7 
复制这段内容后打开百度网盘手机App，操作更方便哦
韶光不负
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML结构基础
Juli_Baker的博客
05-23 227
HTML Hyper Text Markup Language 超文本标记语言 标签 HTML5+CSS3 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zrEBH5Ov-1621778017772)(C:\Users\hang.li\AppData\Roaming\Typora\typora-user-images\image-20210520210243343.png)] <!DOCTYPE html> //告诉浏览器我们要使用html规范 <!
html-表单的简单练习3：
crraxx的博客
10-22 198
表单的简单练习3： 需要实现的目标： 代码运行： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="img/logo.gif" /> <img src="img/reg.gif" /> <table&gt
HTML table 细表格实现的两种方式
qq_39240684的博客
01-08 426
HTML table 细表格实现的两种方式第一种第二种实现效果 第一种 <%-- Created by IntelliJ IDEA. User: Think Date: 2020-01-08 Time: 12:51 To change this template use File | Settings | File Templates. --%> <%@ p...
如何给html创建关联,如何在设置关联控制面板中创建关联？
weixin_30045091的博客
06-25 501
回答：原因：没有正确安装到指定的路径造成的。1、首先双击打开sketchup应用程序，进到系统设置的扩展里也没有vray控制面板插件的显示。2、然后依次打开C:\Documents and Settings\All Users\SketchUp\Sketchup 2014\SketchUp中的Plugins文件夹，将该文件夹内的东西全部进行复制。3、然后依次打开C:\Documents and S...
HTML实战小项目：简单的注册页面，汇款单，“将进酒”布局
weixin_67259816的博客
10-28 734
【代码】HTML实战小项目：简单的注册页面，汇款单，“将进酒”布局。纯HTML写的，希望大家可以共同学习进步；作为前端小白，只是想把功能实现出来。
2023年安徽省计算机二级练习题.doc
11-07
这是因为线性表可以是空表，也可以是满表，每个结点可以有多个前件和后件。 6. 不是线性表顺序存储结构特性的描述是逻辑相邻的数据物理位置上不相邻。这是因为顺序存储结构要求逻辑相邻的数据物理位置上也相邻。 7...
html入门到放弃笔记
05-15
多个文件夹之间的关系，就是目录结构 1、什么是 URL URL (Uniform Resource Locator)，统一资源定位器。用来标识某资源文件的位置 2、URL 在 WEB 中的表现形式 共三种表现形式： 1、绝对路径 特点：从文件...
SQL数据库练习打印.pdf
10-11
21. 数据库管理系统的三个要素是数据结构、数据操作和完整性约束。 22. 删除表中数据的语句是DELETE。 23. 限制输入到列的值的范围，应使用CHECK约束。 24. 触发器可引用视图或临时表，并产生两个特殊的表是...
123-电子商务数据库技术综合练习题.doc
05-09
1. 电子商务基本结构框架中，社会人文环境、自然科技环境和电子商务技术内容构成了电子商务应用平台的三个支柱。 2. 电子商务活动中的信息通常是以多媒体的形式在 Internet 上传播的。 3. 数据库技术的产生与发展...
管理系统中计算机应用上机考试与操作练习题.doc
07-09
KC.DBF 中包括课程号、课程名、学分三个字段，而 RK.DBF 中包括课程号、任课教师、职称、性别四个字段。 二、数据库操作 在数据库操作中，需要对 RK.DBF 中的“性别”字段后添加“备注”字段，并在第 4 条记录的...
html调用打印实现打印
12-15
html调用打印实现打印
HTML-Demo
最新发布
一土~的博客
12-15 388
这里会更新web前端相关知识点，需要可以收藏哦~
移动端登录页面-(1)HTML结构搭建练习
qq_41421033的博客
03-10 3947
目标: 利用css样式布局, 实现登录页面效果 效果图: 步骤一: 搭建html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-sc
10.1.4 HTML练习题
Alex
03-04 581
1.对div和span标签的理解？ div是块级元素，在没有任何布局属性作用时，默认排列方式是换行排列。 span是行内元素、内联元素，在没有任何布局属性，默认是同行排列。 2.如何理解标签的嵌套结构？它们的规则是怎样的？ 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素。 块级元素不能放在p标签里面。 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元...
HTML基础练习题
热门推荐
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
HTML作业（一）
ll_j_21的博客
10-16 5899
一、 在这里插入代码片
html 关联下拉列表,JavaScript结合HTML DOM实现联动菜单
weixin_35418139的博客
06-03 354
本文实例为大家分享了js三级联动菜单展示的具体代码，供大家参考，具体内容如下效果图：代码：联动菜单/*使用 HTML DOM 的方式实现联动菜单*/var categories=[{"id":10,"name":'男装',"children":[{"id":101,"name":'正装'},{"id":102,"name":'T恤'},{"id":103,"name":'裤衩'}]},{"id":...
HTML中的两列窗口关联
lansesl2008的专栏
08-17 2457
效果：页面分为左右两个部分，在左边点击链接时，显示在右边，
html收款页面模板,好得很CMS WEB打印收款收据模板HTML源码
weixin_42503645的博客
06-04 1287
H5打印收据，www.hdhcms.comhtml{-webkit-text-size-adjust:none;}@media print {input {display: none;}}@page {margin: 15mm 10mm 0 10mm;size: A4;-webkit-text-size-adjust:none;}body {margin:0px;padding:0px;}h1{f...
一张表关联三级结构表拼接sql
05-15
假设有三张表：A表、B表、C表，它们之间的关系是A表与B表是一对多的关系，B表与C表也是一对多的关系，那么可以使用以下 SQL 语句来进行三级表的关联查询： ``` SELECT * FROM A LEFT JOIN B ON A.id = B.a_id LEFT JOIN C ON B.id = C.b_id; ``` 其中，A表与B表使用了 LEFT JOIN 进行关联查询，B表与C表也使用了 LEFT JOIN 进行关联查询。这样可以将三张表拼接在一起，形成一个三级结构的表，方便查询。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

韶光不负

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值