Html中的超链接

最新推荐文章于 2022-04-09 10:43:09 发布

LuckyZhouStar

最新推荐文章于 2022-04-09 10:43:09 发布

阅读量3.7k

点赞数 2

本文链接：https://blog.csdn.net/luckyzhoustar/article/details/35569303

版权

网页设计专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

基础知识

超级链概念：

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

链接语法：

_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包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名，如“协议://授权/路径?查询”。完整的、带有授权部分的普通统一资源标志符语法看上去如下：协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志
</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="#"
 οnclick="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超链接中常用到的操作，简单的一句话就是：为所定义的文本赋予地址链接。

LuckyZhouStar

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
9
评论
Html中的超链接

我们有时在浏览网页的时候会发现许多的超链接设置，那么今天就带大家学习一下。如下图：基础知识超级链概念：实现由当前文档到目标文档的一种跳转。链接语法：链接目标” target=”打开链接窗口的形式”>显示内容 _blank
复制链接

扫一扫

专栏目录