HTML链接的target属性有哪些值？各有什么作用？

顺亿

2026-09-27 • 👁 0人浏览过

\_blank链接需加rel="noopener noreferrer"以防止安全风险，\_parent在父框架打开，\_top跳出所有框架，framename在指定框架打开，javascript可用window.open()动态控制；1. 使用\_blank时必须添加rel="noopener noreferrer"防止tabnab bing 攻击；2. \_parent将链接内容加载到直接父级框架；3. \_top强制在顶层浏览上下文中打开链接；4. framename在指定name的iframe中打开，若不存在则新建；5. 通过window.open()可动态控制打开方式，但需用户触发以避免弹窗拦截；6. 动态修改 a标签 target属性可实现条件性跳转策略；这些机制共同决定了链接的导航行为和安全性，正确使用能提升用户体验与网站安全，最终应根据场景选择合适的方式并始终关注安全最佳实践。 HTML链接的

target

属性，说白了，就是告诉浏览器这个链接点下去之后，内容应该在哪里显示。它决定了是在当前页面、新开一个标签页、还是在某个特定的框架里打开。理解这些值，能帮助我们更好地控制用户体验和页面结构。解决方案

target

属性主要有以下几个预定义的值，以及一种自定义方式：

_self

: 这是默认值。链接会在当前浏览器上下文（也就是你正在看的那个标签页或窗口）中打开。如果你不写

target

属性，链接行为就是这样。

_blank

: 这个值会强制链接在一个新的浏览器上下文（通常是新的标签页或窗口）中打开。

_parent

: 如果你的页面嵌入在框架（

