HTML——带有超链接的网页(a 标签详解)

???前言:上一篇文章简单的总结了一下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@email.com">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"链接页面显示在当前窗口

 


?自我总结:


 

?一起加油!