百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

Web前端开发,HTML超链接标签,不懂的可以学习一下

yund56 2025-07-18 01:11 4 浏览

一、什么是HTML的超链接

大家平时浏览的网页中都可以找到链接。点击链接就可以从一个页面跳转到另一个页面。

HTML超链接可以是一个字,一个词,或者一组词,也可以是一幅图像。可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手,表示当前有超链接。

我们通过使用 <a> 标签(anchor的缩写)在 HTML 中创建链接。超链接是写在<a>和</a>之间的内容。如:

<p>我是一个段落<a>我是一个超链接</a></p>

二、超链接两种使用 <a> 标签的方式

1、通过使用 href 属性 - 创建指向另一个文档的链接

href属性是hypertext reference的缩写,当超链接被点击的时候,哪个页面被打开,如:

<a href="">今日头条</a>

href属性要写在开始标签中,可以为标签添加额外的功能和信息。

2、通过使用 target 属性 - 当超链接被点击的时候,新页面将在什么地方被打开,如:

<a href="" target="_blank">今日头条</a>

_blank:在浏览器的新窗口中打开页面

_self:在当前窗口中打开页面,替换原来的页面,_self为target属性的默认值

三、绝对路径和相对路径

1、绝对路径

<a href="">今日头条</a> 

代码中的URL地址为绝对路径,向一个特定的服务器上的文件发送请求。

绝对路径总是包含协议和服务器,所以当想要连接到其他网站或者服务器上的时候,通常都是使用绝对路径。

2、相对路径

<a href="steven.html" target="_blank">今日头条</a> 

代码中的steven.html为相对路径,相对路径从来不包含协议和服务器。

如果不包含协议或服务器,浏览器会假设协议和服务器与发出请求的页面相同。所以当要连接的网页在相同的服务器上时,通常会使用相对路径。

相关推荐

柚墨个人简历Word模板分享(柚墨ppt)

1、棕色商务风餐饮店长个人通用简历:http://www.yomoer.cn/template/detail/7801.html2、棕色商务风猎头个人通用简历:http://www.yomoer.cn...

纯粹的 Prompt 优化:输出HTML一步到位, 简历诊断 AI 小程序揭秘

最近我琢磨着,能不能搞一个超便捷的简历诊断工具,用户只需上传简历和岗位要求截图,AI就能一步到位生成HTML报告,这想法是不是听着就带劲?现在,我把这整个过程拆解出来,跟大家分享一下,保证干货满...

代码式动态录入生成个人简历页面html页面前端源码

大家好,今天给大家介绍一款,代码式动态录入生成个人简历页面html页面前端源码(图1)。送给大家哦,获取方式在本文末尾。整个页面分为两个部分,左右布局,左边动态输入一个代码编辑器,根据输入的代码动态变...

Web前端开发,HTML超链接标签,不懂的可以学习一下

一、什么是HTML的超链接大家平时浏览的网页中都可以找到链接。点击链接就可以从一个页面跳转到另一个页面。HTML超链接可以是一个字,一个词,或者一组词,也可以是一幅图像。可以点击这些内容来跳转到新的文...

HTML-列表标签(双标签) 208(html项目列表标签)

列表标签有3种:1)dl,dd与dt(定义列表)2)ol与li(有序列表)3)ul与li(无序列表)前两者一般不怎么用,网页中运用最多的是第三种1)<dl><dd>与<...

html开发笔记06- 字体标签和文字标签

1、字体标签:用于在页面中加粗、倾斜、加下划线等操作(不推荐)。字体标签分为:<b>加粗</b>,<i>倾斜</i>,<u>下划线&...

Web前端:HTML的10大重要用途(web前端开发html总结)

  HTML是最流行的Web前端开发技术之一,它是一种用于创建网页和Web应用程序的标记语言。HTML与CSS和JavaScript结合使用以创建有吸引力且响应迅速的前端网页。  HTML提供了...

晨间解析!HTML canvas 标签面试题,绘图知识轻松掌握

当清晨的阳光如笔尖般轻轻划过窗台,泡一杯温润的金骏眉,坐在桌前翻开这篇文章——此刻的学习,就像在网页的“电子画布”上从容调色,让HTML中<canvas>标签的知识点如晨光般细...

想学 HTML,不知从何入手?看完这篇文章你就知道了

很多人都说HTML是一门很简单的语言,看看书,看看视频就能读懂。但是,如果你完全没有接触过,就想通过看一遍教程,背背标签,想要完全了解HTML,真的有点太天真了。HTML中文“超文本标记语言”,英文名...

B端设计|页面标签的认识和实操应用

既然浏览器中可以使用页面标签,那为什么在项目中还需要使用这个组件和交互框架的形式呢?本文IE等浏览器界面为例,介绍了页面标签在产品设计中的作用,以及它们在不同使用场景当中的效果。希望能帮助你对页面标签...

视频号超链接怎么设置能成功?核心要点:标签代码格式

视频号超链接怎么设置能成功?坦白来讲,成功背后的方法很简单,唯一需要注意的点,就是<a>标签代码背后对应的格式。前两天一朋友跟我说:为什么视频号超链接设置完以后,在用户端看测试效果时,显示...

那些容易被你忽略的HTML重要属性,你知道几个?

前言在前端开发编写html文件的时候,我们可能会很熟练的写出常见的html元素,但是如果问到某些元素的差别时,大家不一定能说的出来,今天就给大家总结一下那些很常见但容易混淆的属性。html与csscs...

「测试开发全栈-HTML」(18) label标签的使用

说完了标签属性后,接着说下HTML中最后的标签--label<label>标签为input元素定义标注,用于绑定一个表单元素,当点击一个<label>标签内的文本时,浏览器就会...

Markdown 各种标签说明介绍(markdownhere)

介绍主要介绍各种Markdown的标签。汇总一下自己在Markdown中编辑中的常用标签。本篇内容的标签,全部是在Typora的环境下自测使用过。1.基础标签主要介绍Markdown中的一些基础标签,...

10 个罕见的 HTML 标签,几乎无人使用 - 、等等

HTML的内容远不止<div>、<a>和<p>。如此多更复杂、更强大的标签,你可能从未使用过。具有从交互式图像到复杂的UI组件的有趣功能。1.<...