HTML超链接

jerkzhang

Apr 16, 2020

from《专否HTML教程 - HTML链接》：

HTML链接（HTML links）即超链接（Hyperlinks）。

访问者可以通过鼠标单击HTML链接元素，而跳转到指定的另一个网页或文件。（一般来说，当鼠标悬停在HTML链接元素上时，鼠标会变成手指状图标。）

HTML 链接元素的句法

使用<a>标签定义HTML元素。

<a href="链接地址填这里"> 链接元素的内容（这里可以是文本，可以嵌套HTML元素）</a>

链接地址可以是一个完整的url地址，也可以是部分路径地址，浏览器会将当前网站的域名自动补全在部分路径前。

<a href="/"> 专否沙盒 </a>
<a href="https://sand-box.cn"> 专否沙盒 </a>

运行一下

HTML 链接的 target 属性

HTML链接元素的 target 属性是用来定义在哪里打开指定链接地址。target属性有如下几种取值：

_blank 在新窗口/新选项卡中打开指定链接地址
_self 在当前窗口/当前选项卡中直接打开指定链接地址（默认选项）
_parent 在当前页面的父框架中打开（特指网页内嵌套了框架网页）
_top 在最顶层的父框架中打开（特指多层嵌套框架网页的情况）
framename 在指定名称的框架网页中打开
target="_blank"最为常用，学会这个即可，其他的有需求的时候再研究不迟。

<a href="/" target="_blank"> 专否沙盒 </a>

运行一下

HTML链接的title属性

HTML链接元素的 title 属性可定义该元素名称，当鼠标悬停在该链接元素上，title的值即会显现出来。

<a href="/" title="专否666"> 专否沙盒 </a>

运行一下

把当前页面的元素id作为链接对象

把当前页面的元素id作为链接对象，则会达到页面滚动到指定id元素位置。

<!-- 点击该元素，页面就会滚动到id为zhuanfou的元素处 -->
<a href="#zhuanfou"> 专否沙盒 </a>

<!-- 用来拉大上下两个元素的垂直距离，以更好地演示此案例 -->
<div style="height:1000px;width:1px;"></div>

<h1 id="zhuanfou"> 专否 666 </h1>

运行一下

大部分HTML元素都可以作为链接元素内容

链接元素的内容不仅可以是文本，还可以是任何HTML元素内容，包括图像元素、div元素等。

<a href="/">
<img src="https://logo.zhuanfou.com/program-logo-60.png">
</a>

<a href="/">
<h1> 专否 </h1>
</a>

<a href="/">
<div style="border:1px solid Tomato;width:100px;height:100px;"></div>
</a>

运行一下