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>