学会HTML超链接a标签，你的网页就能"跳转"了

前两节课咱们讲了网页的骨架结构和常用标签，今天讲一个能让你网页"活起来"的标签——a 标签，超链接。

有了它，你的网页就不再是一张死页面，而是能跟其他页面串联起来，形成真正的"网站"。

a 标签：网页跳转的核心

网页跟普通文档最大的区别是什么？就是能跳转。你点一下某个文字或图片，就能跳到另一个页面——这个功能全靠 a 标签实现。

a 标签的写法很简单：

<a href="https://www.baidu.com">百度一下</a>

就这么一行代码，页面上就会出现蓝色带下划线的"百度一下"，点击直接跳转到百度。

两个必会的属性

href——跳转地址（必须有）

href 写在开始标签里，英文双引号内填目标网址。注意：完整的网址必须带上 https://，不写的话浏览器会把它当成本地文件，跳转直接失败。

这是新手最容易犯的错误，没有之一。

target——控制打开方式

加上 target="_blank"（注意前面有下划线），点击链接会在新标签页打开，原来的页面保留着。

不加的话，点击链接直接在当前页面跳转，想回去就得按浏览器返回键。

实际开发中，外部链接一般加 target="_blank"，站内链接一般不加。

 

a 标签不只能包文字

很多人以为超链接就是一段蓝色带下划线的文字，其实 a 标签里面还能放图片：

<a href="https://example.com">

<img src="banner.jpg" alt="广告图">

</a>

 

这样页面上就是一张可以点击的图片，鼠标放上去变成小手，点击直接跳转。网站上的广告图、logo 跳转，都是这么做的。

在 HTML5 里，a 标签甚至可以包裹 div 这类块级元素，整个区域都能点击跳转。

 

开发小技巧：空链接占位

实际开发中，有时候链接地址还没确定，但又需要先把页面结构搭出来，可以写：

<a href="#">待补充链接</a>

href="#" 表示空链接，点击后会回到页面顶部，开发阶段用来占位非常方便。

一个真实场景：官网在线客服

给大家举个实际例子。比如你做公司官网，想加一个"在线客服"入口，怎么实现？

<a href="https://你的客服系统地址/chat" target="_blank">

在线客服

</a>

就这一行代码，放在官网合适的位置，客户点击就跳转到客服聊天页面。简单、直接、有效。

我自己做的唯一客服系统（uniqchat.com），很多客户就是用这种方式，在官网放一个 a 标签，就能把访客引流到在线客服窗口，实现即时沟通。

 

新手避坑清单

1. href 忘了写 https://——跳转失败，新手最常踩的坑
2. 属性之间没加空格——多个属性之间必须用空格隔开
3. target 写成 blank 而不是 _blank——前面那条下划线不能丢
4. 图片路径写错——img 的 src 路径不对，图片加载不出来

 

记住这四点，基本不会在 a 标签上卡壳。

到目前为止你已经学会了

• 网页骨架结构（html/head/body）
• 块级元素 div 和行内元素 span
• 图片标签 img 和 src 属性
• class 和 id 的区别
• 超链接 a 标签和 href、target 属性

 

HTML 入门的核心知识点基本就这些了。有了这个基础，下一步就是学 CSS 给网页做美化。

写了十几年代码，从 PHP 到 Golang，我深知基础打牢有多重要。不管你是想自己学做网站，还是找专业的人帮你做，理解这些基础概念都不会吃亏。 

我目前运营唯一客服系统，也接企业官网、小程序、客服系统定制开发。如果你需要做网站，或者想了解怎么给你的官网加上在线客服功能，欢迎找我聊：

微信：llike620
官网：https://www.uniqchat.com