HTML HTML基础(3)

1.超链接

主要作用:从当前页面跳转。

可以实现:①跳转到指定页面、②跳转到指定文件(也可以触发下载)、③跳转到锚点位置、④唤起指定应用。

|---------|----------|---------------------------------------------------------------------------------------------------------------------|------------|
| 标签名 | 标签语义 | 常用属性 | 单/双 标签 |
| a | 超链接 | href:指定要跳转到的具体位置 target:控制跳转时如何打开页面,常用值如下: _self:在本窗口打开 _blank:在新窗口打开 id:元素的唯一标识,可用于设置锚点 name:元素的名字,写在 a 标签中,也能设置锚点 | 双 |

(1).跳转到页面

<!-- 跳转到其他页面 --!>

<a href="https://www.jd.com/" target="_blank" > 去京东 </a>

<!-- 跳转到本地页面 --!>

<a href="./xxxx" target="_self"> 去本地 </a>

注意:

(1.代码中的多个空格、多个回车,都会被浏览器解析成一个空格!

(2.虽然 a 是行内元素,但 a 元素可以包裹除它自身外的任何元素!

(2).跳转到文件

<!-- 浏览器能直接打开的文件 -->

<a href="./resource/自拍.jpg">看自拍</a>

<a href="./resource/小电影.mp4">看小电影</a>

<a href="./resource/奥特曼.gif">看奥特曼</a>

<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>

<!-- 浏览器不能打开的文件,会自动触发下载 -->

<a href="./resource/内部资源.zip">内部资源</a>

<!-- 强制触发下载 -->

<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>

注意:

(1.若浏览器无法打开文件,则会引导用户下载。

(2.若想强制触发下载,请使用 download 属性,属性值即为下载文件的名称。

(3)跳转到锚点

什么是锚点?--网页中的一个标记点。

具体使用方式:

(1.第一步:设置锚点

<!-- 第一种方式:a标签配合name属性 -->

<a name="test1"></a>

<!-- 第二种方式:其他标签配合id属性 -->

<h2 id="test2">我是一个位置</h2>

注意:

①具有 href 属性的 a 标签是超链接,具有 name 属性的 a 标签是锚点。

②name 和 id 都是区分大小写的,且 id 最好别是数字开头。

(2.第二部:跳转锚点

<!-- 跳转到test1锚点-->

<a href="#test1">去test1锚点</a>

<!-- 跳到本页面顶部 -->

<a href="#">回到顶部</a>

<!-- 跳转到其他页面锚点 -->

<a href="demo.html#test1">去demo.html页面的test1锚点</a>

<!-- 刷新本页面 -->

<a href="">刷新本页面</a>

<!-- 执行一段js,如果还不知道执行什么,可以留空,javascript:; -->

<a href="javascript:alert(1);">点我弹窗</a>

(4).唤起指定应用

通过 a 标签,可以唤起设备应用程序。

<!-- 唤起设备拨号 -->

<a href="tel:10010">电话联系</a>

<!-- 唤起设备发送邮件 -->

<a href="mailto:10010@qq.com">邮件联系</a>

<!-- 唤起设备发送短信 -->

<a href="sms:10086">短信联系</a>

相关推荐
米花丶7 小时前
JSBridge安全通信:iOS/Android桥对象差异与最佳实践
前端·webview
萌萌哒草头将军7 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。7 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
龙傲天6667 小时前
Scala的面向对象和函数式编程特性 Idea环境搭建和输入输出
前端
蓝色海岛7 小时前
element-ui表格嵌套表格,鼠标移入时样式错乱-问题调研及处理办法
前端
薄雾晚晴8 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
恋猫de小郭8 小时前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
kymjs张涛8 小时前
零一开源|前沿技术周刊 #15
前端·javascript·面试
reacx8 小时前
# 第三章:状态管理架构设计 - 从 Zustand 到 React Query 的完整实践
前端