友情链接模块应放在 中，因其属辅助导航，符合 HTML5 语义规范且利于 SEO；必要属性包括 href、title、rel="noopener noreferrer" 和完整外链 URL；CSS 需重置 ul 默认样式、移除下划线并注意伪元素交互。
友情链接模块该放在 HTML 的哪个位置？
友情链接本质是普通超链接集合，语义上属于页面的辅助导航或资源推荐，不是主内容。放在 <footer></footer> 最合理，既符合 HTML5 语义规范，又避免干扰首屏渲染和 SEO 主体内容。少数情况（如博客侧边栏）可放 <aside></aside>，但不要塞进 <header></header> 或正文中间——会影响可访问性和爬虫判断。
- 确保链接容器有明确语义：用
<nav aria-label="友情链接"></nav>包裹，提升屏幕阅读器识别率 - 每个链接必须带
rel="noopener noreferrer"（尤其外链），防止安全漏洞和新标签页中 window.opener 泄露 - 避免用
target="_blank"却不加rel，Chrome 会报Unsafe attempt to use 'window.opener'警告
纯 HTML 实现友情链接，要写哪些必要属性？
不需要 JS 或框架，几行 HTML 就能跑起来。关键不是“怎么写”，而是“怎么写才不翻车”：
- 每个
<a></a>必须有href，空值或#会误导爬虫和用户 - 建议加
title属性，鼠标悬停提示目标站名，比如title="Vue 官方文档" - 外链域名要写全（
<a href="https://www.php.cn/link/d5e95a3c9f187c3d683594cce22fc4b0">https://www.php.cn/link/d5e95a3c9f187c3d683594cce22fc4b0</a>），别用相对路径，否则点击后 404 - 如果链接失效率高，可加
class="link-external"方便后续用 CSS 标出图标或加 hover 提示
<nav aria-label="友情链接">
<ul>
<li><a href="https://www.php.cn/link/d5e95a3c9f187c3d683594cce22fc4b0" title="Vue 官方文档" rel="noopener noreferrer" target="_blank">Vue.js</a></li>
<li><a href="https://react.dev" title="React 官方文档" rel="noopener noreferrer" target="_blank">React</a></li>
</ul>
</nav>用 CSS 控制友情链接样式时最容易忽略什么？
默认 <ul></ul> 有 margin 和 list-style，不重置会和周围布局打架：
- 必须清掉
ul的默认内外边距：margin: 0; padding: 0; - 用
display: flex; flex-wrap: wrap;替代浮动或 inline-block，响应式更稳 - 给
a加text-decoration: none;，否则下划线在深色背景上极难看清 - 外链建议加 SVG 图标（用
::after伪元素），但得设pointer-events: none;，否则图标区域点不中链接
要不要自动检测链接是否有效？
手动维护是常态，自动检测反而容易踩坑：
立即学习“前端免费学习笔记（深入）”；
- 浏览器同源策略禁止前端 JS 直接
fetch外链状态，会触发 CORS 错误 - 后端做健康检查需额外服务，对静态
index.html不现实 - 折中方案：用 GitHub Action 定期跑
curl -I检查 HTTP 状态码，失败时发 PR 提醒，脚本里直接调curl -s -o /dev/null -w "%{http_code}" <a href="https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635">https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635</a>
友情链接本身很简单，真正花时间的是持续核对链接有效性、更新 rel 属性、适配新浏览器策略——这些没法靠一次写完就一劳永逸。
