页脚友情链接应使用语义化HTML结构：用<footer>包裹，内部用<section aria-label="友情链接">或<nav>明确意图，链接列表必须用<ul><li><a>嵌套，并添加rel="nofollow noopener"、aria-label或<h3>标题，备案信息须独立放置且不可混排。
页脚友情链接的HTML结构怎么写才不踩语义坑
直接用 <div> 套一堆 <a> 是最常见错误——搜索引擎和屏幕阅读器根本不知道这是“友情链接”。真正合规的做法是用 <footer> 包裹，内部用 <nav> 或 <section> 明确标注导航意图，链接列表必须套在 <ul> 里，每个友链用 <li> 包裹。
示例结构：
<footer>
<section aria-label="友情链接">
<h3>友情链接</h3>
<ul>
<li><a href="https://example.com" rel="nofollow noopener">示例站点</a></li>
<li><a href="https://another.org" rel="nofollow noopener">另一个站点</a></li>
</ul>
</section>
</footer>-
rel="nofollow noopener"必加：防止权重传递，同时避免新标签页中window.opener安全风险 - 不要省略
aria-label或<h3>，否则无障碍访问会丢失上下文 - 避免把多个不同性质的链接（比如备案号、联系方式）硬塞进同一个
<ul>—— 它们不属于同一逻辑组
如何让友情链接在移动端自动换行又不破坏布局
纯靠 float 或 display: inline-block 在小屏上极易溢出或折行错位。现代方案是用 display: flex 配合 flex-wrap: wrap，再限制单个链接最大宽度。
关键CSS片段：
立即学习“前端免费学习笔记（深入）”；
footer ul {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 0;
margin: 0;
}
footer li {
list-style: none;
flex: 1 1 calc(33.333% - 1rem); /* 一行最多3个，留gap空间 */
min-width: 120px;
}
footer a {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.25rem 0.5rem;
}- 不用
width: 33%而用flex-basis计算，避免因gap导致总宽超限 -
min-width设为 120px 是底线——再小文字就挤成“……”，失去可读性 - 千万别对
<li>设固定高度，不同字体渲染下基线差异会让对齐发飘
友情链接需要后端动态生成？静态HTML也能应对变化
如果只是几十个固定链接，真没必要上接口。用 HTML 注释标记区块边界，配合简单脚本就能批量更新。
例如在页脚预留：
<!-- START-FRIENDLY-LINKS --> <li><a href="...">...</a></li> <!-- END-FRIENDLY-LINKS -->
- 用 Python 或 Node.js 写个 10 行脚本，读取 JSON 链接列表，替换注释间内容，再写回 HTML 文件
- GitHub Pages 或 Vercel 构建时自动执行该脚本，比开个 API 路由更轻量、更安全
- 注意保留原始注释——下次人工编辑时能快速定位，别让脚本删掉它们
备案号和公安备案图标能不能和友情链接混排
不能。备案信息属于法定披露内容，语义和用途与友情链接完全不同。混在一起既违反《非经营性互联网信息服务备案管理办法》，也会让爬虫误判链接关系。
- 备案号必须独立放在
<footer>底部，通常用<p class="copyright">包裹，且需带真实备案号链接（如https://beian.miit.gov.cn） - 公安备案图标应单独用
<div role="link">包裹，href指向公安部备案查询页，不可用<a>直接套图标（缺少文本替代） - 友情链接区域和备案区之间至少保留 1em 垂直间距，视觉上必须有明确分隔
最易被忽略的是：很多开发者把公安备案图标做成背景图，但 screen reader 无法读取——必须用 <img src="..." alt="京公网安备 XXXXXX 号">，且 alt 文本要含完整编号。
