友情链接必须用 包裹且每个链接必须嵌套在 中，同时 target="_blank" 必须配 rel="noopener noreferrer"，href 需为完整 https 地址，推荐语义化包裹如 并抽离为独立 html 片段。
友情链接必须用 <ul></ul> 包裹，不是 <div> 或平铺 <code>@#@#@#@#@#@#@#@#@#@0 看似省事，但会导致 SEO 识别失败、屏幕阅读器读不出“这是链接列表”、后续加样式或响应式时反复 patch。浏览器和爬虫靠语义判断内容意图，<ul></ul> 明确表达“并列关系的一组资源”，<li> 是唯一合法子元素。
常见错误现象：
– 列表项首尾间距失控（li:first-child / li:last-child 失效）
– 想让第 3 个链接变色，结果选不到目标元素
– 手机端横向滚动，因为结构没撑起 flex 容器
- 正确结构必须是
<ul><li><a>...</a></li></ul>，不能跳过<li> - 外层推荐加
<nav aria-label="友情链接"></nav>，提升可访问性，但页脚场景可用<div class="footer-links"> 更轻量 <li>别用 <code><ol></ol>：友链无顺序要求，<ol></ol>会触发编号逻辑，干扰语义 - 绝对不要只写
target="_blank"，哪怕测试时看起来“能点开” - href 必须是完整协议地址（如
https://vuejs.org），不能是/link或//example.com，否则点击后 404 - title 属性建议写，值为对方站名（如
title="Vue 官方文档"），不堆关键词，避免被判定 spam - 侧边栏推荐用 Flex 布局：主容器
display: flex，侧栏设min-width: 220px，主内容用flex: 1 - 页脚推荐
display: flex; flex-wrap: wrap; gap: 1.5rem，小屏下切flex-direction: column - 移动端断点统一用
@media (max-width: 768px)，比 480px 更合理（iPad 竖屏宽度约 768px） - 别在友链容器里混用
float和inline-block，动态插入新链接时渲染极易出错 - 交换前先手动测一遍对方链接：能否打开、是否 HTTPS、首页是否正常加载
- 上线后用 Lighthouse 跑一次，重点看 “Links have descriptive text” 和 “No unsecured iframes” 两项
- 别信“后台一键添加”：WordPress 插件或建站系统生成的代码，90% 缺少
rel和语义包裹
rel="noopener noreferrer" 不是可选项，是安全底线
只要链接带 target="_blank"，就必须配 rel="noopener noreferrer"。Chrome 和 Firefox 已实际拦截不合规行为，控制台报错 Unsafe attempt to use 'window.opener' 就是它。
为什么必须双写：
– rel="noopener" 切断新页面对原页面 window.opener 的访问权，防跳转劫持
– rel="noreferrer" 阻止 Referer 泄露当前 URL（比如含用户 token 的路径）
– 单写 noopener 在旧版 Safari 上支持不稳定，双写兼容性最稳
侧边栏 vs 页脚：结构和 CSS 处理逻辑完全不同
侧边栏友链本质是辅助导航，页脚友链是资源引用——两者语义不同，CSS 控制方式也得跟着变。
侧边栏典型问题：
– 用 float: right 导致主内容塌陷
– 写死 width: 240px，手机上占满全屏还换行错乱
– 没设 min-width，窄屏下文字挤成一团
交换友情链接时，对方给的代码你不能直接抄
别人发来的“友链代码”常含隐患：缺 rel、用相对路径、title 堆词、甚至带内联 JS。你得自己重写一遍，而不是复制粘贴。
检查清单：
– href 是否以 https:// 开头？不是就补全
– 是否有 rel="noopener noreferrer"？没有就加上
– target="_blank" 是否存在？存在就必须配 rel
– title 是否干净？删掉“SEO 关键词排名前十”这类描述
– 是否套在 <li> 里？没套就补上
index.html，后续 CMS 或静态站点生成器升级时，这个区块极可能被覆盖或遗漏。建议把它抽成独立 HTML 片段（如 friends.html），再用构建脚本注入，而不是硬编码在主文件里。
