友情链接应使用语义化而非，因其明确表达页脚区域的逻辑含义，但需注意仅表语义结尾，非视觉固定定位，须配合css（如flex或min-height）实现底部布局；其内不宜嵌套或，推荐用包裹更可控。
友情链接用 <footer></footer> 还是 <div class="footer">？<p>直接用语义化 <code><footer></footer> 更合理，但要注意它默认不是“粘在页面底部”的——很多人误以为放 <footer></footer> 就自动到底部，其实它只是内容区的逻辑结尾。真要“页脚固定在视口底”，得靠 CSS 控制布局流或高度计算。
常见错误：把友情链接塞进 <footer></footer> 后发现它紧贴主内容下方，页面短时悬浮在中间；页面长时又被正文撑开、位置正常——这说明没处理最小高度或 flex 布局。
- 推荐结构：
内按顺序写<main></main>+<footer></footer>，再用 CSS 让或<main></main>占满剩余高度 - 如果兼容 IE10 以下，避免用
flex: 1，改用min-height: calc(100vh - footer高度) -
<footer></footer>里别套<nav></nav>或@#@#@#@#@#@#@#@#@#@0如何让友情链接区域在所有设备上都有足够点击热区？
移动端手指点击区域至少 44×44px，但默认
<a></a>文字高度远小于此，导致点不准、误触返回。不能只靠加大font-size，那会破坏排版节奏。- 给每个链接加
padding: 12px 16px（上下留白保证热区，左右适配文字），再用line-height: 1.5控制行高 - 禁用
text-decoration: underline，改用border-bottom: 1px solid #007bff并设padding-bottom: 2px，这样下划线也参与热区计算 - 检查是否被父容器
overflow: hidden截断，特别是用了flex+min-width组合时，热区可能被裁剪
真正难的是响应式断点之间的过渡态——比如 iPad 竖屏 768×1024，既不算手机也不算桌面，得单独测
@media (min-width: 768px) and (max-width: 1024px)下的 padding 和 font-size。 - 给每个链接加
