应使用HTML5的<footer>语义化标签在</body>前添加页脚，内部用<p>包含版权信息（如©2024公司名称。保留所有权利。）和联系方式（如邮箱：contact@example.com）。
如果您希望在网页底部添加包含版权信息和联系方式的页脚区域，则可以使用 HTML5 的 <footer> 语义化标签来实现。以下是具体操作步骤：
一、基础 footer 标签结构
HTML5 中的 <footer> 标签用于定义文档或章节的页脚，通常包含版权说明、作者信息、相关链接等。它应放置在 <body> 内部的最底部位置，或嵌套于 <article>、<section> 等元素中作为局部页脚。
1、在 </body> 标签之前，插入 <footer></footer> 开闭标签。
2、在 <footer> 标签内部，输入版权文字与联系方式，例如：<p>© 2024 公司名称。保留所有权利。</p><p>邮箱：contact@example.com/p>。
立即学习“前端免费学习笔记（深入）”；
3、保存 HTML 文件并在浏览器中刷新查看效果。
二、添加样式美化页脚
默认情况下 <footer> 无边框、无背景、无内边距，需通过内联 style 或外部 CSS 设置视觉样式以增强可读性与布局稳定性。
1、为 <footer> 添加 background-color 属性，例如：style="background-color: #333;"。
2、设置 text-align:center 使文字居中对齐。
3、添加 padding: 15px 0; 保证上下内边距，避免文字紧贴边缘。
4、将字体颜色设为浅色，例如：color: #fff; 以适配深色背景。
三、嵌入联系信息图标与超链接
为提升专业性与可用性，可在页脚中引入图标（如 Font Awesome）和可点击的联系方式链接，使用户能快速发送邮件或拨打电话。
1、在 <head> 中引入 Font Awesome CDN 链接：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">。
2、在 <footer> 内添加带图标的联系行：<p><i class="fas fa-envelope"></i> <a href="mailto:info@site.com">info@site.com</a></p>。
3、添加电话图标行：<p><i class="fas fa-phone"></i> <a href="tel:+8613800138000">+86 138-0013-8000</a></p>。
4、确保所有 href 和 tel 协议值符合标准格式，避免链接失效。
四、响应式页脚布局
为适配移动设备，页脚内容需在小屏幕上自动换行并保持合理间距，避免文字溢出或重叠。
1、为 <footer> 设置 max-width: 1200px; 并配合 margin: 0 auto; 实现居中限制宽度。
2、使用 @media 查询，在屏幕宽度小于 768px 时将联系信息垂直堆叠：@media (max-width: 768px) { footer p { margin: 8px 0; } }。
3、为图标添加 font-size: 1rem; 并在小屏下设为 1.2rem，提升触控友好性。
4、移除固定高度设定，允许页脚根据内容自然撑开。
五、SEO 友好的页脚内容组织
搜索引擎会抓取页脚文本，合理组织结构有助于提升站点权威性与本地搜索可见度，尤其对版权年份与公司名称的呈现有明确要求。
1、版权符号必须使用 HTML 实体 © 或 ©，不可用普通字母 c 加括号代替。
2、年份建议使用动态 JavaScript 插入（如 <script>document.write(new Date().getFullYear())</script>），但静态页面中应手动更新为当前年份。
3、公司全称需与工商注册名称一致，并置于版权文字起始位置，例如：© 2024 北京某某科技有限公司。
4、避免在页脚堆砌无关关键词或隐藏链接，防止被判定为黑帽 SEO 行为。
