当前位置: 首页 > news >正文

HTML5-2-链接

HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

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

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

语法

<a href="url">链接文本</a>

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

示例:

<a href="https://www.baidu.com/">访问百度首页</a>

访问百度首页

属性

href

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

target

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

id

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

title

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

链接分类

外链接

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

内链接

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

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

空链接

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

<a href="#">空链接</a>

下载链接

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

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

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

<a href="下载地址" download="名字"></a>

各种网页元素链接

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

<a href="test.png"><img src="test.png"></a>

锚点链接

锚链接可以链接到本页面的特定位置,也可以链接到另一个页面的特定位置。其实现方式是添加锚标记。即:
<a href=“#名字”>跳转</a>,"#"必不可少。
<标签名 id=“与刚才的名字一致”></标签名>
关于“#标记名”,它其实是页面中某一个标签的id属性值。也就是说,如果要跳转到网页的某个位置,就先在这个位置所在的标签设置id属性,然后就可以通过锚链接跳转到这个位置了。

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

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

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

<a href="http://www.baidu.com#标记名">跳转到另一个页面的标记处</a>
http://www.lryc.cn/news/147344.html

相关文章:

  • Java--常用jar命令
  • 微服务中间件--多级缓存
  • clickhouse系列3:clickhouse分析英国房产价格数据
  • 2023京东口腔护理赛道行业数据分析(京东销售数据分析)
  • 安服面试 --- 01
  • ExpressLRS开源之RC链路性能测试
  • el-form表单el-form-item prop一次验证两个值
  • HTTP 代理原理及 Python 简单实现
  • 数据结构--队列与循环队列
  • 八路参考文献:[八一新书]许少辉.乡村振兴战略下传统村落文化旅游设计[M]北京:中国建筑工业出版社,2022.
  • 版本控制 Git工具的使用
  • GNS3 在 Linux 上的安装指南
  • Mybatis中 list.size() = 1 但显示 All elements are null
  • Soul的社交元宇宙之路,还有多远?
  • 如何解决Memcached缓存击穿和雪崩问题
  • uniapp 开发之仿抖音,上下滑动切换视频、点击小爱心效果
  • 【C++设计模式】依赖倒转原则
  • 浙江首例!金华银行基于完全国产自研数据库构建新一代核心系统
  • ASP.NET Core 中的 静态文件
  • 2023年天府杯——C 题:码头停靠问题
  • 集丰照明|汽车美容店设计,装修色彩灯光搭配方法
  • 性能提升3-4倍!贝壳基于Flink + OceanBase的实时维表服务
  • 取数组中每个元素的最高位
  • Docker一键部署Nacos
  • 【数学建模】-- 模糊综合评价
  • Java 数据库改了一个字段, 前端传值后端接收为null问题解决
  • lnmp架构-mysql1
  • Threadlocal在项目中的应用
  • 个性化定制你的AI助手,AI指令提示词专家
  • mongodb聚合排序的一个巨坑