落款应优先使用语义化 <footer> 标签，因其明确标识页脚区域，提升SEO、无障碍访问及自动化工具识别；单段署名则宜用 <p class="byline"> 更轻量准确。

落款用 <footer> 还是 <div>？语义和渲染效果都得看

直接说结论：落款不是装饰，而是内容结构的一部分。用 <footer> 更合理，但别以为套上标签就自动“优雅”——浏览器默认不给它居中、缩进或字体微调，所有排版还得你手动控制。

常见错误是把落款写成 <div class="sign">张三</div>，看着简单，实际语义丢失，对屏幕阅读器不友好，后续加响应式或打印样式也容易漏掉适配。

• <footer> 适合页面底部整体落款（如版权声明 + 作者 + 时间），语义清晰，SEO 和可访问性都加分
• 单段文字落款（比如文章末尾的“撰文｜李四”）建议用 <p> 套 class="byline"，比硬套 <footer> 更轻量准确
• 千万别在 <footer> 里塞浮动、绝对定位之类破坏文档流的操作——它本该是自然流式容器

怎么让“撰文｜王五”这行字既右对齐又保持呼吸感？

纯靠 text-align: right 会贴边太死，视觉上像被墙挤扁了。关键在留白节奏：左右内边距 + 行高 + 字体粗细组合调整，而不是只调对齐方式。

实操建议：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 用 padding-right: 2em 替代 margin-right，避免影响父容器宽度计算
• 设 line-height: 1.6（不是 1 或 2），让文字上下有自然间距，尤其多行落款时不易粘连
• 如果落款含符号（如“｜”、“•”、“—”），统一用中文全角符号，避免英文半角导致 baseline 错位
• 示例：

  <p class="byline">撰文｜王五　｜　2024年9月</p>

  注意中文空格（全角）比   更可控，且不会因 CSS white-space 设置意外折行

移动端一缩放，落款就换行错乱？这是 font-size 没设好

很多人设 font-size: 14px，在 iPhone 上一放大，文字撑破容器，或者“｜”符号跑到下一行开头。根本问题不在媒体查询，而在基础字号单位选错了。

• 放弃固定像素值，改用 font-size: 0.875rem（即 14px / 16px），以根字体为基准，缩放时同步缩放
• 配合 max-width: 60ch 控制落款容器宽度——ch 单位按字符宽度算，比 em 或 % 更稳定，防长名字溢出
• 避免用 vw（如 font-size: 2vw），小屏下字号可能小到看不清，大屏又过大
• 测试时真机缩放，别只信 Chrome DevTools 的模拟——iOS Safari 对 rem 缩放更敏感

想加个下划线或细线分隔，为什么 border-bottom 总是压住文字？

因为 border-bottom 默认画在元素底边框线上，而文字基线（baseline）离底边还有距离，视觉上就像线“卡”在字肚子上。这不是 bug，是盒模型的正常表现。

• 解决方法不是调 line-height 硬扛，而是用 padding-bottom 把文字“托起来”，再画 border —— 比如 padding-bottom: 0.2em; border-bottom: 1px solid #ccc;
• 如果只要装饰线不想要完整边框，用伪元素更干净：

  .byline::after { content: ""; display: block; width: 3em; height: 1px; background: #999; margin: 0.5em auto 0; }

• 注意：加了 border 或伪元素后，height 不再等于文字行高，若父容器有高度限制（如 min-height），需同步调整

真正难的不是写出这段 HTML，而是判断哪处该用语义标签、哪处该调单位、哪处要绕开浏览器默认行为。落款看着小，其实是页面结构、排版逻辑和响应式细节的交汇点。