最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
如何在index.html里添加友链
时间：2026-07-27 16:46:59 编辑：袖梨 来源：一聚教程网
友情链接HTML代码应直接写在index.html的<body>内容末尾、</body>之前，推荐用<section id="friends">等语义化容器包裹，内含带rel="noopener noreferrer"的<a>标签，不可置于<head>或<script>中。
友链 HTML 代码直接写在 index.html 的哪个位置？
友链本质就是一组带文字和跳转链接的 <a> 标签，通常放在页面中相对固定、语义清晰的位置，比如页脚（<footer>）或独立的「友情链接」区块。不要塞进 <head> 或 <script> 里——那不会渲染出可点击的链接。
- 推荐插在
<body>内容末尾、</body>之前，用语义化容器包裹，例如：<section id="friends"><h3>友情链接</h3><p><a href="<a href="https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635">https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635</a>" rel="noopener noreferrer">示例站点</a></p><p><a href="<a href="https://www.php.cn/link/9838dd08963f61611712f456f5bdd255">https://www.php.cn/link/9838dd08963f61611712f456f5bdd255</a>" rel="noopener noreferrer">另一个伙伴</a></p></section>
-
rel="noopener noreferrer"必加：防止新窗口打开时泄漏window.opener权限，是安全底线 - 不要用
target="_blank"单独出现，否则存在安全隐患（尤其在旧版浏览器中）
要不要用 JavaScript 动态加载友链？
一般不用。除非你有明确需求：比如从 JSON 文件批量读取、按条件过滤、或避免 SEO 爬虫看到全部链接。
- 静态写死更简单可靠，搜索引擎能直接抓取，加载无延迟
- 动态加载需额外处理：JSON 路径要对（如
./friends.json），fetch 后得手动拼 DOM，还要考虑加载失败 fallback - 如果真要用 JS，别用
document.write()—— 它会清空整个页面；改用element.innerHTML或append()
友链被爬虫收录不了？检查这三点
常见原因不是“加了没用”，而是写法或环境挡住了爬虫：
-
href值必须是完整协议地址（https://或http://），不能是/blog这样的相对路径（否则爬虫可能解析成当前域名下的子路径） - 页面本身没被 robots.txt 屏蔽，且
index.html可公开访问（比如 GitHub Pages 默认允许，但某些私有仓库设置可能限制） - 没在
<meta name="robots" content="noindex">—— 这个标签会让所有搜索引擎忽略该页，友链自然无效
样式难看、排版混乱怎么办？
友链默认是垂直堆叠的普通段落，想改成横向、网格或带图标，靠 CSS 就够了，无需改 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
- 给外层容器设
display: flex+flex-wrap: wrap，子<p>设margin: 0 8px就能横排 - 每个
<a>加text-decoration: none和color: #0066cc统一视觉 - 图标可用 inline SVG 或字体图标（如
<svg>...</svg>放在<a>开头），别依赖外部 CDN——否则图标不显示时只剩文字，体验断层
友链最常出问题的地方，其实是 rel 属性漏写、href 协议缺失、以及本地预览时双击打开 file:// 协议导致跨域或相对路径失效——部署到真实 HTTP(S) 服务后反而正常，这点容易误判。
相关文章
- 原神莘露的赠礼衣装限时折扣、主题任务开放 07-30
- 原神冒险助力礼包第46期限时上架 礼包内容一览 07-30
- 原神月之四神铸赋形祈愿活动介绍 07-30
- 全明星觉醒 宿舍章节通关攻略｜宿命5 4高效率速通技巧与阵容搭配 07-30
- 风之痕迹速攻阵容怎么搭配 速攻角色玩法详细介绍 07-30
- 明日方舟终末地佩丽卡赫铜装备推荐 07-30