链接

HTML 教程 · 第 5 章 · 7 次浏览

链接（<a>）是网页之间互相跳转的通道，也是搜索引擎爬取网站的路径。没有链接，页面就是一盘散沙；有了链接，内容才连成一张网。这也是做内链的意义：每个页面都给用户和搜索引擎提供了继续往下走的入口。

a 标签的基本写法

<a href="https://example.com">链接文字</a>

href 是链接的目标地址，链接文字是用户看到的可点击部分。没有 href 的 a 标签没有跳转功能，一般配合 JS 用。

路径：相对路径与绝对路径

类型	写法	说明
绝对路径	https://example.com/a.html	完整的网址，指向站外或指定站点
相对路径	about.html	同目录下的文件
相对路径	../img/logo.png	上级目录（../ 表示上一级）
根路径	/about.html	从站点根目录开始
锚点	#section2	页面内跳转到 id 为 section2 的位置

站内链接推荐用相对路径或根路径，这样换域名、换目录时不用改链接。

常用属性

属性	作用
target="_blank"	新标签页打开（站内链接不建议用，会打断浏览）
title	悬停提示文字
download	提示下载文件而不是打开（需同源）
rel="nofollow"	告诉搜索引擎不要传递权重（外链、付费链接常用）
rel="noopener"	配合 _blank 防止新页面通过 window.opener 控制原页面

锚点跳转

长页面常用锚点做"回到顶部"或目录跳转。给目标元素加 id，链接用 #id 即可：

<a href="#top">回到顶部</a>
...
<div id="top">页面顶部</div>

mailto 与电话链接

mailto: 唤起邮件客户端，tel: 在手机上唤起拨号：

<a href="mailto:hello@example.com">发邮件</a>
<a href="tel:10086">拨打电话</a>

链接文字怎么写

链接文字要能独立描述去向，不要写"点击这里""更多"。搜索引擎通过锚文本理解目标页面主题，用户也需要知道点了会去哪。"点击这里"对两者都没有信息量。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>链接示例</title>
</head>
<body>
    <h2 id="top">链接综合示例</h2>
    <p><a href="https://www.gdsxzx.com" target="_blank" rel="noopener">访问编程学习网（新窗口）</a></p>
    <p><a href="about.html">站内相对路径链接</a></p>
    <p><a href="mailto:hello@example.com">发邮件联系我</a></p>
    <p><a href="file.pdf" download>下载文件</a></p>
    <p><a href="#section2">跳到下方第二节</a></p>
    <h3>第一节</h3>
    <p>这里是第一节内容。</p>
    <h3 id="section2">第二节</h3>
    <p>这里是第二节内容，从顶部锚点跳转到这里。</p>
    <p><a href="#top">回到顶部</a></p>
</body>
</html>

📚 HTML 标签速查

常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。

写法 / 语法	作用
`<h1>-<h6>`	标题，h1 最高，每页只用一个 h1
`<p>`	段落，自动加前后间距
`<a href="">`	链接，href 是目标地址
`<img src="" alt="">`	图片，src 地址，alt 替代文字
`<ul> / <li>`	无序列表
`<ol> / <li>`	有序列表，数字编号
`<dl> / <dt> / <dd>`	自定义列表：术语 + 说明
`<table> / <tr> / <td> / <th>`	表格：行 / 单元格 / 表头
`<form action="" method="">`	表单，action 提交地址，method 提交方式
`<input type="">`	输入控件，type 有 text/password/email/number 等
`<textarea>`	多行文本输入
`<select> / <option>`	下拉框及选项
`<button type="submit">`	按钮，submit 提交表单
`<strong> / <em>`	加粗（重要）/ 斜体（强调）
`<div> / <span>`	区块容器 / 行内容器
`<header> <nav> <main>`	语义化：页眉 / 导航 / 主体
`<section> <article> <aside>`	语义化：分节 / 独立内容 / 侧栏
`<footer>`	页脚：版权、备案
`<video> / <audio>`	HTML5 视频 / 音频，加 controls 显示控制条
`<iframe src="">`	嵌入其他网页
`<!-- 注释 -->`	HTML 注释，不显示在页面
`<br> / <hr>`	换行 / 水平分割线
`<pre>`	保留空格和换行，原样显示
`<blockquote> / <q>`	块级引用 / 行内引用
`<figure> / <figcaption>`	图文组合及说明