<footer> 标签语义化表示页脚区域，应包含版权信息、联系方式及社交媒体导航链接；后者须用 <nav> 包裹 <ul>，每项为带 aria-label 和 rel="noopener noreferrer" 的 <a>，配合 Flex 布局实现横排与无障碍交互。
<footer> 标签在 HTML5 中语义化地表示页面或区块的**页脚区域**，适合放置版权信息、联系方式、导航链接，也包括社交媒体图标链接区块。关键在于结构清晰、语义正确、可访问性强。
用无序列表组织社交图标链接
把社交媒体图标当作一组导航链接处理，最符合语义的方式是用 <ul> 包裹每个 <li>，每个 <li> 内放一个带 href 的 <a>。图标可用 SVG、<img> 或字体图标（如 Font Awesome）实现。
- 避免直接用
<div>堆砌图标，会丢失导航语义 - 为每个
<a>添加aria-label（例如aria-label="关注我们的微博"），提升屏幕阅读器体验 - 链接目标建议加
rel="noopener noreferrer"（尤其外链），保障安全
嵌入 footer 的标准结构示例
以下是一个简洁、语义明确的写法：
<p>© 2024 Your Site. All rights reserved.</p>
<nav aria-label="社交媒体">
<ul>
<li><a href="https://weibo.com/youraccount" aria-label="微博"><svg>...</svg></a></li>
<li><a href="https://github.com/yourname" aria-label="GitHub"><svg>...</svg></a></li>
<li><a href="https://linkedin.com/in/yourprofile" aria-label="领英"><svg>...</svg></a></li>
</ul>
</nav>
</footer>
配合 CSS 实现横向排列与样式
默认 <ul> 是竖排，用 CSS 改为横排即可：
立即学习“前端免费学习笔记（深入）”；
- 给
footer nav ul设置display: flex或display: inline-flex - 用
gap控制图标间距，比margin更简洁 - 为图标链接设置统一尺寸（如
width: 36px; height: 36px;）并居中对齐 - 添加
:hover效果时，确保焦点态（:focus-visible）同样可见，满足无障碍要求
注意事项：别踩这些坑
常见误用包括：
- 把整个 footer 当作“仅放版权”的容器，忽略其承载辅助导航的能力
- 图标用
<img>但没写alt=""（纯装饰图）或错误的alt（如只写“图标”） - 未包裹在
<nav>中——虽然合法，但加上<nav>和aria-label能更好表达意图 - 多个 footer 混用（如主页面一个，
<article>内又一个），需确认是否真需要文章级页脚
