当前位置：网站首页 > 技术文章 > 正文

html基础必备-链接标记，前端小白一看就会

myzbx 2024-12-03 16:39 63 浏览

链接

链接允许你通过单击链接文本从一个页面跳到另一个页面，还可以跳转到同一页面上的其他位置（称为片段）、你网站的不同部分或跳转到别的网站。

链接 - <a href="url">link text</a>

link标记有两个主要部分：用户可以点击的文本，以及点击链接时访问的网址。<a>和</a>标记之间是链接文本，通常以蓝色显示，并由浏览器加下划线。href=“url”部分是网址，可以通过多种方式设置url：

href="example.html" - 当前目录的其它页面
href="example/page.html" - 相对位置，其它目录的页面
href="http://www.example.com/page.html" - 其它网站的页面

链接到片段 - <a href="#fragment">link</a>

链接到同一个网页上的其他地方，如页面下方的其他部分或章节，跳转到这些部分通常是有用的，称为链接到片段，浏览器将自动尝试滚动到页面该部分。

片段首先需要在网页的某个地方定义，方法是给它们一个名称，例如<a name=“fragment_name”>，然后使用hash（#）字符创建指向该片段的链接：<a href=“#fragment_name”>链接</a>。要链接到另一个页面上的片段，只需将片段名称附加到地址，例如：href=“example.html#fragment_name".

目标窗口 - <a href="url" target="???">link</a>

你可能并不总是希望为了链接到某个页面并将其加载到当前窗口上。这就是target属性派上用场的地方。通过设置target=“_BLANK”，把页面将加载到一个新窗口（或新选项卡）。类似地，“_self”、“_parent”或“_top”将分别在当前窗口、父窗口（与框架一起使用）或顶层窗口中打开链接。

图像链接- <a href="url"><img ...></a>

通过在<a>和</a>标记之间放置一个图像标记，可以将图像转换为链接，单击该图像后将加载引用的页面。你可能会注意到，当链接文本变为下划线时，图像得到一个蓝色边框。这可以通过设置图像的border=“0”属性或使用css来解决。

邮件链接 - <a href="mailto:email"></a>

mailto符号链接是一种特殊的链接，它指示浏览器使用默认的电子邮件程序编写邮件并发送到指定的地址，注意的是该操作不会自动发送任何电子邮件。

HTML 引用

html基础必备-链接标记，前端小白一看就会

链接

链接 - <a href="url">link text</a>

链接到片段 - <a href="#fragment">link</a>

目标窗口 - <a href="url" target="???">link</a>

图像链接- <a href="url"><img ...></a>

邮件链接 - <a href="mailto:email"></a>

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