html超链接


<a>

行内元素,①跳转到指定页面、②跳转到指定文件(也可触发下载)、③跳转到锚点位置、④唤起指定应用

常用属性:

  • href:指定要跳转到的具体目标
  • target:控制跳转时如何打开页面,常用值如下:
    • _self:在本窗口打开(默认)
    • _blank:在新窗口打开
  • id:元素的唯一标识,可用于设置锚点
  • name:元素的名字,写在a标签中,也能设置锚点

跳转到页面

<!-- 跳转其他网页 -->
<a href="https://www.baidu.com" target="_blank">去百度</a>

<!-- 跳转本地网页 -->
<a href="./标签.html" target="_blank">去看标签</a>

跳转到文件

<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>

<!-- 浏览器不能打开的文件,会自动触发下载 -->
<a href="./resource/资源.zip">资源</a>

<!-- 强制触发下载 -->
<a href="./resource/电影.mp4" download="文件名.mp4">下载电影</a>

跳转到锚点

注意:具有 href 属性的 a 标签是超链接,具有 name 属性的 a 标签是锚点

设置锚点

<!-- 第一种方式:a标签配合name属性 -->
<a name="test1"></a>
<h1>我是第一个位置</h1>

<!-- 第二种方式:其他标签配合id属性 -->
<h1 id="test2">我是第二个位置</h1>

跳转锚点

<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>

<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>

<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>

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

<!-- 执行一段js -->
<a href="javascript:alert(1);">点我弹窗</a>

唤起指定应用

<!-- 唤起设备拨号 -->
<a href="tel:110">电话联系</a>

<!-- 唤起设备发送邮件 -->
<a href="mailto:1303094180@qq.com">邮件联系</a>

<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

文章作者: FW
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 FW !
评论
  目录