页脚多栏导航需兼顾语义、可访问性与响应式布局：用包裹，每组用+分隔，链接用；css推荐grid实现三栏→单列响应式，版权行跨全宽，禁放表单、广告等无关内容。
用 <footer></footer> 做多栏版权导航栏，关键不是“堆内容”，而是分清语义层级、视觉结构和可访问性逻辑。它不是把一堆链接横着排满就完事，而是让屏幕阅读器能听懂、手机用户能点清、爬虫能识别——同时视觉上不乱。
语义结构：先分组，再嵌套
多栏页脚 ≠ 一整行塞15个链接。应按功能或用户路径分组，每组用 <section></section> 或带标题的 <div> 包裹，并用 <code><nav></nav> 统一包裹全部导航区域：
- 用
<nav aria-label="页脚导航"></nav>包住整个多栏区域，明确告诉辅助技术这是导航区块 - 每组链接（如“产品”“支持”“公司”）用
<section></section>分隔，内部加<h3></h3>小标题（不可省略，是键盘导航锚点） - 链接列表统一用
<ul> <li>@#@#@#@#@#@#@#@#@#@0</li> <br> <li>@#@#@#@#@#@#@#@#@#@1</li> <br> </ul> <br> <br> <section><br> <h3>法律</h3> <br> <ul> <br> <li>@#@#@#@#@#@#@#@#@#@2</li> <br> <li>@#@#@#@#@#@#@#@#@#@3</li> <br> </ul> <br> </section><br> <small>© <script>document.write(new Date().getFullYear())</script> Your Company. 京ICP备12345678号</small><br> <br><h3>CSS 布局：响应式多栏，不靠 float 或 inline-block</h3> <p>推荐用 Flex 或 Grid 控制列数，移动端自动收为单列：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>桌面端：用 <code>display: grid; grid-template-columns: repeat(3, 1fr);实现三栏等宽 - 小屏适配：加媒体查询
@media (max-width: 768px) { grid-template-columns: 1fr; } -
<small></small>版权行必须单独一行，设grid-column: 1 / -1;跨全宽，避免被分栏截断 - 所有链接文字确保对比度 ≥ 4.5:1（例如深灰 #333 在白底上），小字号也需达标
不能放进去的内容：别让 footer 变成“杂物柜”
视觉在底部 ≠ 语义属于 footer。以下内容请移出：
- 页面末尾的邮件订阅表单（应归入独立
<section></section>） - 某篇文章底部的作者信息（属于该
<article></article>的内部<footer></footer>） - 社交图标若仅针对当前内容（如“分享本文”），不应混入全站 footer
- 广告横幅（即使位置在底部，也不具备页脚语义）
