Html中的超链接

我们有时在浏览网页的时候会发现很多的超链接设置，那么今天就带大家学习一下。例如以下图：

基础知识

超级链概念：

实现由当前文档到目标文档的一种跳转。

链接语法：

_blank:在新窗体中打开

_self:在自身窗体中打开(默认值)

_parent：在上一级窗体中打开

_top：在本窗体中打开。

上图源码：

<span style="font-size:18px;"><html>
 <head>
<title>标题</title>
<body>
<h1 align="center">网页结构</h1>     
<hr>
<a href="http://www.baidu.com/" target="_blank">百  度</a>   <!--百度加入超链接-->
<a href="http://www.sina.com.cn/" target="_blank">新 浪</a>       <!--新浪加入超链接-->
<a href="http://www.sohu.com/ target="_blank">搜狐</a>
<a href="http://www.qq.com/" target="_blank">腾讯</a>
</body>
</head>
</html>
</span>

链接类型

内部链接：

当前文档与目标文档在同一网站内

<a href=目标文档位置及全称>
外部链接：

当前文档与目标文档不在同一网站内

<a href=URL(网址)>
E-mail链接

同意訪问者向指定的地址发送邮件

4.局部连接（锚点）-------与word中的标题效果同样

跳转到同一网页或其它文档中的指定位置。

效果例如以下图：

流程：

创建锚点：

<a name=”锚点名称”>显示内容</a>
链接锚点：

<a href=”#锚点名称”>显示内容</a>

源代码

<span style="font-size:18px;"><html>
 <head>
<title>锚点设置</title>      <!--网页标题-->
<body>
<ol>
<li><a href="#基本介绍">基本介绍</a></li>   <!--採用项目列表的形式来实现-->
<li><a href="#结构">结构</a></li>           <!--链接锚点-->
<ol>
<li>第一部分</li>
<li>第二部分</li>
</ol>
<li>分类</li>
<li>大写和小写</li>
</ol>



 1.基本介绍<a name="基本结构"></a>   <!--创建锚点-->
    在因特网的历史上。统一资源定位符（URL）的发明是一个非常基础的步骤。
统一资源定位符的语法是一般的，可扩展的，它使用ASCII代码的一部分来表示互联网的地址。
一般统一资源定位符的開始标志着一个计算机网络所使用的网络协议。

</span>

<span style="font-size:18px;"><!--为了实现语气的效果，增加了非常多空段落-->
<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><p> </p><p> </p><p> </p>
2.结构<a name="结构"></a>  <!--创建锚点-->
   基本URL包括模式（或称协议）、server名称（或IP地址）、路径和文件名称。如“协议://授权/路径?查询”。
完整的、带有授权部分的普通统一资源标志符语法看上去例如以下：协议://username:password@子域名.域名.顶级域名:port号/文件夹/文件名称.文件后缀?參数=值#标志
</body>
</head>
</html></span>

5.空链接

就是没有目标端点的链接。

格式：

<a href=”#”>显示内容</a>

经常使用操作就是设为首页和加入收藏夹，这就是空链接的一般操作。

源码

<html>
 <head>
<title>超链接演示</title>      <!--网页标题-->
<body>
<table width="800" cellpadding="5" align="center">
<tr>
<td>首页</td>
<td>
<!--设为首页操作-->
<a href="#"
 onclick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.sohu.com')">设为首页</a>
</td>
<td>
<!--加入收藏夹-->
<a href="javascript:void(0)" onClick="addFavorite('http://www.sohu.com','搜狐');">加入收藏</a>
</td>
</tr>
</table>
</body>
</head>
</html>

6.脚本链接

是一种特殊的链接。当单机设置脚本链接的文本或图像时，能够执行对应的JavaScript语句

经常使用到的脚本链接：

打开窗体：javascript:window.open(‘文件名称’)

关闭窗体：javascript:window.close()

小结：

以上就是html超链接中经常使用到的操作。简单的一句话就是：为所定义的文本赋予地址链接。