要在 HTML 中使用 fancyBox 插件实现优美的弹出层效果，需要遵循以下步骤：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script><a class="fancybox" href="path/to/image.jpg" data-fancybox="gallery"><img src="path/to/image.jpg" alt="image"></a>其中，class 为 "fancybox"，href 属性指向图片的路径，data-fancybox 属性为 "gallery"，表示这是一个图片集。如果你想让一个链接在点击后弹出层展示某个网页，可以在该链接的 HTML 代码中添加以下属性：
<a class="fancybox" data-fancybox data-type="iframe" data-src="https://example.com">Link</a>其中，class 为 "fancybox"，data-fancybox 属性表示这是一个 fancyBox 元素，data-type 属性为 "iframe"，表示要展示的是一个网页，data-src 属性指向该网页的 URL。
$('[data-fancybox]').fancybox({
// 在这里配置 fancyBox 插件的选项，例如：
loop: true,
buttons: [
'zoom',
'share',
'slideShow',
'fullScreen',
'download',
'thumbs',
'close'
]
});其中，$('[data-fancybox]') 表示选取所有带有 data-fancybox 属性的元素，然后调用 fancybox() 方法来初始化插件。在括号中，你可以配置 fancyBox 插件的选项，例如 loop 表示在图片集的最后一张图片时继续循环，buttons 表示要显示哪些按钮。
需要注意的是，为了避免在弹出层展示时出现问题，需要在 JavaScript 文件中将 fancyBox 插件的代码放在页面加载完成后才执行。可以通过以下代码实现：
$(function() {
// 在这里写 fancyBox 插件的代码
});综上所述，以上就是在 HTML 中使用 fancyBox 插件实现优美的弹出层效果的步骤。