2025年HTML——带有超链接的网页（a 标签详解）

科技前沿 • 2025-04-01 18:37 • 阅读 47

大家好，我是讯享网，很高兴认识大家。

🌳🌳🌳前言：上一篇文章简单的总结了一下HTML中使用到的基础标签，这篇便简单的深入总结一下 a 标签的属性及其表达效果。

本文摘自头歌HTML——文本 (educoder.net)

🍨a 标签属性——href 属性

🍥href——anchor URL

🍥href——relative URL

🍥href——absolute URL

🍥href——邮箱地址

🍨a 标签属性——target 属性

上篇文章中，提到我们可以使用<a>标签定义超链接。比如说，一个可以调转到百度网页的标签。

<a href="https://baidu.com">百度搜索</a>

本篇文章便简单的总结下a 标签的属性及其作用。

🍨a 标签属性——href 属性

href 属性是超链接最重要的属性，它用于指定超链接目标的 URL。

比较典型的定义超链接的格式如下：

<a href="https://baidu.com">百度搜索</a>

其中超链接目标而URL，有三种类型

锚 URL (anchor URL)：指向同一页面内某一位置；
相对 URL (relative URL)：指向同一网站的不同页面；
绝对 URL (absolute URL)：指向另一个网站。

不同类型的URL，有不同的编码方式，让我们来简单的看一下吧。

讯享网

🍥href——`anchor URL`

🌰举个例子

第16行 <a href="#toc1">简介</a> 定义了一个指向#toc1目标的锚链接，点击之后会定位到第21行 <h2 id="toc1">简介</h2> 所展示的位置处

🌟id属性值为toc1的位置。

此外，当href="#"时，默认回到网页顶部位置。

🍥href——`relative URL`

🌰举个例子

<body>  
    <h2>主页</h2>  
    <h3>网站导航：</h3>  
    <ul>  
        <li><a href="./home.html">主页</a></li>  
        <li><a href="./blog.html">博客</a></li>  
        <li><a href="./project.html">项目</a></li>  
        <li><a href="./about.html">关于我</a></li>  
    </ul>  
</body>

讯享网

类比相同目录下的不同文件，用 . 表示在当前路径下。

🍥href——`absolute URL`

这种比较好理解，就用开头的例子吧

<a href="https://baidu.com">百度搜索</a>

点击后会跳转到百度的页面，这就是绝对URL，它会跳转到另一个网站。

🍥href——邮箱地址

我们还可以将href属性值设置为mailto:邮箱地址，这样做可以调起邮箱应用，发送邮件到对应地址。

<p>发送邮件到：<a href="mailto:">someone</a>

🍨a 标签属性——target 属性

target 属性规定了在何处打开超链接。

比如：

<p><a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a>

表示在新的浏览器窗口中打开链接。

target 的取值	效果
target="_blank" 或target="new"	链接页面显示在新的浏览器窗口中
target="_self"	链接页面显示在当前窗口

🐳自我总结：

💬一起加油！

2025年HTML——带有超链接的网页（a 标签详解）

🍨a 标签属性——href 属性

🍥href——anchor URL

🍥href——relative URL

🍥href——absolute URL

🍥href——邮箱地址

🍨a 标签属性——target 属性

相关推荐

🍥href——`anchor URL`

🍥href——`relative URL`

🍥href——`absolute URL`