HTML网页制作怎么添加友情链接？页脚底部代码编写-html教程-PHP中文网

页脚友情链接应使用语义化HTML结构：用包裹，内部用明确导航意图，链接列表必须用嵌套，每个链接加rel="noopener noreferrer"，备案信息须独立放置。

html网页制作怎么添加友情链接？页脚底部代码编写

友情链接放在页脚的常见 HTML 结构

友情链接本质就是一组指向外部站点的链接，放在页脚（

或

）里最合理。但直接堆砌链接会显得杂乱，建议用语义化标签包裹：用  表明这是导航区域，用 / 列表组织，既利于 SEO，也方便后续加样式。典型结构如下：
<footer><nav aria-label="友情链接"><h3>友情链接</h3>
    <ul>
<li><a href="https://example1.com" rel="noopener noreferrer">示例站点一</a></li>
      <li><a href="https://example2.org" rel="noopener noreferrer">示例站点二</a></li>
    </ul></nav></footer>
为什么必须加 rel="noopener noreferrer"

不加这个属性，点击友情链接打开新窗口（target="_blank"）时，新页面能通过 window.opener 访问原页面的 window 对象——这存在安全风险（比如被恶意站点篡改你的页面），也会影响性能（两个页面共享同一个进程）。
所以只要用了 target="_blank"，就应同步加上：


rel="noopener"：切断新页面对原页面的引用（必备）

rel="noreferrer"：额外阻止 Referer 头发送（可选，但推荐）

合起来写成 rel="noopener noreferrer" 是当前最佳实践。
页脚友情链接的 CSS 布局建议
纯 HTML 放进去后默认是竖排列表，多数网站需要横向排列或网格布局。用 CSS 的 display: flex 最稳妥，兼容性好且控制灵活：

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载
												
											
										
footer nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
footer nav li {
  margin-right: 1rem;
}
footer nav a {
  color: #666;
  text-decoration: none;
}
footer nav a:hover {
  text-decoration: underline;
}
注意点：

去掉默认 list-style 和 margin/padding，避免意外空白

flex-wrap: wrap 确保在小屏幕上自动换行
别用 float 布局——现代项目中已过时，响应式支持差

友情链接动态加载或维护的现实问题
如果友情链接数量多、更新频繁（比如几十个），硬编码在 HTML 里会很难维护。这时要考虑：

用 JavaScript 动态插入：把链接数据存在 JSON 文件或数组里，用 document.createElement 渲染，但注意 SEO 友好性会下降
服务端渲染：PHP/Node.js 等读取配置文件生成 HTML，更可控
CMS 管理：WordPress 等平台有专门的“友情链接”插件或自定义字段

静态小站直接写死没问题；但一旦超过 5–8 个链接，就要开始想怎么避免每次改一个链接都得打开 HTML 文件搜半天了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！