使用自定义html标签在页面上显示图像

Question

我正在尝试使用自定义html标签（最好在Summernote HTML编辑器中）来显示图像。自定义标签对我来说是陌生的，我看到的示例似乎对我没有帮助。

本质上，我希望用户添加一个html标记（在html编辑器中），该标记由图片替换。

'<bell></bell>'将显示铃铛的自定义图片

我是否正确遵循自定义HTML标签的概念，任何人都可以提供基本示例的帮助吗？

Answer 1

HTML非常宽容，可以让您创建自己的元素...

但是，您还必须创建自己的CSS规则以匹配它们。

您还需要建立元素要具有的所有行为（考虑到JavaScript，点击，冒泡等），就像Custom Element网站触及如何建立这些连接。

bell{
  display: block;
  display: inline-block;
  background-image: url(https://image.freepik.com/free-vector/golden-bell_1262-6415.jpg);
  background-size: contain;
  height: 40px;
  width: 40px;
}

<bell></bell>

但是，我要提醒您，以这种方式使用自定义元素可能会损害网站的可访问性（图像没有alt文本）。

我的外带/建议可以随意用于任何非关键性内容。但是，如果该元素是需要阅读/看到或与之交互的元素，则最好与为这些目的设计的原始元素搭配使用。