HTML5-2-链接

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时,链接显示为红色并带有下划线。

语法

html 复制代码
<a href="url">链接文本</a>

href 属性描述了链接的目标。

示例:

html 复制代码
<a href="https://www.baidu.com/">访问百度首页</a>

访问百度首页

属性

href

href属性是超链接标签必须存在的属性,href用于连接目标的URL地址。

target

target 属性可以定义被链接的文档在何处显示。其中_self是默认值,即在当前窗口打开连接的打卡方式,_blank为在新窗口的打开方式,_parent 表示在父窗口打开超链接,_top 表示在顶层窗口打开超链接。

id

id 属性可用于创建一个 HTML 文档书签。

title

title为超链接设置一些介绍信息。当鼠标移到设置了title属性的超链接上时,会显示title属性值的内容。

链接分类

外链接

html 复制代码
<a href="https://www.baidu.com/">百度</a>

内链接

网站内部页面之间的相互跳转。内部连接直接连接内部页面名称。且通常使用相对路径。

html 复制代码
<a href="02-code.html">内部链接</a>

空链接

超链接要求必须存在href,所以写超链接时,规定href属性为"#",不能空白。

html 复制代码
<a href="#">空链接</a>

下载链接

当在同一目录时,通过点击超链接可以直接下载文件,地址链接的文件.exe,或者zip等压缩包,href属性值赋予地址即可。

html 复制代码
<a href="文件地址">点击超链接下载文件或压缩包</a>

浏览器可以直接打开图片或.txt文档,如果我们希望浏览器不打开直接下载,则可以通过download属性来实现这一功能。

html 复制代码
<a href="下载地址" download="名字"></a>

各种网页元素链接

网页中的各种元素也可添加链接,如文本,图片,表格,音频,视频等可添加超链接。

html 复制代码
<a href="test.png"><img src="test.png"></a>

锚点链接

锚链接可以链接到本页面的特定位置,也可以链接到另一个页面的特定位置。其实现方式是添加锚标记。即:

<a href="#名字">跳转</a>,"#"必不可少。

<标签名 id="与刚才的名字一致"></标签名>

关于"#标记名",它其实是页面中某一个标签的id属性值。也就是说,如果要跳转到网页的某个位置,就先在这个位置所在的标签设置id属性,然后就可以通过锚链接跳转到这个位置了。

当跳转到当前页面的特定位置时,直接将锚标记设为href属性的值。如:

html 复制代码
<a href="#top">跳转到本页面的id标记处</a><br/>
<h3 id="top">标记处</h3>

当跳转到另一个网页的特定位置时,将锚标记添加到链接地址的末尾。如:

html 复制代码
<a href="http://www.baidu.com#标记名">跳转到另一个页面的标记处</a>
相关推荐
J不A秃V头A26 分钟前
Vue3:编写一个插件(进阶)
前端·vue.js
司篂篂1 小时前
axios二次封装
前端·javascript·vue.js
姚*鸿的博客1 小时前
pinia在vue3中的使用
前端·javascript·vue.js
宇文仲竹2 小时前
edge 插件 iframe 读取
前端·edge
Kika写代码2 小时前
【基于轻量型架构的WEB开发】【章节作业】
前端·oracle·架构
哆木2 小时前
部署在线GBA游戏,并通过docker安装启动
游戏·html·gba
天下无贼!3 小时前
2024年最新版Vue3学习笔记
前端·vue.js·笔记·学习·vue
Jiaberrr3 小时前
JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)
前端·javascript·tree·树形·过滤筛选
赵啸林3 小时前
npm发布插件超级简单版
前端·npm·node.js
罔闻_spider3 小时前
爬虫----webpack
前端·爬虫·webpack