友情链接页面应使用<ul>+<li>纯语义化结构，每个链接用一个<li>包裹<a>，确保SEO友好、可访问性强；避免<div>堆砌或<table>滥用。
友情链接页面该用什么 HTML 结构
纯语义化链接列表，<ul> + <li> 是最稳妥的选择。搜索引擎和屏幕阅读器都认这个模式，比用 <div> 堆砌更可靠。
别为了“看起来整齐”强行套 <table>——它没语义，响应式难调，还容易被误读为数据表格。
- 每个友链用一个
<li>，里面只放一个<a> -
<a>的href必须是完整协议 URL（如https://example.com），避免相对路径跳转失败 - 加
rel="noopener noreferrer"：防止新窗口打开时被恶意网站篡改window.opener - 可选加
target="_blank"，但必须配rel，否则有安全风险
如何让友情链接自动适配手机屏幕
不靠 JS 检测设备，纯 CSS 流式布局就能搞定。核心是控制每行显示数量 + 文字换行容忍度。
关键不是“多好看”，而是“点得着”。小屏上按钮太挤、文字截断、点击热区过小，用户根本没法用。
立即学习“前端免费学习笔记（深入）”；
- 给
<ul>设display: flex+flex-wrap: wrap，子项<li>设flex: 1 1 120px（最小宽度约 120px） -
<a>加display: block和足够内边距（比如padding: 8px 12px），确保手指能点中 - 用
word-break: break-word防止长域名撑破容器；font-size别设死像素值，用rem或em - 别依赖
max-width+margin: auto居中整块区域——它在窄屏下可能留白过大，直接对齐左/居中均可，但保持一致
为什么本地测试时友链点击没反应
常见原因不是代码写错，而是浏览器策略或路径问题。尤其用 VS Code Live Server 或双击打开 HTML 文件时。
- 检查控制台是否报
Not allowed to navigate top frame to data URL—— 这说明你用了空href="#"或javascript:void(0)占位，删掉或补真实地址 - 如果
href是相对路径（如./blog），而你在文件系统双击打开（file://协议），浏览器会拒绝跨协议跳转，必须用本地服务器（如live-server）运行 - 确认没有 CSS 把
<a>的pointer-events设为none，也没有父级元素盖住了点击层 - 用右键“在新标签页中打开链接”测试，绕过前端 JS 干预，快速验证 URL 是否有效
要不要加友链图标（favicon）和描述文字
可以加，但别默认开启。图标需要额外 HTTP 请求，描述文字增加 DOM 体积，对首屏加载有实际影响。
如果你的友链少于 10 个、且对方站点支持 /favicon.ico，再考虑动态加载；否则纯文字链接更轻、更稳。
- 加图标就用
<link rel="icon" href="...>方式不行——那是当前页的 icon。友链图标得用<img>或 CSSbackground-image，且需提前知道 URL - 描述文字建议放在
title属性里（<a title="技术博客，分享前端实战">），hover 可见，不占布局空间 - 想自动拉取 favicon？别自己写爬虫。可用现成服务如
https://www.google.com/s2/favicons?domain=example.com&sz=16，但注意跨域和频率限制
真正麻烦的是友链状态维护：URL 失效、站点改版、证书过期……HTML 页面本身做不到自动检测，得靠人工定期核对或搭配后端服务。静态页的优势是简单，劣势也是太静态。
