html超链接标签以及锚点标签的学习

html超链接标签以及锚点标签的学习

<html>
	<head>
		<title>我的超链接网页跳转</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h3>超链接标签学习</h3>
		<hr />
		<!--a标签--超链接标签 
			属性herf:要跳转的网页资源路径  本地资源
			属性target:指明要跳转的网页资源的显示位置
					_self 在当前页面中刷新显示
					_blank 在新的标签页面中显示
					_top 在顶层页面中显示
					_parent 在父级页面中显示
					
			锚点:在当前网页内跳转
			先使用超链接标签在指定的网页位置增加锚点,格式为:
				<a name"锚点名" ></a>
			使用a标签可以跳转指定的锚点,达到网页内部资源跳转的目的,格式
				<a herf="#锚点名" >访问方式</a>
		-->
		<a href="html04.html" target="_parent">跳转到html04</a><br />
		<a href="html03.html" target="_top">跳转到html03</a><br />
		<a href="html02.html" target="_blank">跳转到html02</a><br />
		<a href="html01.html" target="_blank">跳转到html01</a><br />
		<h4>本地资源</h4>
		<a href="html04.html"><img src="img/3.gif" height="100px"/></a>
		<hr />
		<h4>网络资源</h4>
		<a href="http://www.jd.com">进入京东</a><br />
		<a href="http://www.taobao.com">进入淘宝</a>
		<hr />
		<h4>锚点的认识</h4>
		<a href="锚点的认识.html">锚点的认识</a>
	</body>
</html>

锚点标签

<html>
	<head>
		<title>锚点的认识</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h3>锚点的认识</h3>
		<hr />
		<h4>目录:</h4>
		<a href="#first">第一章</a><br />
		<a href="#second">第二章</a><br />
		<a href="#third">第三章</a><br />
		<a href="#fourth">第四章</a><br />
		<a href="#end">回到底部</a><br />
		<a href="#mid">跳转到中间</a>
		<a name="first"></a>
		<a name="top"></a>
		<p>第一章:</p>
		<p>
			我爱学习,很爱学习,学习使我快乐。
		</p>
		<p>
			我爱学习,很爱学习,学习使我快乐。
		</p>
		<p>
			我爱学习,很爱学习,学习使我快乐。
		</p>
		<p>
			我爱学习,很爱学习,学习使我快乐。
		</p>
		<p>
			我爱学习,很爱学习,学习使我快乐。
		</p>
		<p>
			我爱学习,很爱学习,学习使我快乐。
		</p>
		<p>
			我爱学习,很爱学习,学习使我快乐。
		</p>
		<p>
			我爱学习,很爱学习,学习使我快乐。
		</p>
		<p>
			我爱学习,很爱学习,学习使我快乐。
		</p>
		<p>
			我爱学习,很爱学习,学习使我快乐。
		</p>
		<p>
			我爱学习,很爱学习,学习使我快乐。
		</p>
		<a name="second"></a>
		<p>第二章:</p>
		<p>
			我发现自己真的是代码天才,非常爱学习,不怕掉头发,假装是一个完美的人。
		</p>
		<p>
			我发现自己真的是代码天才,非常爱学习,不怕掉头发,假装是一个完美的人。
		</p>
		<a name="mid"></a>
		<p>
			我发现自己真的是代码天才,非常爱学习,不怕掉头发,假装是一个完美的人。
		</p>
		<p>
			我发现自己真的是代码天才,非常爱学习,不怕掉头发,假装是一个完美的人。
		</p>
		<p>
			我发现自己真的是代码天才,非常爱学习,不怕掉头发,假装是一个完美的人。
		</p>
		<p>
			我发现自己真的是代码天才,非常爱学习,不怕掉头发,假装是一个完美的人。
		</p>
		<p>
			我发现自己真的是代码天才,非常爱学习,不怕掉头发,假装是一个完美的人。
		</p>
		<p>
			我发现自己真的是代码天才,非常爱学习,不怕掉头发,假装是一个完美的人。
		</p>
		<p>
			我发现自己真的是代码天才,非常爱学习,不怕掉头发,假装是一个完美的人。
		</p>
		<a name="third"></a>
		<p>第三章:</p>
		<p>
			等到我醒来发现自己在做梦,哈哈哈咯,是不是有点傻,真的是个完美的天才
		</p>
		<p>
			等到我醒来发现自己在做梦,哈哈哈咯,是不是有点傻,真的是个完美的天才
		</p>
		<p>
			等到我醒来发现自己在做梦,哈哈哈咯,是不是有点傻,真的是个完美的天才
		</p>
		<p>
			等到我醒来发现自己在做梦,哈哈哈咯,是不是有点傻,真的是个完美的天才
		</p>
		<p>
			等到我醒来发现自己在做梦,哈哈哈咯,是不是有点傻,真的是个完美的天才
		</p>
		<p>
			等到我醒来发现自己在做梦,哈哈哈咯,是不是有点傻,真的是个完美的天才
		</p>
		<p>
			等到我醒来发现自己在做梦,哈哈哈咯,是不是有点傻,真的是个完美的天才
		</p>
		<p>
			等到我醒来发现自己在做梦,哈哈哈咯,是不是有点傻,真的是个完美的天才
		</p>
		<p>
			等到我醒来发现自己在做梦,哈哈哈咯,是不是有点傻,真的是个完美的天才
		</p>
		<a name="fourth"></a>
		<p>第四章:</p>
		<p>
			欲知后事如何,请听下回分解.....
		</p>
		<p>
			欲知后事如何,请听下回分解.....
		</p>
		<p>
			欲知后事如何,请听下回分解.....
		</p>
		<p>
			欲知后事如何,请听下回分解.....
		</p>
		<p>
			欲知后事如何,请听下回分解.....
		</p>
		<p>
			欲知后事如何,请听下回分解.....
		</p>
		<p>
			欲知后事如何,请听下回分解.....
		</p>
		<p>
			欲知后事如何,请听下回分解.....
		</p>
		<p>
			欲知后事如何,请听下回分解.....
		</p>
		<p>
			欲知后事如何,请听下回分解.....
		</p>
		<p>
			欲知后事如何,请听下回分解.....
		</p>
		<p>
			欲知后事如何,请听下回分解.....
		</p>
		<a href="#top">回退顶部</a>
		<a name="end"></a>
	</body>
