案例:超链接的功能

html 复制代码
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>超链接的功能</title>
</head>

<body>
    <h3>跳转页面</h3>
    <a href="http://www.baidu.com">在当前页面打开百度网站</a>
    &nbsp;&nbsp;&nbsp;
    <a href="http://www.baidu.com" target="_blank">在新页面打开百度网站</a>
    &nbsp;&nbsp;&nbsp;
    <a href="../html/文本标签.html">跳转到内部文件的页面</a>

    <h3>跳转文件</h3>
    <h5>1、浏览器可以直接打开的文件 </h5>
    <a href="../img/1.png">打开图片1</a>
    &nbsp;&nbsp;&nbsp;
    <a href="../resource/小电影.mp4">打开小电影</a>
    &nbsp;&nbsp;&nbsp;
    <a href="../resource/小动画.gif">打开小动画</a>
    &nbsp;&nbsp;&nbsp;
    <a href="../resource/十万个为什么.pdf">打开 "十万个为什么"</a>
    &nbsp;&nbsp;&nbsp;

    <h5>2、浏览器不可以直接打开的文件,会自动触发下载</h5>
    <a href="../resource/资料.zip">跳转到压缩文件:资料</a>
    &nbsp;&nbsp;&nbsp;

    <h5>3、强制触发下载</h5> 
    <a href="../resource/小电影.mp4" download="小电影.mp4">下载小电影</a>
    &nbsp;&nbsp;&nbsp;

    <h3>跳转锚点</h3>  
    <a href="#p3">跳转第3段</a>
    &nbsp;&nbsp;&nbsp;
    <a href="">刷新本页面</a>
    &nbsp;&nbsp;&nbsp;
    <a href="javascript:;">执行空js代码的超链接</a>
    &nbsp;&nbsp;&nbsp;
    <a href="./文本标签.html#content">跳转到文本标签页面的code</a>

    <h3>唤起指定应用(适用于手机)</h3> 
    <a href="tel:10010">电话联系10010</a>&nbsp;&nbsp;&nbsp;
    <a href="mailto:1234567@qq.com">邮件联系</a>&nbsp;&nbsp;&nbsp;
    <a href="sms:10086">短信联系</a>


    <h2>《小马过河》</h2>
    <p>马棚里住着一匹老马和一匹小马。</p>
    <p>有一天,老马对小马说:"你已经长大了,能帮妈妈做点事吗?"小马连蹦带跳地说:"怎么不能?我很愿意帮您做事。"老马高兴地说:"那好啊,你把这半口袋麦子驮到磨坊去吧。"</p>
    <p id="p3">
        小马驮起口袋,飞快地往磨坊跑去。跑着跑着,一条小河挡住了去路,河水哗哗地流着。小马为难了,心想:我能不能过去呢?如果妈妈在身边,问问她该怎么办,那多好啊!可是他离家已经很远了。
    </p>
    <p>...</p>
    <p id="final">
        小马跑到河边,刚刚抬起前蹄,松鼠又大叫起来:"怎么?你不要命啦!"小马说:"让我试试吧!"他下了河,小心地蹚到了对岸。原来河水既不像老牛说的那样浅,也不像松鼠说的那样深。
    </p>
    <hr>
    <a href="#">回到顶部</a>
    &nbsp;&nbsp;&nbsp;
    <a href="#final">回到尾页</a>
</body>

</html>
相关推荐
小*-^-*九6 小时前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
hashiqimiya13 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
BillKu16 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
BUG创建者1 天前
html获取16个随机颜色并不重复
css·html·css3
DevilSeagull1 天前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
面向星辰1 天前
html中css的四种定位方式
前端·css·html
IT利刃出鞘1 天前
HTML--最简的二级菜单页面
前端·html
yume_sibai1 天前
HTML HTML基础(4)
前端·html
面向星辰1 天前
html音视频和超链接标签,颜色标签
前端·html·音视频
信看1 天前
实用 html 小工具
前端·css·html