谭谭心怎么建设网站,python菜鸟教程,建湖人才网最新招聘信息查询,做搜索引擎的网站有哪些在前端开发中#xff0c;a 标签是最常用的跳转元素。看似简单#xff0c;实际上包含了新窗口打开、锚点定位、文件下载、唤起电话/邮箱等多种实用用法。本篇笔记将一次性讲清 a 标签的所有跳转方式#xff0c;新手也能直接复制使用#xff01;一、最基础#xff1a;普通页…在前端开发中a 标签是最常用的跳转元素。看似简单实际上包含了新窗口打开、锚点定位、文件下载、唤起电话/邮箱等多种实用用法。本篇笔记将一次性讲清 a 标签的所有跳转方式新手也能直接复制使用一、最基础普通页面跳转1. 跳转到外部网址a hrefhttps://www.baidu.com访问百度/a默认在当前页面打开覆盖原有页面。2. 跳转到网站内部页面!-- 同目录页面 -- a hrefabout.html关于我们/a !-- 子目录页面 -- a hrefpages/contact.html联系我们/a二、控制打开方式target属性target 是开发中最常用的属性决定链接在哪里打开属性值作用_self默认当前窗口打开覆盖本页_blank新标签页打开最常用_parent在父框架打开_top在整个窗口打开跳出框架示例新标签页打开链接a hrefhttps://www.baidu.com target_blank新标签页打开/a三、页面内跳转锚点定位适用于长页面、文章目录、回到顶部等场景。1. 定义锚点目标div idsection1我是第一部分内容/div2. 跳转到锚点a href#section1跳转到第一部分/a3. 跳转到其他页面的锚点a hrefabout.html#contact跳转到关于页的联系板块/a四、特殊协议跳转唤起电话、邮箱、短信移动端非常实用无需额外 JS直接用 a 标签实现。唤起邮箱a hrefmailto:testexample.com?subject咨询body你好发送邮件/a唤起拨号手机专用a hreftel:10086拨打10086/a唤起短信a hrefsms:10086?body查询余额发送短信/a五、文件下载download 属性让浏览器直接下载文件而不是打开预览。!-- 普通下载 -- a hreffile.zip下载文件/a !-- 自定义文件名 -- a hreffile.zip download资料包.zip点击下载/a六、不跳转只执行点击事件有时只需要按钮样式不需要实际跳转a hrefjavascript:void(0) onclickalert(点击成功)点击弹窗/a更推荐的写法a href# onclickdoSomething(); return false;点击操作/a七、一张图总结a标签用法href跳转目标网址、路径、#id、tel、mailto 等target打开方式_blank 最常用download文件下载锚点#id 页面内跳转协议跳转tel、mailto、sms 移动端神器文末小总结a 标签不仅仅是“点一下跳转”用好它可以实现页面跳转新窗口打开锚点定位文件下载唤起电话/邮箱JS 交互前端日常开发 90% 的跳转需求这一篇就够了