前端之路（六）—— 超链接

popping_Sun

已于 2022-01-26 18:15:37 修改

阅读量2.2k

点赞数 1

分类专栏：前端之路文章标签：前端 html javascript html5 webview

于 2022-01-26 18:14:15 首次发布

本文链接：https://blog.csdn.net/popping_Sun/article/details/122706187

版权

前端之路专栏收录该内容

12 篇文章 0 订阅

订阅专栏

超链接在日常生活中，我们经常见到，它让我们浏览网页更加直观与方便，日常开发中，超链接也必不可少。今天我们就来总结一下超链接及其用法。

什么是超链接

首先我们明确一下超链接的定义。超链接使我们的文档连接到任何其他文档，也可以链接到指定稳步。几乎所有网络内容转换为链接，当然最常见的就是网页地址。

创建一个超链接

<a href="https://www.baidu.com">百度</a>

这是一个简单的超链接，点击会跳转到百度。从上面代码不难看出超链接的标签是<a></a>，在初始HTML文章中我们提到过属性，对于超链接的属性，我们也要熟知。

href:指定连接的地址。可以是本地地址、文章锚点、网络地址。上面我们指定的就是网络地址。
target:跳转方式。用来设置打开链接的方式。

_blank:在新的页面窗口打开
_self：在当前打开，相当于覆盖了当前网页内容。（默认）
_parent:在父窗口打开（跟框架有关）
_top:在当前浏览器打开，框架消失（跟框架有关）

title:提示文字，当鼠标放到超链接使提示的文字。

知道了这些属性，我们可以把超链接丰富一下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.baidu.com" target="_blank" title="跳转到百度"></a>
  </body>
</html>

锚点链接

接下来我们来了解一下什么是锚点链接

概念：将长页面划分为多个模块，给每个模块做一个标记，点击锚点链接就能跳转到对应的模块中。注意锚点链接需要在同一页面中。
用法：href后面跟“#”就能快速回到顶部，如果是要到具体的位置，那么需要在跳转位置加上name或者id属性，然后“#”+name或id名字就行，一般a标签用name，其他的用id.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="#">顶部</a>
    <a name="mark">我用name标记锚点</a>
    <div id="mark1">我用id标记锚点</div>
    <a href="#mark">点击跳转</a>
    <a href="#mark1">点击跳转</a>
  </body>
</html>

popping_Sun

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
前端之路（六）—— 超链接

超链接在日常生活中，我们经常见到，它让我们浏览网页更加直观与方便，日常开发中，超链接也必不可少。今天我们就来总结一下超链接及其用法。什么是超链接首先我们明确一下超链接的定义。超链接使我们的文档连接到任何其他文档，也可以链接到指定稳步。几乎所有网络内容转换为链接，当然最常见的就是网页地址。创建一个超链接<a href="https://www.baidu.com">百度</a>这是一个简单的超链接，点击会跳转到百度。从上面代码不难看出超链接的标签是<a&gt
复制链接

扫一扫