友情链接HTML代码应直接写在index.html的内容末尾、之前，推荐用等语义化容器包裹，内含带rel="noopener noreferrer"的标签，不可置于或中。

友链 HTML 代码直接写在 index.html 的哪个位置？

友链本质就是一组带文字和跳转链接的 标签，通常放在页面中相对固定、语义清晰的位置，比如页脚（

）或独立的「友情链接」区块。不要塞进 或 <script></script> 里——那不会渲染出可点击的链接。

• 推荐插在 内容末尾、 之前，用语义化容器包裹，例如：

  <section id="friends"><h3>友情链接</h3>
  <p><a href="<a%20href=" https:>https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635</a>" rel="noopener noreferrer">示例站点</p>
  <p><a href="<a%20href=" https:>https://www.php.cn/link/9838dd08963f61611712f456f5bdd255</a>" rel="noopener noreferrer">另一个伙伴</p>
  </section>

• rel="noopener noreferrer" 必加：防止新窗口打开时泄漏 window.opener 权限，是安全底线
• 不要用 target="_blank" 单独出现，否则存在安全隐患（尤其在旧版浏览器中）

要不要用 JavaScript 动态加载友链？

一般不用。除非你有明确需求：比如从 JSON 文件批量读取、按条件过滤、或避免 SEO 爬虫看到全部链接。

• 静态写死更简单可靠，搜索引擎能直接抓取，加载无延迟
• 动态加载需额外处理：JSON 路径要对（如 ./friends.json），fetch 后得手动拼 DOM，还要考虑加载失败 fallback
• 如果真要用 JS，别用 document.write() —— 它会清空整个页面；改用 element.innerHTML 或 append()

友链被爬虫收录不了？检查这三点

常见原因不是“加了没用”，而是写法或环境挡住了爬虫：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• href 值必须是完整协议地址（https:// 或 http://），不能是 /blog 这样的相对路径（否则爬虫可能解析成当前域名下的子路径）
• 页面本身没被 robots.txt 屏蔽，且 index.html 可公开访问（比如 GitHub Pages 默认允许，但某些私有仓库设置可能限制）
• 没在 —— 这个标签会让所有搜索引擎忽略该页，友链自然无效

样式难看、排版混乱怎么办？

友链默认是垂直堆叠的普通段落，想改成横向、网格或带图标，靠 CSS 就够了，无需改 HTML 结构：

• 给外层容器设 display: flex + flex-wrap: wrap，子
  设 margin: 0 8px 就能横排
• 每个 加 text-decoration: none 和 color: #0066cc 统一视觉
• 图标可用 inline SVG 或字体图标（如 放在 开头），别依赖外部 CDN——否则图标不显示时只剩文字，体验断层

友链最常出问题的地方，其实是 rel 属性漏写、href 协议缺失、以及本地预览时双击打开 file:// 协议导致跨域或相对路径失效——部署到真实 HTTP(S) 服务后反而正常，这点容易误判。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！