6.超链接标签

超链接标签也叫a标签

目录

1 外部链接

2  常用属性

2.1  打开方式 target

2.2  提示信息 title

3  内部链接

3.1  内部html文件

3.2  内部路由

4  空链接

5  文件链接

6  锚点链接

7  函数链接

7.1  空连接

7.2  点击链接后执行一个JS函数

8  与iframe的配合

---

1 外部链接

• http或https都行

效果是这样的

点击一下就会弹出我们指定的地址

除了放一个文字我们也可以放一张图片

点击这张图片同样可以进入我们指定的地址

• 不仅文字和图像可以引入链接，视频，表格，这些都可以

2  常用属性

href是连接的url地址是必填的，我们每个a标签都会用到，下面我们先说一下target 

2.1  打开方式 target

如果我们使用谷歌浏览器的话，上面的两个链接会覆盖掉原来的页面，现在我们加入target，然后给target赋值为_blank

点击后发现它不会关掉我当前的页面，而且它会弹出指定的页面

2.2  提示信息 title

我们现在搞一个使用title的链接

现在我们将鼠标放到链接上去会出现指定的提示信息

3  内部链接

3.1  内部html文件

除了放外部链接也可以放其他的html文件，比如我现在想链接 1.a_piture.html

点击之后发现跳转到了我们 1.a_picture.html 这个页面

3.2  内部路由

当然它也可以链接服务中本身的路由，这个与这讲关系不大，我单开一章 附录1.flask配合a标签链接内部路由_potato123232的博客-CSDN博客 如果有兴趣的话可以看一下

4  空链接

我们也可以放一个空链接，在href中输入#

点击完空链接后会回到页面的最上方，如果有返回顶部的功能就可以这样做

• 一般我们给href的值为javascript\:void(0)来代表空链接，使用javascript\:void(0)代表空链接，点击空标签后不会返回页面的最上方。javascript这种实际上是函数链接，我们下面会提到

5  文件链接

也可以链接一个文件，如果链接的是一个文件，浏览器要把它下载在哪

我们点击一下链接

会弹出一个另存为的对话框，我们点击保存之后就可以将其下载下来

6  锚点链接

地址栏中的#1就是锚点，当我们点击 1.简介 的时候，会页面会自动移动到响应位置，字符 1.简介 的链接就是锚点链接

锚点链接要配合我们的标题使用，我们先给标题一个id，然后给标点链接对应的id就可以了

我们现在想要锚点链接跳到2级标题的位置，我们就这样写

刷新后我们点击锚点链接

发现会自动跳到二级标题位置

7  函数链接

7.1  空连接

我们先说我们上面提到的空链接

点击空链接后不会返回顶部，并且点击后链接颜色不会发生改变

7.2  点击链接后执行一个JS函数

点击后可执行JS函数

8  与iframe的配合

可以通过iframe打开指定的html文件，我们现在有两个可以调用的html文件，A.html的页面全是青色，B.html的页面全是红色

之后我们进行调用，调用时需要让a标签的target与iframe的name保持一致

打开后是这样的

点击跳转后，a标签的src会覆盖掉iframe标签的src，所以点击后是这样的