footer标签是html5中定义页面或区块底部内容的语义化元素，适用于版权信息、作者详情、法律链接等，可嵌套于body、article或section内，提升可访问性与seo效果。
footer 标签是 HTML5 中专用于定义页面或区块底部内容的语义化元素，适合放置作者信息、版权说明、联系方式及法律条款链接等。它不只限于整个页面底部，也可用在 article 或 section 内部，表示该部分内容的结尾信息。
基本结构：页面级 footer
放在 底部的 footer 通常涵盖全站通用信息：
<footer><p>© 2024 示例网站。保留所有权利。</p>
<p>作者：张三 | 邮箱：contact@example.com</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>
<a href="/privacy">隐私政策</a> |
<a href="/terms">服务条款</a> |
<a href="/cookies">Cookie 使用声明</a>
</p>
</footer>
语义清晰：区分层级与范围
若页面含多篇文章，每篇可自带 footer，仅归属该文章：
- 页面
<footer></footer>：放全站版权与通用法律链接 - 文章
<article><footer></footer></article>：放本文作者、发布日期、原文链接等 - 避免把导航菜单或无关广告塞进
footer，破坏语义意图
增强可访问性与 SEO 的小技巧
搜索引擎和读屏软件会识别 footer 的语义角色，合理使用有助于理解页面结构：
- 用
<address></address>包裹联系信息（仅限直接作者/责任方，非公司客服） - 法律链接建议使用有意义的
href和清晰的链接文字，如不要写“点击这里”，而写“查看《用户协议》” - 可添加
aria-label（如aria-label="网站底部法律与版权信息"）进一步明确用途
样式与布局提示
footer 默认为块级元素，常见做法包括：
- 加背景色、内边距，与主内容区视觉分离
- 文字居中或左右对齐，链接用浅色并保持足够对比度
- 响应式设计中，小屏幕下可将多列链接转为垂直堆叠
- 无需额外
div包裹——footer本身已具备容器语义
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