</html>
<html>
	<head>
		<title>我的表格标签认识</title>
		<meta charset="utf-8"/>
		<!--表格标签学习:
			一键生成多个表格table>tr*4>td*5 table
			table:声明一个表格
			
				tr():声明一行 设置行高也就是单元格的高度 单元格的宽度就是列宽
					th(单元格):声明一个单元格 表头格 默认居中加黑显示
					td(单元格):声明一个单元格 默认居左显示原始数据
			属性:
				border:给表格添加边框 根据数据的大小进行表格的大小显示
				width:设置宽度 
				height:设置高度
				cellpadding:设置内容距离边框的距离
				cellspacing:设置边框的大小
		-->
	</head>
	<body>
		<h3>表格标签的认识</h3>
		<hr />
		<table border="1px" width="400px" height="300px">
			<tr>
				<th>科目</th>  <!--一个单元格-->
				<th>分数</th>
				<th>级别</th>
				<th>说明</th>
			</tr>    <!--一行-->
			<tr>
				<td>java</td>
				<td>100</td>
				<td>6</td>
				<td>面向对象</td>
			</tr>
			<tr>
				<td>c语言</td>
				<td>99</td>
				<td>8</td>
				<td>面向过程</td>
			</tr>
		</table>
		
		
		<hr />
		<table border="1px">
			<tr height="50px">
				<td width="50px">科目</td>
				<td width="50px">级别</td>
				<td width="50px">分数</td>
				<td width="50px">说明</td>
			</tr>
			<tr height="50px">
				<td>高数</td>
				<td>8</td>
				<td>100</td>
				<td>简单</td>
			</tr>
			<tr height="50px">
				<td>英语</td>
				<td>8</td>
				<td>100</td>
				<td>简单</td>
			</tr>
		</table>
		
		
		<hr width="1000px" color="black"/>
		<table border="1px" cellpadding="30px" cellspacing="0px">
			<tr height="60px">
				<th width="60px">科目</th>
				<th width="60px">分数</th>
				<th width="60px">级别</th>
				<th width="60px">说明</th>
			</tr>
			<tr height="60px">
				<td align="center">语文</td>
				<td align="center">100</td>
				<td align="center">8</td>
				<td align="center">简单</td>
			</tr>
			<tr height="60px">
				<td align="center">物理</td>
				<td align="center">100</td>
				<td align="center">8</td>
				<td align="center">简单</td>
			</tr>
		</table>
				
		<h4>熟悉表格</h4>
		<hr width="1000px" color="cornflowerblue"/>
		<table border="1px" cellpadding="0px" cellspacing="0px">
			<tr height="70px">
				<th width="70px">姓名</th>
				<th width="70px">年龄</th>
				<th width="70px">爱好</th>
				<th width="70px">性别</th>
			</tr>
			<tr height="70px">
				<td align="center">余小浩</td>
				<td align="center">18</td>
				<td align="center">上网</td>
				<td align="center"></td>
			</tr>
			<tr height="70px">
				<td align="center">8</td>
				<td align="center">18</td>
				<td align="center">篮球</td>
				<td align="center"></td>
			</tr>
		</table>
				
		<h3>单元表格的合并</h3>
		<hr width="1000px" color="darkred"/>
		<table border="1px" cellspacing="0px">
			<tr height="40px">
				<td width="40px"></td>
				<td width="40px"></td>
				<td width="40px"></td>
				<td width="40px"></td>
				<td width="40px"></td>
			</tr>
			<tr height="40px">
				<td colspan="2"></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr height="40px">
				<td></td>
				<td></td>
				<td rowspan="2"></td>
				<td></td>
				<td></td>
			</tr>
			<tr height="40px">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		
		<h4>单元格的合并2</h4>
		<hr width="1000px" color="burlywood"/>
		<table border="1px" cellspacing="0px">
			<tr height="45px">
				<td width="45px" colspan=""></td>
				<td width="45px"></td>
				<td width="45px"></td>
				<td width="90px" colspan="2" rowspan="2"></td>
			</tr>
			<tr height="45px">
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr height="45px">
				<td colspan="2"></td>
				<td rowspan="2"></td>
				<td></td>
				<td></td>
			</tr>
			<tr height="45px">
				<td></td>
				<td></td>		
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值