案例:超链接的功能

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>
相关推荐
Want59513 小时前
HTML音乐圣诞树
前端·html
我命由我1234516 小时前
微信开发者工具 - 模拟器分离窗口与关闭分离窗口
前端·javascript·学习·微信小程序·前端框架·html·js
我有一棵树17 小时前
file 协议与 http 协议的区别:为什么本地 HTML 无法加载相对路径 JS,以及正确的解决方式
javascript·http·html
华仔啊21 小时前
图片标签用 img 还是 picture?很多人彻底弄混了!
前端·html
合作小小程序员小小店21 小时前
网页开发,在线%新版本旅游管理%系统,基于eclipse,html,css,jquery,servlet,jsp,mysql数据库
java·数据库·eclipse·html·intellij-idea·旅游·jsp
风止何安啊21 小时前
收到字节的短信:Trae SOLO上线了?尝尝鲜,浅浅做个音乐播放器
前端·html·trae
今日无bug1 天前
🥁 用 HTML5 打造你的第一个“敲击乐” Web 应用
html
李@十一₂⁰1 天前
HTML 特殊字体符号
前端·html
小小测试开发2 天前
JMeter XPath2 Extractor用法全解析:精准提取XML/HTML响应数据
xml·jmeter·html
不会玩电脑的Xin.2 天前
HTML + CSS
前端·css·html