必须用HTTP服务托管HTML，因file://协议导致手机扫码拒绝加载；二维码需动态生成且目标URL为完整可访问地址；须添加viewport元标签并确保路径、视口、资源加载一致。

HTML 页面居中后生成二维码，扫码打不开？

不是二维码没生成，而是扫码跳转时路径错了——浏览器默认把 file:// 协议当本地文件处理，多数手机扫码直接拒绝加载，尤其含 css/js 的页面会白屏或报错 failed to load resource。

• 必须用 HTTP 服务托管 HTML，哪怕本地起个最小服务器（python3 -m http.server 8000）
• <img> 标签的 src 属性若写相对路径（如 ./style.css），二维码扫码后路径会以扫码设备当前 URL 为基准解析，极易 404
• 居中用的 margin: 0 auto 或 flex 没问题，但二维码本身是图片，它不“知道”页面怎么居中——你扫的是整个 HTML，不是居中后的截图

用 qrcode.js 在页面里动态生成二维码

别导出图片再上传，直接让浏览器渲染：引入库后调用 QRCode 构造函数，把目标 URL 写进 text 参数，容器元素自动塞入 <canvas> 或 <svg>。

• 确保目标 URL 是完整可访问地址，比如 https://example.com/page.html，不是 page.html
• 如果页面本身带查询参数（如 ?id=123），要手动拼进去：window.location.origin + window.location.pathname + '?id=' + id
• 避免在 DOMContentLoaded 之前初始化，否则容器 DOM 还没挂载，new QRCode(...) 会报 Cannot read property 'appendChild' of null
• 移动端扫码后白屏？检查是否用了 display: none 隐藏了二维码容器，部分扫码器不触发重绘

用 Python 脚本批量生成 HTML+二维码文件

适合做一批静态落地页（如活动单页、设备说明页），每个 HTML 文件内嵌对应二维码，全部离线可用。

• 用 qrcode 库生成图片：qrcode.make('https://...')，再用 .save() 存成 qr.png
• HTML 模板里用绝对路径引用二维码：<img src="qr.png" alt="QR">，不要用 ../ 或变量路径
• 生成脚本里注意路径拼接：用 os.path.join()，别硬拼 './' + name + '.html'，Windows 下会出错
• 生成完别直接双击打开 HTML——又回到 file:// 问题；应统一用 http://localhost:8000/xxx.html 访问

扫码后页面样式错乱或文字挤在一起？

不是二维码的问题，是 HTML 缺少响应式基础。手机扫码后浏览器按移动视口渲染，但你的 HTML 没设 <meta name="viewport">，导致缩放异常或布局崩塌。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 必须加这行：<meta name="viewport" content="width=device-width, initial-scale=1.0">
• 居中用的 max-width 和 padding 值，在小屏上可能过宽，建议加媒体查询：@media (max-width: 480px) { .container { padding: 10px; } }
• 字体单位别只用 px，混用 rem 或 em，否则缩放后文字和容器比例失调
• 二维码图片本身别设死宽高，用 width: 100%; max-width: 200px;，防拉伸变形

真正麻烦的从来不是生成二维码，而是让扫码后的环境跟开发时一致——协议、路径、视口、资源加载顺序，漏掉一个，用户扫出来就是白屏或乱码。

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