</code></div>
或已废弃的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><frameset></code></div>
）中，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_parent</code></div>
会尝试在当前框架的直接父级框架中打开链接。如果没有父级框架，它的行为就和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_self</code></div>
一样。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_top</code></div>
: 这个值是最“霸道”的。它会把链接内容加载到整个窗口的顶层浏览上下文，无论当前页面嵌套了多少层框架，它都会跳出所有框架，在整个浏览器窗口中显示。如果页面本身就没有框架，那它也和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_self</code></div>
一样。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">framename</code></div>
: 你可以指定一个自定义的框架名称（比如一个
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><iframe></code></div>
的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">name</code></div>
属性值）。链接会尝试在这个指定名称的框架中打开。如果找不到这个名称的框架，浏览器会新开一个标签页/窗口，并给它赋予这个名称，然后在这个新开的窗口中加载链接内容。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_blank</code></div>
链接的新标签页打开，真的安全吗？
用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_blank</code></div>
来让链接在新标签页打开，这是最常见的做法之一。我们经常希望用户在点击外部链接时，不离开当前网站，所以就习惯性地加上
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">target="_blank"</code></div>
。这看起来很方便，但实际上，如果使用不当，它会带来一些潜在的安全风险，尤其是一个叫做“Tabnabbing”的问题。
立即学习
“
前端免费学习笔记（深入）
”；
简单来说，当你在一个新标签页打开一个链接时，那个新标签页的JavaScript可以通过
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">window.opener</code></div>
对象访问到你的原始页面。这意味着，恶意的网站可以利用这个连接，改变你原始页面的URL，比如伪装成一个登录页面，诱骗你输入凭据。这听起来有点吓人，对吧？
所以，一个非常重要的最佳实践是，在使用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">target="_blank"</code></div>
时，同时加上
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">rel="noopener noreferrer"</code></div>
属性。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">noopener</code></div>
: 这个属性会阻止新打开的页面通过
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">window.opener</code></div>
访问到你的原始页面。这是防止Tabnabbing攻击的关键。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">noreferrer</code></div>
: 这个属性除了
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">noopener</code></div>
的功能外，还会阻止浏览器在新页面请求时发送Referer头信息。这意味着新页面不会知道你从哪个页面跳转过来的，增加了用户的隐私性。
在我看来，很多开发者在用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_blank</code></div>
的时候，根本没意识到这个安全隐患，或者说，他们只知道要加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">rel="noopener"</code></div>
，但没细想过为什么。这是一个很小的细节，但对用户安全来说却非常重要。每次看到没加这两个属性的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_blank</code></div>
链接，我都会有点强迫症地想去加上。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_parent</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_top</code></div>
：框架世界里的导航策略
虽然现代网页设计中，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">frameset</code></div>
已经基本被淘汰了，但
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><iframe></code></div>
的使用依然非常普遍，比如嵌入视频、地图、广告，或者构建一些微
前端应用
。在这种多框架的场景下，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_parent</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_top</code></div>
就显得很有用了。
想象一下一个页面结构：主页面（top）里嵌入了一个
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">iframeA</code></div>
，而
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">iframeA</code></div>
里又嵌入了一个
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">iframeB</code></div>
。现在，如果
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">iframeB</code></div>
里的一个链接被点击：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
如果链接的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">target</code></div>
是
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_parent</code></div>
，那么这个链接的内容就会加载到
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">iframeA</code></div>
中。它只会影响当前框架的直接上级。
如果链接的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">target</code></div>
是
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_top</code></div>
，那么这个链接的内容就会跳出
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">iframeA</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">iframeB</code></div>
，直接加载到最外层的主页面（top）中。它会“冲破”所有的框架层级。
它们的区别就在于“作用范围”：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_parent</code></div>
只影响一层，而
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_top</code></div>
是直接回到最顶层。
在实际应用中，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_parent</code></div>
可能在一些需要局部刷新但又不希望影响整个页面的场景下用到，比如一个嵌入式的后台管理面板，你希望某个操作结果在父级面板里显示。而
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_top</code></div>
则更常用于“跳出框架”的场景，例如，一个嵌入式的登录页面，用户登录成功后，你希望整个主页面都跳转到用户中心，而不是仅仅在iframe里刷新。我个人在使用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><iframe></code></div>
时，如果需要从子框架跳转到主站的某个页面，几乎都会毫不犹豫地使用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_top</code></div>
，这能确保用户体验的一致性，避免页面被“困”在小小的框架里。
JavaScript如何动态控制链接打开方式？
有时候，我们不能简单地在HTML里写死
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">target</code></div>
属性，因为链接的打开方式可能需要根据用户行为、数据状态或者其他逻辑来动态决定。这时候，JavaScript就派上用场了。
最直接的方法是使用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">window.open()</code></div>
方法。这个方法非常强大，它允许你打开一个新的浏览器窗口或标签页，并且可以精确控制这个新窗口的各种特性，比如大小、是否显示滚动条、菜单栏等等。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">window.open(URL, windowName, [windowFeatures])</code></div>
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">URL</code></div>
: 要打开的链接地址。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">windowName</code></div>
: 这个参数非常关键，它其实就对应了HTML链接
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">target</code></div>
属性的值。你可以传入
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_blank</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_self</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_parent</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">_top</code></div>
，或者任何自定义的框架名称。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">windowFeatures</code></div>
: 一个逗号分隔的字符串，用于定义新窗口的特性，比如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">'width=800,height=600,scrollbars=yes'</code></div>
。
示例代码：
假设你有一个按钮，点击后需要根据某些条件决定是新开窗口还是在当前页面跳转：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">document.getElementById('dynamicLinkBtn').addEventListener('click', function() {
    const url = 'https://www.example.com/some-page';
    const shouldOpenInNewTab = confirm('要在新标签页打开吗？'); // 模拟一个条件判断

    if (shouldOpenInNewTab) {
        // 在新标签页打开，并指定一些窗口特性
        window.open(url, '_blank', 'width=1024,height=768,resizable=yes,scrollbars=yes');
    } else {
        // 在当前页面打开
        window.location.href = url; // 或者 window.open(url, '_self');
    }
});</code></div>
当然，你也可以通过JavaScript来动态修改现有
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><a></code></div>
标签的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">target</code></div>
属性：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">document.getElementById('myAnchorTag').addEventListener('click', function(event) {
    // 假设这个链接原本没有target属性
    if (Math.random() > 0.5) { // 随机决定是否新开
        this.setAttribute('target', '_blank');
        this.setAttribute('rel', 'noopener noreferrer'); // 别忘了这个！
    } else {
        this.removeAttribute('target');
        this.removeAttribute('rel');
    }
    // 让链接的默认行为继续执行
});</code></div>
在使用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">window.open()</code></div>
时，需要特别注意浏览器的弹窗拦截器。很多浏览器默认会拦截非用户触发的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">window.open()</code></div>
调用。所以，最好是响应用户的
点击事件
来调用它。对我来说，如果只是简单的新标签页，我还是倾向于直接在HTML里写
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">target="_blank"</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">rel="noopener noreferrer"</code></div>
，代码更简洁，也更符合语义。JavaScript的介入，通常是当我需要更精细的控制，比如打开一个特定尺寸的辅助窗口，或者在用户确认后才执行跳转逻辑时。
                            </div>

                            <!-- 文章导航 -->
                            <nav class="cxy-article-nav" aria-label="文章导航">

    
                                <a href="https://www.vqhf.com/article/14234.html" class="cxy-article-nav-link cxy-article-nav-prev">
                                    <span>&#8249;</span>
                                    <div>
                                        <div class="cxy-article-nav-label">上一篇</div>
                                        <div class="cxy-article-nav-title">CSS如何创建响应式卡片高度自适应_使用aspect-ratio属性控制比例</div>
                                    </div>
                                </a>
    


    
                                <a href="https://www.vqhf.com/article/14249.html" class="cxy-article-nav-link cxy-article-nav-next">
                                    <div>
                                        <div class="cxy-article-nav-label">下一篇</div>
                                        <div class="cxy-article-nav-title">js怎么补齐数字</div>
                                    </div>
                                    <span>&#8250;</span>
                                </a>
    

                            </nav>
                        </div>
                    </article>

                    <!-- 相关文章列表 -->
                    <section class="cxy-content-section" style="margin-top: 20px;">
                        <h2 class="cxy-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="cxy-article-list">

    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/14234.html" class="cxy-article-link">CSS如何创建响应式卡片高度自适应_使用aspect-ratio属性控制比例</a>
                                <div class="cxy-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/14233.html" class="cxy-article-link">jquery怎么用splice删除数组</a>
                                <div class="cxy-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/14232.html" class="cxy-article-link">React Desktop是什么意思？</a>
                                <div class="cxy-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/14229.html" class="cxy-article-link">wps怎么打开javascript</a>
                                <div class="cxy-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/14216.html" class="cxy-article-link">CSS中rgb()函数如何与透明度结合？通过rgba()实现半透明颜色效果</a>
                                <div class="cxy-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/14249.html" class="cxy-article-link">js怎么补齐数字</a>
                                <div class="cxy-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/14256.html" class="cxy-article-link">javascript html5移动端轻松实现文件上传_javascript技巧</a>
                                <div class="cxy-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/14282.html" class="cxy-article-link">Axios和Ajax的区别是什么(详细介绍)</a>
                                <div class="cxy-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/14286.html" class="cxy-article-link">Vue中引入第三方JS库的四种方式</a>
                                <div class="cxy-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/14333.html" class="cxy-article-link">HTML怎么标注回复层级_HTML深度缩进语义实现【说明】</a>
                                <div class="cxy-article-meta">2026-09-27</div>
                            </li>
    

                        </ul>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <aside class="cxy-sidebar cxy-sidebar-right" aria-label="侧边栏">
    <!-- 推荐阅读 -->
    <div class="cxy-widget">
        <h3 class="cxy-widget-title">推荐阅读</h3>
        <div class="cxy-recommend-grid">

    
            <a href="https://www.vqhf.com/article/14365.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="【读书笔记】精通CSS 第二版_html/css_WEB-ITnose">
                </div>
                <div class="cxy-recommend-title">【读书笔记】精通CSS 第二版_html/css_WEB-ITnose</div>
            </a>
    
            <a href="https://www.vqhf.com/article/14353.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="如何解决CSS Transition设置all导致的性能开销_指定具体属性名减少重绘">
                </div>
                <div class="cxy-recommend-title">如何解决CSS Transition设置all导致的性能开销_指定具体属性名减少重绘</div>
            </a>
    
            <a href="https://www.vqhf.com/article/14344.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="vue如何传递多个参数">
                </div>
                <div class="cxy-recommend-title">vue如何传递多个参数</div>
            </a>
    
            <a href="https://www.vqhf.com/article/14343.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="如何使用 JavaScript 访问对象键中包含空格的对象？">
                </div>
                <div class="cxy-recommend-title">如何使用 JavaScript 访问对象键中包含空格的对象？</div>
            </a>
    

        </div>
    </div>

    <!-- 最新文章 -->
    <div class="cxy-widget">
        <h3 class="cxy-widget-title">最新文章</h3>
        <ul class="cxy-article-list">

    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/14365.html" class="cxy-article-link">【读书笔记】精通CSS 第二版_html/css_WEB-ITnose</a>
                <div class="cxy-article-meta">2026-09-27</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/14353.html" class="cxy-article-link">如何解决CSS Transition设置all导致的性能开销_指定具体属性名减少重绘</a>
                <div class="cxy-article-meta">2026-09-27</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/14344.html" class="cxy-article-link">vue如何传递多个参数</a>
                <div class="cxy-article-meta">2026-09-27</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/14343.html" class="cxy-article-link">如何使用 JavaScript 访问对象键中包含空格的对象？</a>
                <div class="cxy-article-meta">2026-09-27</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/14341.html" class="cxy-article-link">如何实现CSS在特定语言下切换字体_通过:lang()伪类设置</a>
                <div class="cxy-article-meta">2026-09-27</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/14333.html" class="cxy-article-link">HTML怎么标注回复层级_HTML深度缩进语义实现【说明】</a>
                <div class="cxy-article-meta">2026-09-27</div>
            </li>
    

        </ul>
    </div>

    <!-- 热门标签 -->
    <div class="cxy-widget">
        <h3 class="cxy-widget-title">热门标签</h3>
        <div class="cxy-article-tag-list">

    
            <a href="https://www.vqhf.com/tag/8574" class="cxy-article-tag-item">a标签</a>
    
            <a href="https://www.vqhf.com/tag/4004" class="cxy-article-tag-item">前端应用</a>
    
            <a href="https://www.vqhf.com/tag/3608" class="cxy-article-tag-item">bing</a>
    
            <a href="https://www.vqhf.com/tag/3607" class="cxy-article-tag-item">点击事件</a>
    
            <a href="https://www.vqhf.com/tag/2403" class="cxy-article-tag-item">区别</a>
    
            <a href="https://www.vqhf.com/tag/1799" class="cxy-article-tag-item">为什么</a>
    
            <a href="https://www.vqhf.com/tag/1719" class="cxy-article-tag-item">浏览器</a>
    

        </div>
    </div>
