HTML||从一个页面跳转至另一个html页面的子页面（超链接）

超链接的介绍

超链接在本质上属于网页一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。

所谓超链接是指从一个网页指向一个目标连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接文字或图片后，链接目标将显示在浏览器上，并且根据目标类型来打开或运行。

a标签

向网页中添加a标签是实现超链接的重要方式，但不是唯一方式

<a href="content.html" target="top">第一节</a>

以上代码实现了一个超链接，指向另一个HTML网页。点击后可以访问连接指向的网页。

a标签的重要属性

在超链接中最主要的属性有三个，分别是：href、title、target。其他一些属性会在后面陆续出现。

href
href属性用于指向一个目标，该属性是a标签必不可少的，少了它超链接将不能跳转。href属性的值是一个链接，也就是网页或资源的地址。

链接可以是一个完整的地址，也可以是相对路径。对于外部连接通常使用完整的链接，链接必须包含所使用的协议（HTTP，HTTPS等），否则将是一个无效链接。

title

title属性可以为超链接设置一些介绍信息。当鼠标移到设置了title属性的超链接上时，会显示title属性值的内容。

<a href="content.html" title="进入目录" target="top">第一节</a>

target

target属性用于控制链接网页打开的位置（相对于当前网页）。默认情况下，是刷新当前网页所在的窗口，加载新的页面。

实例分析：

创建一个index类，用于展示left和right连接内的内容

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table><tr><td><iframe name="left" src="left.html"></iframe></td><td><iframe name="right" src="right.html"></iframe></td></tr></table></body>
</html>

接下来，在left和right类里创建超链接，连接content类

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a href="content.html" title="进入目录" target="top">鸡你太美</a><a href="right.html" title="进入目录" target="right">蔡徐坤</a></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a href="content.html" target="content">蔡徐坤</a></body>
</html>

剩下最后的展示类了，我们要展示content.html的内容，具体的内容可以自行设定，这里我弄了一个超链接展示其他页面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>content<a href="index3.html">练习生</a></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--表单一定要以表单域<form></form>开始和结束也就是写表单一般一定要有表单域除非你不想提交表单--><form enctype="multipart/form-data" method="post" action="index2.html"><div><!--<label><input>标签--><label for="name">姓名:</label><input id="name" name="name" type="text" value="蔡徐坤" maxlength="6"/></div><div><!--<label><input>标签--><label for="pwd">密码:</label><input id="pwd" name="pwd" type="password" value="7112" maxlength="13"/></div><div><!--<label><input>标签--><label for="sex">性别:</label><input id="sex" name="sex" type="radio" value="男" />男<input id="sex" name="sex" type="radio" value="女" checked="true" />女</div><div><!--<label><input>标签--><label for="fav">喜欢:</label><input id="fav" name="fav" type="checkbox" value="男" checked="true"/>唱<input id="fav" name="fav" type="checkbox" value="女" checked="true"/>跳<input id="fav" name="fav" type="checkbox" value="男" checked="true"/>rap<input id="fav" name="fav" type="checkbox" value="男" checked="true"/>篮球</div><div><!--如果要上传文件，使用type=“file”的属性值，但是普通表单只能上传字符数据如果要上传文件，必须在<form></form>里面添加enctype="multipart/form-data"--><label for="photo">上传:</label><input id="photo" name="photo" type="file" /></div><div><label for="color">颜色:</label><input id="color" name="color" type="color" /></div><div><label for="date">日期:</label><input id="date" name="date" type="date" /></div><!--<div><label for="date">文章:</label><textarea id="article" name="article" rows="3" contenteditable="40"></textarea></div>--><div><label for="date">年份:</label><select id="year" name="year"><option>1998</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option><option>1996</option></select><label for="date">多选年份:</label><select id="year" name="year"><option>1998</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option><option>1996</option><option selected="true">2019</option></select></div><div><input id="imag" name="imag" type="image" src="img/3.jpg"/><input id="imag" name="imag" type="image" src="img/3.jpg"/><input id="imag" name="imag" type="image" src="img/3.jpg"/></div><div><input id="imag" name="imag" type="image" src="img/3.jpg"/><input id="imag" name="imag" type="image" src="img/3.jpg"/><input id="imag" name="imag" type="image" src="img/3.jpg"/></div><div><input id="submit" name="submit" type="submit" /><input id="reset" name="reset" type="reset" /></div></form></body></html>

测试：