必须用<ul>包裹页脚友情链接，因其语义清晰、利于SEO和屏幕阅读器识别，且支持li:first-child等精准样式控制；flex布局需设flex-wrap:wrap并用flex-basis替代width；移动端断点设为768px更合理；target="_blank"须配rel="noopener noreferrer"防安全风险。
直接用 <a> 标签平铺在 <footer> 里，看似快，但后续加分类、调样式、适配手机时会反复踩坑——结构不立住，CSS 再怎么写都是补丁。
为什么必须用 <ul> 包友情链接
语义和可维护性都卡在这一步：<ul> 明确告诉浏览器“这是一组并列链接”，屏幕阅读器能读出“列表，共 5 项”，SEO 也更容易识别导航意图。平铺写 <a> 看似省事，但后续加标题、调首尾间距、批量改颜色全得靠 hack。
- 每个链接必须套在
<li>里，否则li:first-child和li:last-child这类精准控制失效 - 想在“合作伙伴”前加个
<h3>？直接放<ul>外面就行，结构干净不嵌套 - 别用
<nav>套页脚链接：它专指主导航，页脚属于辅助引用，<div class="footer-links">更轻量可控
display: flex 必须配 flex-wrap: wrap
很多人设了 display: flex 却发现三列链接在手机上横向滚动——因为默认 flex-wrap: nowrap，子项死活不换行。不显式写 flex-wrap: wrap，后面所有 flex-basis 或 width 都白搭。
- 用
flex-basis: 30%比width: 33.333%更稳：Flex 容器会自动分配剩余间隙，避免四舍五入导致最后一列掉行 -
gap: 2rem是标准间距方案，比margin更可靠，旧版 Safari 对后者支持不一致 - 别在 Flex 容器里混用
float或inline-block，动态插入内容时容易渲染错乱
移动端断点设 @media (max-width: 768px)
现在主流手机横屏宽度普遍超 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 已实际拦截。
-
rel="noopener"切断opener引用，防止跳转劫持 -
rel="noreferrer"避免 Referer 泄露当前 URL（比如含用户 ID 的路径） - 不要只写
rel="noopener"：旧版 Safari 对单值支持不稳定，双写最稳妥
真正麻烦的不是写几行 HTML，而是结构没定准就急着加动画、加图标、加后台管理——等哪天要加“已失效链接灰显”或“按更新时间排序”，你才会发现当初少套一个 <ul>，代价远比多敲十个字高得多。