</aside>
            </div>
        </div>
    </main>


    <!-- 页脚 -->
    <footer class="cxy-footer">
        <div class="cxy-container">
            <div class="cxy-footer-links" style="justify-content: center;">
                
                
                <a href="https://www.vqhf.com/22.html" class="cxy-footer-link">免责声明</a>
                
                <a href="https://www.vqhf.com/23.html" class="cxy-footer-link">关于我们</a>
                
                <a href="https://www.vqhf.com/24.html" class="cxy-footer-link">联系我们</a>
                
                <a href="https://www.vqhf.com/25.html" class="cxy-footer-link">投诉删除</a>
                
                <a href="https://www.vqhf.com/26.html" class="cxy-footer-link">投稿须知</a>
                
                
            </div>
            <div class="cxy-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 趣航编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063733号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="cxy-back-to-top" id="backToTop" aria-label="返回顶部">&#8679;</button>

    <!-- 公共脚本 -->
    <script src="https://www.vqhf.com/static/v0/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
<script>
(function() {
  var al = document.createElement("script");
  al.src = "/api/log?action=views&code=200&id=14247&path=http%3A%2F%2Fwww.vqhf.com%2Farticle%2F14247.html&type=archive&nonce="+Date.now();
  document.body.appendChild(al);
})();
</script>

</html>