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

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

zhezhongyun 2024-12-03 06:26 47 浏览

链接

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

链接 - <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 链接

上一篇：Automa插件之js脚本小技巧:零依赖的日期时间格式化,亲测好用!
下一篇：html开发笔记11- 网页超链接

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>

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）