HTML5 入门 超链接

前言

图片超链接到其他地方

参考视频：
1.黑马程序员5天软件测试从入门到精通_软件测试基础教程

1. HTML 超链接

  • 作为网页重要的组成部分超链接，实际上用的是一个标签完成的
  • 超链接的文字颜色默认是蓝的有下划线，他有一个原则性属性—链接地址href,这个属性如果不指定插连接毫无意义。
  • 知识点
    有的时候超链接在最后才知道要链接到哪个位置，所以一开始的时候会用一个假链接或者空连接地址代替，那么方法就在href的值中填写一个#号

2.新建href.html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>

    </head>
    <body>
        <!-- 如果想挑战到线上网址，必须添加http：// -->
        <a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=0&spn=0&di=26070&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3101694723%2C748884042&os=1763536506%2C877714758&simid=3371250864%2C260556217&adpicid=0&lpn=0&ln=1851&fr=&fmq=1624404912155_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fblog%2F201306%2F25%2F20130625150506_fiJ2r.jpeg%26refer%3Dhttp%3A%2F%2Fcdn.duitang.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1626996914%26t%3D9949a273b690d5bb194d1efde84f3358&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Frj5rsjAzdH3F4ks52AzdH3Fd0admlbdbAzdH3F1jpwtsAzdH3F&gsm=4&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined">
        百度招财猫图片
        </a> <br />
        <!-- 本地图片跳转 -->
        <a href="2.jpg">我想跳转到2.jpg文件</a>  <br />
        <!-- target="blank可以设置新窗口打开 -->
        <a href="img.html" target="blank">我想新窗口打开</a>
        <p>我我我</p>
        <p>我我我</p>
        <p id="haha">我我我111</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <p>我我我</p>
        <!-- 暂时不知写什么地址的时候，用### 代表空链接 -->
        <a href="###">我还不知道跳转到哪里</a> <br />
        <a href="javascript:;">我还不知道跳转到哪里javascript</a> <br />
        <a href="javascript:void(0);">我还不知道跳转到哪里javascript:void(0)</a> <br />
        <!-- 以上三种写法都可以，不用提bug,一个#号或者两个#号才提bug --> 
        <a href="#haha">我想跳转到某地方</a>
    </body>
</html>

3.页面展示

为了展示全面，截图的时候缩放了
在这里插入图片描述

4. 总结

<a href="地址"> 文字 </a>

  • 注意：如果是跳转到线上地址，必须加http:// ，本地文件直接写路径

  • 空链接写法

    • javascript:;
    • javascript:void(0);

  • 锚点链接
    点击之后可以跳转到页面对应的位置，给要跳转的位置写一个id属性，a标签中的href 属性写#id的值。

版权声明：本文为weixin_45063703原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。