Web基础 HTML标签 六种超链接标签的使用方式

847 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,点击查看活动详情

超链接标签(重点)

1、链接的语法格式:

<a href="跳转目标链接" target="目标窗口的弹出方式"> 文本或图像 </a>

标签里的a是单词anchor的的缩写,意为:锚。

两个属性的作用如下:

属性

作用

href

用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能

target

用于指定链接页面的打开方式和,其中_self(当前页面打开)为默认值,_blank为在新窗口中打开方式。

**href:**要打开的链接

**target:**打开窗口的方式。 默认值是_self 当前窗口打开页面,_blank新建窗口打开页面。

将属性写在开始标签里面,例:<a 各类属性 >

将表述链接的文字放在开始标签和结束标签中间,例: 描述

链接分类:

1、外部链接:例如 百度

外部链接的href属性要以:http:// 开头

**2、内部链接:**网站内部页面之间的相互链接,直接链接内部页面名称即可。

内部链接的href属性不需要以:http:// 开头

**3、空链接:**如果当没有确定链接目标时,即可使用空链接, 首页

**4、下载链接:**如果href里面地址是一个文件或压缩包,会下载这个文件。

**5、网页元素链接:**在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。

**6、锚点链接:**点击设定的链接,可以快速的定位到页面中的某个位置

外部链接:

<!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>

<>

<h4>以下标签为超链接标签</h4>

<a href="http://juejin.com" target="_self" > CSDN官网

哔哩哔哩官网

 这就是超链接标签,href是标签必须要写的属性,写了这个属性才是超链接标签。

内部链接:

例如:

<a href="index.html"> 首页 </a>

直接href="html文件名即可",内部链接就是访问自己创建的html文件,用于文件夹中的html文件相互跳转

相同目录的html文件直接输入文件名即可,不同目录的即输入相对地址即可

空链接:

<a href="#"> 首页 </a>

空链接就是用 # 代替链接的位置,可以把 # 当成占位符。
在开发时,没有想好放什么链接时,就用 # 代替链接,这样代码就不会报错

有些地址没有考虑好去往哪个页面,可以先用 # 代替,等想好了使用哪个页面之后再用链接替换 #

下载链接:

链接地址一般是 文件.exe 或者是 zip 等压缩包形式

下载链接如果是这种格式就不会跳转页面,而是直接下载

​​

<a href="../图片存放/派大星 .zip">下载链接</a>

​编辑

​编辑

网页元素链接:

网页元素超链接就是用这些元素代替描述的文字,点击这些图像,音频,视频,都可以前往其他链接页面。

<a href="各种链接"> 各种元素 </a>

网页元素链接就是把元素放入<a> </a>里,让这个元素有超链接的属性
比如放置一个图片,就可以让这个图片有超链接的属性
点击图片,就可以前往另一个链接。

​编辑

​编辑

将这个图片赋予了超链接属性,点击这个图片就会前往CSDN官网。

锚点链接:

1、在链接文本的href属性中,设置属性值为 #名字 的形式,如: 第二集

2、找到目标位置标签,里面添加一个属性 id=刚才的名字,如:

第二集介绍

​编辑

点击那些蓝色的文字,即可跳转到文章的相应位置,这就是锚点链接的主要功能。

​编辑

​编辑

文章很长时,建议使用锚点标签,方便阅读,可以快速跳到文章的指定位置。

若要快速返回文章顶部,则可以在末尾加一个返回顶部的锚点链接,在文章顶部的开头标签设置一个id="",这样就可以跳转到文章顶部了。

将文章的开头标签设置id:
<h4 id="kaitou"> 文章开头 </h4>

在文章的某个位置设置能快速跳转到开头的标签:
<a href="#kaitou"> 跳到文章顶部 </a>

这样就能快速的回到文章顶部。

以上就是超链接的六种使用方式。