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

千里之行始于足下，不知不觉我也不知道学习了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，操作更方便哦

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

列名 userid 不明确。表结构_SQL-Server(三)表的创建和操作
3.1表结构和数据类型 3.1.1表和表结构表结构.组成表的各列的名称及数据类型,统称为表结构. 记录.每个表包含了若干行数据,它们是表的"值",表中的一行称为一个记录.因此表是 ...
图书管理系统的数据库表结构（三）
接图书管理系统的数据库表结构(二) I.1 List of references Name Code Parent Table Child Table Foreign Key Columns ...
Mysql查看表结构的三种方法
目录: mysql查看表结构方法: show create table desc information_schema.COLUMNS 表结构: 获取所有的表结构及备注根据库名导出所有表信息根据 ...
frm ibd文件导入mysql_Mariadb,Mysql如何根据.frm和.ibd文件来恢复数据和表结构
废话不多说直接进入正题,Mariadb,Mysql根据.frm和.ibd文件来恢复数据和表结构,大体分为三个步骤: 1.创建表结构 2.导入表结构 3.恢复表数据接下来,我们按照这三个步骤一步一步恢 ...
mysql ibd frm文件_Mariadb,Mysql如何根据.frm和.ibd文件来恢复数据和表结构
废话不多说直接进入正题,Mariadb,Mysql根据.frm和.ibd文件来恢复数据和表结构,大体分为三个步骤: 1.创建表结构 2.导入表结构 3.恢复表数据接下来,我们按照这三个步骤一步一步恢 ...
Mysql数据库表结构导出工具介绍
软件开发过程中,数据库设计是其中非常重要的一个环节,一般在设计阶段都会采用PowerDesigner进行数据库表的设计并生成数据库表结构文档.但是有的时候数据库表结构文档缺失了怎么办,能不能从数据库直 ...
Mysql——》查看数据库表结构
版权声明:本文为博主原创文章,无需授权即可转载,甚至无需保留以上版权声明,转载时请务必注明作者. https://blog.csdn.net/weixin_43453386/article/detai ...
创建一对多表结构实例 /操作的三种方式
例 1.注册App01 完成各项配置 2. 写完后自动生成一个id自增列(主键) 如果不想生成自己写创建两张表 3.执行创建语句 (其中还进行了一个小修改) 4.按照之前的方法打开数据库并输 ...
MySQL数据库基础学习小终结：连接查询、表结构的修改、约束条件、MySQL与python交互
目录一.连接查询 1.内连接 2.外连接二.表结构的修改--alter 1.修改表名 2.修改字段名 3.修改字段类型--modify 4.添加字段 (1)添加日期字段:datetime (2)e ...

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

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

最新文章

热门文章