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

一时失言乱红尘 2021-11-09 11:18 1184阅读 0赞

## 超链接的介绍 ##

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

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

## a标签 ##

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

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

### a标签的重要属性 ###

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

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

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

**title**

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

**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 enctype="multipart/form-data" method="post" action="index2.html">
    			<div>
    				
    				<label for="name">姓名:</label>
    				<input id="name" name="name" type="text" value="蔡徐坤" maxlength="6"/>
    			</div>
    			<div>
    				
    				<label for="pwd">密码:</label>
    				<input id="pwd" name="pwd" type="password" value="7112" maxlength="13"/>
    			</div>
    			<div>
    				
    				<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 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>
    				
    				<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>
    				<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>

## 测试： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70]: /images/20211109/51be899395c943a29fe95fdb015d0cf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 1]: /images/20211109/0de1d46e946c48679a7cfc7d6763308e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 2]: /images/20211109/38d471c2d5a44a47b10b7aa694f71967.png