页面跳转本质上很简单，但想用好，细节不能马虎。

最核心的方法，就是 标签。

一、用 标签搭桥

点击跳转的文字或图片

href 属性是关键，指定跳转目标地址。可以是相对路径（如 /about.html），也可以是绝对路径（外部网站完整链接）。

举个栗子：

访问示例网站

跳转到当前站点下的“关于我们”页面：

关于我们

这是最基础的方式，站内导航或指向外部网站都适用。

二、让图片也能“指哪打哪”

点击图片跳转，比如Logo，更简单。

把 标签直接嵌套在 标签里即可：

@@##@@

用户点击图片就会跳转。注意 alt 属性很重要，它对搜索引擎优化和无障碍访问都很有帮助。

三、控制跳转行为：当前窗口还是新标签页？

默认在 当前窗口 打开。如果希望保留当前页面（比如跳转外部资料），可以用 target 属性：

在新窗口打开

注意安全隐患：使用 target="_blank" 时，新页面可能通过 window.opener 控制原页面。

强烈建议添加 rel="noopener" 属性：

安全跳转

处理第三方链接时尤其好用，能有效防止恶意行为。

四、页面内“瞬移”：锚点跳转

有时不需要跳转另一个页面，只希望在当前页面不同位置间快速移动（如长文章目录导航）。这就需要“锚点”。

第一步：在目标位置设置 id 属性：

第一部分

第二步：在链接中用 # + id 指路：

跳转到第一部分

浏览器自动滚动到 id="section1" 的位置。这个技巧对构建清晰的长页面导航非常实用。

总的来说，掌握 标签的这几个用法，基本能应对大部分页面跳转需求。

《夸克》非常好用的免费AI浏览器

下载APP查看