HTML5用<footer>标签添加页脚，内含版权信息与联系方式；可嵌套<address>增强语义，配合mailto/tel链接；支持内联样式或CSS类实现居中、间距及复用。
如果您希望在网页底部添加包含版权信息和联系方式的页脚区域，HTML5 提供了语义化的 <footer> 标签来实现这一目的。以下是具体操作步骤：
一、使用 <footer> 标签包裹页脚内容
HTML5 的 <footer> 元素用于定义文档或章节的页脚，通常包含版权说明、作者信息、联系方式等。它具有明确的语义意义，有利于 SEO 和屏幕阅读器识别。
1、在 HTML 文档的主体内容结束前（即 </main> 或 </section> 之后、</body> 之前），插入 <footer></footer> 标签对。
2、在 <footer> 标签内部，输入版权年份、公司或作者名称，例如：© 2024 示例网站。
立即学习“前端免费学习笔记（深入）”；
3、在同一 <footer> 内，添加联系邮箱或电话，格式为：邮箱：contact@example.com 或 电话：010-12345678。
二、嵌套地址元素增强语义
当页脚中包含物理地址、电子邮件或电话号码时，可使用 <address> 标签进行包裹，以表明其为联系信息，提升结构化语义。
1、在 <footer> 内部添加 <address></address> 标签。
2、将联系邮箱写为超链接形式：<a href="mailto:contact@example.com">contact@example.com</a>。
3、将联系电话写为可点击拨号链接（适用于移动设备）：<a href="tel:+861012345678">010-12345678</a>。
三、添加简单内联样式控制布局
为避免页脚内容挤在一起或默认居左显示，可通过内联 style 属性快速设置基础样式，确保文字居中、间距合理。
1、为 <footer> 添加 style="text-align: center; padding: 1rem 0; background-color: #f5f5f5;"，使其水平居中并带背景与上下内边距。
2、在 <address> 标签上添加 style="margin: 0;"，消除浏览器默认的上下外边距。
3、如需让版权与联系方式分行显示，可在两者之间插入 <br>（注意：此处为唯一允许使用 <br> 的情形，因其属于纯视觉换行且无语义，但仅限于同一段文本内的自然分隔）。
四、配合 CSS 类实现复用性
若多个页面共用相同页脚样式，应避免重复书写内联样式，转而使用 class 属性配合外部或内部 CSS 定义统一规则。
1、为 <footer> 添加 class="site-footer"。
2、在 <head> 中的 <style> 标签内，定义：.site-footer { text-align: center; padding: 1rem 0; font-size: 0.9rem; color: #666; }。
3、为其中的链接设置统一颜色与下划线状态：.site-footer a { color: #333; text-decoration: none; }。
