李佳
学号19011210599
转载至本文链接：https://blog.csdn.net/JockLiu/article/details/98247346,版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议。
【嵌牛导读】本文介绍了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>
测试：
————————————————
版权声明：本文为CSDN博主「Jock.Liu」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/JockLiu/article/details/98247346
网友评论