vcard微格式是用标准html元素加特定class名标记联系人信息的语义化方案，现推荐使用h-card根容器及microformats2规范字段（如p-name、u-email等），需严格遵循命名与嵌套规则。
什么是 vCard 微格式，它和 HTML 有什么关系
微格式不是新语言，而是用标准 HTML 元素 + 特定 class 名称来标记语义信息。对名片（contact info）来说，最常用的是 vCard 规范，它对应现实中的一张纸质名片，比如姓名、电话、邮箱、地址等。浏览器或插件（如 hCard 解析器）能识别这些 class，从而提取结构化数据——不是靠解析文本，而是靠约定好的类名。
关键点：你不需要引入任何 JS 或外部库，纯 HTML 就行；但所有 class 必须拼写准确、嵌套符合规范，否则解析器会跳过。
h-card 是当前推荐的根容器，别再用过时的 vcard
早期微格式用 class="vcard"，现在官方已迁移到 h-card（属于 microformats2 规范）。旧写法仍可能被部分工具支持，但新项目务必用 h-card，否则某些现代解析器（如 Mozilla 的 Contact API 或某些爬虫）会直接忽略。
-
h-card必须是包裹全部联系信息的最外层元素，通常是<div> 或 <code>@#@#@#@#@#@#@#@#@#@0 - 邮箱：
@#@#@#@#@#@#@#@#@#@1（u-前缀表示 URL 类型） - 地址：
<div class="p-adr"> <span class="p-street-address">XX路123号</span> <span class="p-locality">上海</span> <span class="p-postal-code">200000</span> </div>—— 拆得越细，解析越准 - HTML5 文档类型缺失：
必须存在，否则某些解析器降级为 quirks mode，<code>class匹配失败 - 用了自定义属性干扰解析：比如加了
data-contact="true"或id="mycard"没问题，但若写了class="p-name card-name"，部分解析器会因未知 class 名而放弃整个h-card - 中文标点混入字段值：像
<span class="p-name">张三，</span>末尾逗号会被当作文本一部分，导致姓名提取异常；建议字段内只保留干净字符
容易被忽略的兼容性陷阱
很多开发者把微格式当装饰用，结果测试时发现 Chrome 扩展读不到数据。问题常出在两个地方：
真正起作用的从来不是“写了多少 class”，而是“是否严格遵循 microformats2 的 class 命名与嵌套约束”。一个错位的 <div> 或多套一层 <code><span></span>，都可能导致整块数据失效。
