合格电子名片需语义化html结构（如header、section、address）、必加viewport meta、用flex+rem+媒体查询实现响应式，并慎用伪元素，优先内联svg处理复杂图形。
直接用 HTML + CSS 做电子名片，核心不是“画一张图”，而是构建一个语义清晰、响应及时、结构可维护的轻量页面。别被“模板”二字带偏——真正能复用、能改、能适配手机的，从来不是套用一堆 div 堆出来的静态截图。
怎么写语义化结构，而不是堆 div
很多人一上来就写 <div class="name">张伟</div>，结果后期加二维码、换语言、接入 CMS 时全得重写。HTML5 的语义标签不是装饰，是骨架。
-
<header></header>包姓名、职位，它天然代表“名片头部”，屏幕阅读器和 SEO 都认这个含义 -
<section></section>分联系方式、技能、社交链接等逻辑区块，比<div> 更易定位和扩展 <li>避免嵌套过深：比如 <code><div><div><div><p>邮箱</p></div></div></div>—— 这类结构让媒体查询和 JS 操作都变脆弱 - 关键字段用
<address></address>标签包裹地址/联系方式，浏览器会自动赋予语义（如部分读屏软件会提示“这是联系信息”） - 必须在
里放：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 漏掉
initial-scale=1.0，iOS Safari 有时会强制缩放，导致文字模糊或布局错位 - 不要写成
content="width=375"这类固定值，设备宽度是动态的，device-width才是正确取值 - 主容器用
display: flex，头像和信息区设为flex-direction: column（手机）和row（PC），比 float 或绝对定位稳定得多 - 媒体查询断点别乱猜：用
@media (max-width: 768px)覆盖主流手机，别用 480px 或 320px 这种过时阈值 - 字体大小别全写
px：用rem或em，配合根元素font-size动态调整，否则 iOS 上双击放大可能失效 - 图片别只设
width: 100%：加height: auto和object-fit: cover（如果裁剪可控），防止拉伸失真 - 梯形/平行四边形效果用
transform: skewX()实现时，注意transform-origin必须精确，否则不同浏览器渲染偏移不一致 - 伪元素加
box-shadow或background: linear-gradient()在低端安卓机上可能闪烁或卡顿，建议加will-change: transform提前提示渲染层 - 别在一个元素上叠 3 个以上伪元素——Chrome DevTools 里看 computed styles 会发现渲染树异常臃肿，影响首屏速度
- 真正需要复杂图形（如公司 logo 斜切+描边），不如导出 SVG 直接内联，可控性远高于 CSS 拼凑
viewport 不加，手机上永远显示不全
你写的名片在电脑上看再漂亮，没加这行 meta，手机打开就是缩略图+左右拖拽——这不是设计问题，是基础配置缺失。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
响应式布局别硬写像素，优先用 Flex + 媒体查询
所谓“名片模板”最常翻车的地方，是 PC 端看着整齐，手机一开就文字溢出、图片变形、按钮点不到。
伪元素做装饰要小心层级和性能
很多教程教用 ::before/::after 画斜角、渐变边、立体阴影，看起来高级，但容易踩坑。
做电子名片最难的不是实现效果，而是判断哪些视觉细节值得用代码维护、哪些该交给设计稿或 SVG 文件。一个能快速换头像、改邮箱、加新社交图标、且手机打开不 zoom 的页面，才是合格的“模板”。
