HTML(表结构,关联三个小练习)

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

练习1.用表结构,构造出下图的银行汇款单。
HTML(表结构,关联三个小练习)_第1张图片


<html>
	<head>
		
		<meta challenge="utf-8">
	head>
	<body>
		<h1>工商电子银行汇款单h1>
		
		<table border="1" cellpadding="0" cellspacing="0" width="1000">
		
			<tr>
				<td colspan="2">回单类型td>
				<td><small>网上转账货款small>td>
				<td  colspan="2">指令序号td>
				<td><small>xxxxxxxxxsmall>td>
			tr>
			<tr>
				
				<td rowspan="6" width="10"><strong>收款人strong>td>
				
					<td>户名td>
					<td>xxtd>
				<td rowspan="6" width="10"><strong>收款人strong>td>
				
					<td>户名td>
					<td>xxtd>
				
			tr>
			<tr>
				<td>卡号td>
				<td>xxxtd>
				<td>卡号td>
				<td>xxxtd>
			tr>
			<tr>
				<td>地区td>
				<td>xxxtd>
				<td>地区td>
				<td>xxxtd>
			tr>
			<tr>
				<td>网点td>
				<td>xxxtd>
				<td>网点td>
				<td>xxxtd>
			tr>
			<tr>
				<td>币种td>
				<td>xxxtd>
				<td>钞标记td>
				<td>xxxtd>
			tr>
			<tr>
				<td>金额td>
				<td>xxxtd>
				<td>手续费td>
				<td>xxxtd>
			tr>
			<tr>
				<td colspan="2" >合计td>
				<td colspan="4">xxxtd>
				
				
			tr>
			<tr>
				<td colspan="2">交易时间td>
				<td>xxxtd>
				<td  colspan=" 2">时间戳td>
				<td>xxxtd>
			tr>
			
			
		table>
		<hr>
		<p>票据打印时间p>
		<p>操作员:xxp>
	
	body>
html>

处理现象:
HTML(表结构,关联三个小练习)_第2张图片

练习1.用表结构,构造出下图的诗句。(图片小编想弄一个更好的)
HTML(表结构,关联三个小练习)_第3张图片


<html>
	<head>
		
		<meta challenge="utf-8">
		<title>将进酒title>
		
	head>
	<body>
		<h1>君不见<small>黄河之水天上来small>h1>
		<table   >
		
			<tr> 
				<td>
					<img src="C:\Users\Lenovo\Pictures\Saved Pictures\picture\李白.jpg" alt=""  style="height:400px;">
					
					
				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>

HTML(表结构,关联三个小练习)_第4张图片
练习3:用表结构,构造出下图的网址。(图片原因,所以说小编简单化了)
HTML(表结构,关联三个小练习)_第5张图片


<html>
	<head>
		
		<meta challenge="utf-8">
		<title>电影title>
		
	head>
	<body>
	<table border="1" cellpadding="0" cellspacing="0" width="1000">
		
		<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>xxtd>
			<td>xxtd>
			<td>xxtd>
			<td>xxtd>
		
		
		tr>
		table>
	body>
<html>

HTML(表结构,关联三个小练习)_第6张图片4.关联图片与瞄点(代码优化)
优化一


<html>
	<head>
		
		<meta challenge="utf-8">
	head>
	<body>
		
		<a href="E:\jhj\练习2.html">作业2a>
		<a href="E:\jhj\练习3.HTML">作业3a>
		
		<h1>工商电子银行汇款单h1>
		
		<table border="1" cellpadding="0" cellspacing="0" width="1000">
		
			<tr>
				<td colspan="2">回单类型td>
				<td><small>网上转账货款small>td>
				<td  colspan="2">指令序号td>
				<td><small>xxxxxxxxxsmall>td>
			tr>
			<tr>
				
				<td rowspan="6" width="10"><strong>收款人strong>td>
				
					<td>户名td>
					<td>xxtd>
				<td rowspan="6" width="10"><strong>收款人strong>td>
				
					<td>户名td>
					<td>xxtd>
				
			tr>
			<tr>
				<td>卡号td>
				<td>xxxtd>
				<td>卡号td>
				<td>xxxtd>
			tr>
			<tr>
				<td>地区td>
				<td>xxxtd>
				<td>地区td>
				<td>xxxtd>
			tr>
			<tr>
				<td>网点td>
				<td>xxxtd>
				<td>网点td>
				<td>xxxtd>
			tr>
			<tr>
				<td>币种td>
				<td>xxxtd>
				<td>钞标记td>
				<td>xxxtd>
			tr>
			<tr>
				<td>金额td>
				<td>xxxtd>
				<td>手续费td>
				<td>xxxtd>
			tr>
			<tr>
				<td colspan="2" >合计td>
				<td colspan="4">xxxtd>
				
				
			tr>
			<tr>
				<td colspan="2">交易时间td>
				<td>xxxtd>
				<td  colspan=" 2">时间戳td>
				<td>xxxtd>
			tr>
			
			
		table>
		<hr>
		<p>票据打印时间p>
		<p>操作员:xxp>
	
	body>
html>

优化 练习二(因为只有二有一点长,所有只在这个练习上进行了瞄点)


<html>
	<head>
		
		<meta challenge="utf-8">
		<title>将进酒title>
		
	head>
	<body>
	<div>
		<div id=one>div>
		<a href="E:\jhj\练习3.HTML">作业3a>
		<a href="E:\jhj\练习1.HTML">作业1a>
		<a href="#mw">返回底部a>
		
			<h1>君不见<small>黄河之水天上来small>h1>
			<table   >
			
				<tr> 
					<td>
						<img src="C:\Users\Lenovo\Pictures\Saved Pictures\picture\李白.jpg" alt=""  style="height:400px;">
						
						
					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>

优化 练习三


<html>
	<head>
		
		<meta challenge="utf-8">
		<title>电影title>
		
	head>
	<body>
	<a href="E:\jhj\练习1.HTML">作业1a>
	<a href="E:\jhj\练习2.HTML">作业2a>
	
	<table border="1" cellpadding="0" cellspacing="0" width="1000">
		
		<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>xxtd>
			<td>xxtd>
			<td>xxtd>
			<td>xxtd>
		
		
		tr>
		table>
	body>
<html>

现象:(如果对现象感兴趣的可以看看小编分享视频了解了解)
HTML(表结构,关联三个小练习)_第7张图片

链接:https://pan.baidu.com/s/1fKiMiQTkIuRsdV021pUJUQ 
提取码:hdy7 
复制这段内容后打开百度网盘手机App,操作更方便哦

你可能感兴趣的:(HTML,html)