前端学习（HTML5超链接文本标签）（四）_html5文本设置超链接-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_74246993/article/details/142463687

前言

链接的语法格式：

前言

超链接文本标签可以理解为网页中的电梯，可以快捷的让你从一个房间对另一个房间进行访问

在HTML标签中，<a>标签用来定义超链接，作用即为从一个页面链接到另一个页面，作用即为跳转页面

链接的语法格式：

<a href="跳转目标" target="目标窗口的打开方式”>链接文字或图片</a>

链接分类

外部链接：

例如

<a href="http://www.itcast.cn" target="_blank">传智</a>"
    <a href="http://www.qq.com" target="_self">腾讯</a>"

内部链接：

网页内部页面之间的相互链接，直接填写链接内部页面名称，即在一个文件夹下面的HTML文件之间相互跳转的链接,例如

<a href="Untitled-1.html" target="_self">超链接文本标签</a>"
    <a href="Untitled-2.html" target="_self">超链接文本标签</a>"

空链接：

当时没有确定链接目标,例如：

 <a href="#">空链接</a>"

下载链接：

如果href里面是一个文件或者压缩包，会下载这个文件，例如：

<a href="./images/1.jpg" download="1.jpg">下载图片</a>

网页元素的链接：

给图片，文本，视频等等加入链接

<a href="http://www.baidu.com" <img src="img.jpg"></a>

锚点链接：

点击该链接可以快速定位到页面中的某个位置

第一步：

在链接文本的href属性中，设置属性值为#名字的形式，如

    <a href="one">锚点</a>

第二步:

找到目标位置，向其中添加一个id属性=刚才的名字，如：

<h3 id="one">位置</h3>"

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接文本标签</title>
</head>

<body>
    <h4>标签</h4>
    <!--外部超链接文本标签-->
    <a href="http://www.itcast.cn" target="_blank">传智</a>"
    <a href="http://www.qq.com" target="_self">腾讯</a>"
    <!--内部超链接文本标签-->
    <a href="Untitled-1.html" target="_self">超链接文本标签</a>"
    <a href="Untitled-2.html" target="_self">超链接文本标签</a>"
    <!--文件超链接文本标签-->
    <a href="./images/1.jpg" target="_blank">图片</a>"
    <!--空链接标签-->
    <a href="#">空链接</a>"
    <!--下载超链接文本标签-->
    <a href="./images/1.jpg" download="1.jpg">下载图片</a>
    <!--网页元素的超链接标签-->
    <a href="http://www.baidu.com" <img src="img.jpg"></a>
    <!--锚点超链接文本标签-->
    <a href="one">锚点</a>
    <h3 id="one">位置</h3>"
    
</body>

</html>