HTML链接

时间:2020-02-23 14:33:41  来源:igfitidea点击:

HTML链接或者超链接是一些文本和图像,单击它们可以将我们带到其他网页文件。

锚标签

我们使用定位标记" <a>"创建HTML链接。
上面的HTML入门教程链接是通过编写以下HTML代码创建的。

<a href="https://www.theitroad.local/html/html-introduction">Click Me! To check HTML Introduction</a>

锚标记的href属性设置为我们要重定向的网页的url。

目标属性

锚标记具有名为" target"的属性,该属性告诉我们链接文档将在何处打开。
以下是target属性的一些值。

_blank这将在新窗口中打开链接的网页文档。

<a href="/html/html-introduction" target="_blank">Click Me! To check HTML Introduction</a>

_self将在同一页面中打开链接的网页文档。

<a href="/html/html-introduction" target="_self">Click Me! To check HTML Introduction</a>

parent将在父框架中打开链接的网页文档。

<a href="/html/html-introduction" target="_parent">Click Me! To check HTML Introduction</a>

_top将在整个窗口中打开链接的网页文档。

<a href="/html/html-introduction" target="_top">Click Me! To check HTML Introduction</a>

滚动到顶部-部分链接

我们可以使用锚标记来创建链接,单击这些链接可以将我们带到网页的不同部分。
一个常见的示例是网页中的"滚动到顶部"链接,用户在文档中向下滚动太远后,单击该链接可滚动回到顶部。

要创建节链接,我们需要两个锚标记。
第一个标签放置在我们要带用户前往的部分中。
第一个锚点的"名称"属性设置为第二个标记中使用的某个值。

第二个锚点是链接,单击该链接会将用户带到目标部分。
该锚点的属性" href"具有" #name",其中name等于第一个锚点中使用的值。

</code><h1>Top of the page</h1>
<a name="top"></a>

<p>Some text in this paragraph...
</p>

<a href="#top">Scroll To Top</a>
</code>

链接下载文件

我们可以通过将锚标记的href属性设置为文件的URL来创建下载文件的链接。

<a href="http://www.example.com/download/doc.pdf">Download PDF</a>

我们可以使用它为PDF,CSV,DOC,PSD等文件创建下载链接。

图片链接

我们还可以通过将图像标签" <img>"放在锚标签" <a>"内来建立图像链接。

<a href="https://www.theitroad.local">
	<img alt="Brand" src="https://www.theitroad.local/image/theitroad-logo-black-311x48.png">
</a>