友情链接HTML代码应直接写在index.html的内容末尾、之前，推荐用等语义化容器包裹，内含带rel="noopener noreferrer"的标签，不可置于或中。
友链 HTML 代码直接写在 index.html 的哪个位置？
友链本质就是一组带文字和跳转链接的 <a></a> 标签，通常放在页面中相对固定、语义清晰的位置，比如页脚（<footer></footer>）或独立的「友情链接」区块。不要塞进 或 <script></script> 里——那不会渲染出可点击的链接。
- 推荐插在
内容末尾、之前，用语义化容器包裹，例如：<section id="friends"> <h3>友情链接</h3> <p><a href="<a href="https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635">https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635</a>" rel="noopener noreferrer">示例站点</a></p> <p><a href="<a href="https://www.php.cn/link/9838dd08963f61611712f456f5bdd255">https://www.php.cn/link/9838dd08963f61611712f456f5bdd255</a>" rel="noopener noreferrer">另一个伙伴</a></p> </section>
-
rel="noopener noreferrer"必加：防止新窗口打开时泄漏window.opener权限，是安全底线 - 不要用
target="_blank"单独出现，否则存在安全隐患（尤其在旧版浏览器中）
要不要用 JavaScript 动态加载友链？
一般不用。除非你有明确需求：比如从 JSON 文件批量读取、按条件过滤、或避免 SEO 爬虫看到全部链接。
立即学习“前端免费学习笔记（深入）”；
- 静态写死更简单可靠，搜索引擎能直接抓取，加载无延迟
- 动态加载需额外处理：JSON 路径要对（如
./friends.json），fetch 后得手动拼 DOM，还要考虑加载失败 fallback - 如果真要用 JS，别用
document.write()—— 它会清空整个页面；改用element.innerHTML或append()
友链被爬虫收录不了？检查这三点
常见原因不是“加了没用”，而是写法或环境挡住了爬虫：
-
href值必须是完整协议地址（https://或http://），不能是/blog这样的相对路径（否则爬虫可能解析成当前域名下的子路径） - 页面本身没被 robots.txt 屏蔽，且
index.html可公开访问（比如 GitHub Pages 默认允许，但某些私有仓库设置可能限制） - 没在
<meta name="robots" content="noindex">—— 这个标签会让所有搜索引擎忽略该页，友链自然无效
样式难看、排版混乱怎么办？
友链默认是垂直堆叠的普通段落，想改成横向、网格或带图标，靠 CSS 就够了，无需改 HTML 结构：
- 给外层容器设
display: flex+flex-wrap: wrap，子<p></p>设margin: 0 8px就能横排 - 每个
<a></a>加text-decoration: none和color: #0066cc统一视觉 - 图标可用 inline SVG 或字体图标（如
<svg>...</svg>放在<a></a>开头），别依赖外部 CDN——否则图标不显示时只剩文字，体验断层
友链最常出问题的地方，其实是 rel 属性漏写、href 协议缺失、以及本地预览时双击打开 file:// 协议导致跨域或相对路径失效——部署到真实 HTTP(S) 服务后反而正常，这点容易误判。
