页脚友情链接应使用语义化HTML结构：用包裹，内部用明确导航意图，链接列表必须用嵌套，每个链接加rel="noopener noreferrer"，备案信息须独立放置。
友情链接放在页脚的常见 HTML 结构
友情链接本质就是一组指向外部站点的 <a></a> 链接，放在页脚（<footer></footer> 或 <div id="footer">）里最合理。但直接堆砌链接会显得杂乱，建议用语义化标签包裹：用 <code><nav></nav> 表明这是导航区域，用 <ul></ul>/<li> 列表组织，既利于 SEO，也方便后续加样式。
典型结构如下：
<footer>
<nav aria-label="友情链接">
<h3>友情链接</h3>
<ul>
<li><a href="https://example1.com" rel="noopener noreferrer">示例站点一</a></li>
<li><a href="https://example2.org" rel="noopener noreferrer">示例站点二</a></li>
</ul>
</nav>
</footer>
为什么必须加 rel="noopener noreferrer"
不加这个属性，点击友情链接打开新窗口（target="_blank"）时，新页面能通过 window.opener 访问原页面的 window 对象——这存在安全风险（比如被恶意站点篡改你的页面），也会影响性能（两个页面共享同一个进程）。
所以只要用了 target="_blank"，就应同步加上：
立即学习“前端免费学习笔记（深入）”；
-
rel="noopener"：切断新页面对原页面的引用（必备） -
rel="noreferrer"：额外阻止 Referer 头发送（可选，但推荐）
合起来写成 rel="noopener noreferrer" 是当前最佳实践。
页脚友情链接的 CSS 布局建议
纯 HTML 放进去后默认是竖排列表，多数网站需要横向排列或网格布局。用 CSS 的 display: flex 最稳妥，兼容性好且控制灵活：
footer nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
footer nav li {
margin-right: 1rem;
}
footer nav a {
color: #666;
text-decoration: none;
}
footer nav a:hover {
text-decoration: underline;
}
注意点：
- 去掉默认
list-style和margin/padding，避免意外空白 -
flex-wrap: wrap确保在小屏幕上自动换行 - 别用
float布局——现代项目中已过时，响应式支持差
友情链接动态加载或维护的现实问题
如果友情链接数量多、更新频繁（比如几十个），硬编码在 HTML 里会很难维护。这时要考虑：
- 用 JavaScript 动态插入：把链接数据存在 JSON 文件或数组里，用
document.createElement渲染，但注意 SEO 友好性会下降 - 服务端渲染：PHP/Node.js 等读取配置文件生成 HTML，更可控
- CMS 管理：WordPress 等平台有专门的“友情链接”插件或自定义字段
静态小站直接写死没问题；但一旦超过 5–8 个链接，就要开始想怎么避免每次改一个链接都得打开 HTML 文件搜半天了。
