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>