关键在于语义正确、结构合规、布局到位：footer必须是body直接子元素且位于main之后，用flex布局（body设flex column和min-height:100vh，main设flex:1）实现粘性底部，版权文字需合法可读并兼顾可访问性。
用 <footer></footer> 标签制作底部版权区域，关键不在“写对标签”，而在于三点：语义正确、结构合规、布局到位。只写 <footer>© 2024 公司</footer> 很可能不显示在页面最底，也不被搜索引擎或读屏器准确识别。
语义和位置必须规范
<footer></footer> 是语义化标签，不是视觉定位工具。要声明**全站级版权**，它必须是 的直接子元素，且放在 <main></main>（或主体内容容器）之后、 之前。不能嵌套在 <div class="wrapper"> 或 <code><article></article> 内部——那样会被识别为局部页脚（比如某篇文章的作者信息），而非整站版权。
- ✅ 正确：
<header>...</header><main>...</main><footer>© 2024 公司</footer> - ❌ 错误：
<div class="container"><footer>...</footer></div>（失去站点级语义） - ❌ 错误：
<main><footer>...</footer></main>（变成文章页脚）
版权文字要合法且可读
单纯放 © 符号不够。W3C 推荐将版权年份与主体名称组合，并通过 rel="license" 链接到真实许可证页面，增强法律效力和结构化数据支持。字体大小不宜整体用 <small></small> 包裹——它语义上仅适用于附属短语（如“保留所有权利”），主版权信息应使用常规 <p></p>。
- 推荐写法：
<footer><p>© <script>document.write(new Date().getFullYear())</script> 公司名称。<small>保留所有权利</small></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <a href="/license.html" rel="license" hidden>查看许可协议</a></footer> - 静态年份更稳妥：若不依赖 JS，直接写
© 2024–2026 公司名称，避免脚本失效导致空白 - 避免：
<small>© 2024 公司名称。本服务最终解释权归本公司所有</small>（整段弱化，辅助技术可能跳过关键信息）
CSS 必须支撑“粘性底部”
<footer></footer> 默认只是文档流末尾的一个块，内容少时它会悬在视口中间，不会自动贴底。靠 position: fixed 是常见误区——会导致遮挡正文、打印异常、读屏器顺序错乱。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 现代推荐方案：Flexbox 布局
- 给
设置：display: flex; flex-direction: column; min-height: 100vh; - 确保存在
<main></main>（或语义等价容器），并设flex: 1;占满剩余高度 -
<footer></footer>无需额外定位，自然沉底；加text-align: center;和padding提升可读性即可 - 检查 body 是否有默认 margin（尤其用了 normalize.css 后），记得重置：
body { margin: 0; }
多行信息与响应式处理
地址、邮箱、备案号、友情链接等属于不同语义层级的内容，不能全塞进一个 <p></p> 里靠 <br> 换行（HTML5 已禁用 <br> 表达结构换行）。应分拆为多个块级元素，再用 Flex 或 Grid 控制排列。
- 例如两行版权 + 一行链接：
<footer><p>© 2024 公司</p> <p>沪ICP备12345678号</p> <p><a href="/contact">联系我们</a></p></footer> - 移动端建议用媒体查询缩小字体、增大行高，或改为竖排堆叠；避免在小屏上横向滚动
- 文字居中失效？先确认 footer 是否占满宽度（加
width: 100%;）、父元素有无max-width或margin: 0 auto干扰
