答案是使用<a>标签创建链接,通过href设置目标地址,可指向外部网站、内部页面、图片、邮箱、电话或页面内锚点,结合target属性控制打开方式。

在HTML中创建链接,核心是使用 <a> 标签。这个标签通过不同的属性可以实现各种跳转功能,无论是打开新网页、下载文件还是跳转到页面内某个位置,都离不开它。
基本语法与href属性
<a> 标签最重要的属性是 href,它定义了点击后要跳转的目标地址。链接的文本内容写在开始和结束标签之间。
- 指向一个外部网站,需要完整的网址,通常以 https:// 开头,这叫绝对路径。例如:
<a href="https://www.example.com">访问示例网站</a> - 指向自己网站内的另一个页面,可以用相对路径。比如,如果目标文件 about.html 和当前文件在同一目录,直接写文件名:
<a href="about.html">关于我们</a>。如果在上一级目录,则用 ../ 表示,如href="../about.html"。 - 除了文字,图片也可以作为链接。只需把 <img> 标签放在 <a> 标签里面即可。例如:
<a href="gallery.html"><img src="photo.jpg" alt="我的照片"></a>,点击图片就会跳转。
控制打开方式:target属性
默认情况下,点击链接会在当前浏览器窗口或标签页中打开新页面。如果你想让它在新窗口或新标签页中打开,需要用到 target 属性。
- 设置
target="_blank"可以让链接在新的空白页打开。这是最常用的方式,尤其对于外部链接,避免用户完全离开你的网站。代码如下:<a href="https://www.example.com" target="_blank">在新标签页打开</a> - 如果不写 target 属性,或者写
target="_self",效果是一样的,都是在当前页覆盖打开。 - 如果你希望整个网站的所有链接都在新窗口打开,可以在页面的 <head> 部分添加一行
<base target="_blank" />,这样就不用给每个链接单独设置了。
其他实用的链接类型
HTML链接不仅能跳转网页,还能触发其他操作。
立即学习“前端免费学习笔记(深入)”;
-
邮箱链接: 将 href 的值设为 mailto:邮箱地址,点击后会自动打开系统默认的邮件客户端,并填好收件人。例如:
<a href="mailto:someone@example.com">发送邮件给我们</a> -
电话链接: 在移动设备上,将 href 设为 tel:电话号码,点击可以直接拨打电话。例如:
<a href="tel:+8613800138000">拨打客服热线</a> -
页面内锚点: 可以创建书签,让链接跳转到当前页面的特定位置。先给目标元素(如一个标题)加上一个 id,比如
<h2 id="section2">第二部分</h2>,然后创建链接指向这个id:<a href="#section2">跳转到第二部分</a>。注意前面要加 # 号。
基本上就这些,掌握这几个要点就能满足大部分需求了。










