友情链接必须用包裹，因其提供语义化分组、支持无障碍识别、便于批量样式控制；每个链接须嵌套在中以启用:first-child/:last-child精准控制；flex布局需设flex-wrap:wrap，移动端断点应为768px；target="_blank"必须配rel="noopener noreferrer"确保安全。
友情链接必须用 ul 包裹，不是“可选”而是结构底线
直接在 footer 里平铺一堆 a 标签，看似省事，实则埋下三类隐患：屏幕阅读器读不出“这是个链接列表”，键盘用户 Tab 时焦点跳转无序，后续加标题、调首尾间距、批量改颜色全得靠 CSS hack 硬顶。每个链接必须套在 li 里——否则 li:first-child 和 li:last-child 这类精准控制失效，连给第一项加左间距都得额外写 class。
flex-wrap: wrap 不写等于没设 flex 布局
很多人写了 display: flex 却发现三列链接在手机上横向滚动或挤成一行，根源就是漏了 flex-wrap: wrap。Flex 默认是 nowrap，子项宁可溢出也不换行。一旦加上这句，flex-basis 才真正起作用：
-
flex-basis: 30%比width: 33.333%更稳：Flex 容器会自动分配剩余间隙，避免四舍五入导致最后一列掉行 - 配
gap: 2rem控制列间距，比用margin可靠——旧版 Safari 对后者支持不一致 - 别在 Flex 容器里混用
float或inline-block，动态插入内容时容易渲染错乱
移动端断点设 @media (max-width: 768px) 而不是 480px
现在主流手机横屏宽度普遍超 480px，硬切 480px 会导致 iPad 竖屏仍显示多列、文字过小难点击。768px 是更实际的分水岭：
- 小屏下设
flex-direction: column，所有列垂直堆叠，符合手指操作习惯 - 此时把每列
flex-basis改成100%，确保单列占满全宽，不留空白 - 顺手调小
font-size: 0.875rem和padding，避免撑高视口影响首屏体验
target="_blank" 必须配 rel="noopener noreferrer"
只写 target="_blank" 会让新页面拿到 window.opener 权限，恶意站点可能执行 opener.location = "https://phishing.site" 劫持原页面——这不是理论漏洞，Chrome/Firefox 已实际拦截过此类攻击。这个属性组合不是“建议加”，而是上线前必须检查的硬性安全项。
复杂点在于：它必须同时出现在每个带 target="_blank" 的 a 标签上，漏一个就存在风险；且不能只写 rel="noopener"，noreferrer 也得带上，否则 referrer 信息仍可能泄露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
