纯HTML无法实现名片实时生成，必须用JavaScript监听oninput事件并动态更新DOM；CSS仅控制样式，不处理数据绑定；核心是建立输入与预览间的低延迟响应通道。
用纯 HTML + CSS + JavaScript 实现可交互名片生成器
不需要后端、不依赖框架，一个 index.html 文件就能跑起来——关键在表单实时绑定 + DOM 动态渲染，而不是堆砌 div 或靠截图工具“假装”生成。
为什么不能只用 HTML？必须加 JavaScript 才能“生成”
HTML 本身是静态结构，<input> 填了内容不会自动出现在名片区域；CSS 只负责样式，不处理数据流转。所谓“生成”，本质是监听输入、读取值、插入到目标容器中。
-
oninput比onchange更合适：用户每敲一个字就更新预览，避免失焦才触发 - 避免直接拼接 HTML 字符串（易 XSS），优先用
textContent或innerText渲染文本内容 - 名片区域建议用
<div id="business-card">作为唯一渲染目标，不要重复 clone 模板
常见坑：中文乱码、字体不显示、导出为图片失败
浏览器里看着正常，一截图或转 PDF 就丢字——根本不是编码问题，而是字体未加载完成或未声明 fallback。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 确保 CSS 中
font-family包含系统级中文字体，例如："PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif - 导出图片需用第三方库（如
html2canvas），但注意它无法捕获跨域字体或@font-face加载中的自定义字体 - 本地双击打开
file://协议时，html2canvas可能因 CORS 报错，必须起本地服务（如npx serve）
最小可行代码结构（复制即用，含实时预览）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>名片生成器</title>
<style>
#business-card { width: 300px; height: 180px; border: 1px solid #ccc; padding: 12px; font-family: "Microsoft YaHei", sans-serif; }
</style>
</head>
<body>
<input type="text" id="name" placeholder="姓名" oninput="render()"/>
<input type="text" id="title" placeholder="职位" oninput="render()"/>
<input type="text" id="phone" placeholder="电话" oninput="render()"/>
<div id="business-card"></div>
<script>
function render() {
document.getElementById('business-card').innerHTML = `
<h3>${document.getElementById('name').value || '姓名'}</h3>
<p>${document.getElementById('title').value || '职位'}</p>
<p>${document.getElementById('phone').value || '电话'}</p>
`;
}
</script>
</body>
</html>
这个版本没做防空、没加样式美化，但已具备核心逻辑：改输入 → 立即看到效果。后续加圆角、配色、二维码、公司 logo，都是在这个骨架上叠加，不是重写。
立即学习“前端免费学习笔记（深入）”；
真正卡住人的从来不是“怎么画一张名片”，而是“怎么让输入框和名片区域之间建立稳定、低延迟、不闪动的数据通道”——把 oninput 和 innerHTML（或更安全的 textContent）用对，比研究 SVG 导出参数重要得多。
