HTML联系人卡片制作教程

• 它不包含 TEL、EMAIL、ORG 等 vCard 必需字段
• 没有版本声明（如 VERSION:3.0）和编码要求（如 CHARSET=UTF-8）
• 搜索引擎可能提取它作 SEO 用，但不会触发“添加到通讯录”按钮

怎么让网页支持“点击导出 vCard”

核心是用 JavaScript 构造合法的 vCard 字符串，再触发下载。HTML 只负责提供原始数据（姓名、电话等），别试图用 div 套 class 模拟字段名。

• vCard 3.0 是兼容性最好的版本，避免用 4.0（iOS 旧版、Outlook 部分版本不认）
• 字段值必须转义：逗号、分号、换行符要用 \,、\;、\n，中文建议加 CHARSET=UTF-8
• 用 data:text/vcard;charset=utf-8, + URL 编码字符串实现无请求下载，比 FormData + 后端更轻量

示例关键片段：

const vcard = `BEGIN:VCARD
VERSION:3.0
N:张;三;;;
FN:张三
TEL;TYPE=mobile:+86-13800138000
EMAIL:zhangsan@example.com
END:VCARD`;
const blob = new Blob([vcard], { type: 'text/vcard;charset=utf-8' });
const url = URL.createObjectURL(blob);
// 然后绑定到 <a href="${url}" download="zhangsan.vcf">导出</a>

常见错误：用 microdata 或 JSON-LD “假装”是 vCard

Google 支持 Person 结构化数据，但那是给搜索结果用的，不是给用户通讯录用的。即使你写了完美的 itemprop="telephone"，点击网页依然无法一键保存为 .vcf。

• microdata / JSON-LD 不触发浏览器下载行为，也不被通讯录 App 读取
• 部分插件（如 vCard Generator）会扫描页面 DOM 提取文本，但极度不可靠：它猜 是电话，但遇到
  Tel: 138...
  就失效
• 真正可靠的路径只有一条：显式构造 vCard 字符串 + 用户主动点击下载

vCard 的坑不在结构，而在换行、转义、版本和 MIME 类型——少一个 \n 或错写 TYPE=cell（正确是 TYPE=cell 在 3.0 中无效，得用 TYPE=mobile），iOS 就静默失败。别省那几行转义逻辑。

今天关于《HTML联系人卡片制作教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！