有什么作用？,html"/>
时间戳

首页 > 解决方案 > 标签有什么作用？

html - 标签有什么作用？

问题描述

这个标签我已经看过好几次了，但找不到我们“非专业人士”理解的简单解释。

标签： html

解决方案

来自MDN：

rel 代表“关系”，可能是元素的关键特征之一——该值表示被链接的项目与包含文档的关系。正如您将从我们的链接类型参考中看到的那样，存在许多不同类型的关系。

从您的问题来看，这data可能指向一个 base64 编码值，该值将呈现为网站的图标。您也可以对其他元素的值进行 base64 编码，例如在此示例中：

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7">

是什么href='data:？

嗯，href是超文本参考。通常，您会看到href指向文件或链接路径的值，例如：

<a href="some-page.html">

但它可以指向一个编码图像。表示编码图像的方式是使用data. 所以我们要求浏览器将href与我们在内部创建的图像相关联data:。

示例图标结构

这是一个示例结构，您可以按照 base64 对图标进行编码。正如@agrm 指出的评论，您还需要指定mediatype。

<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF/QA6OjoAKysrABwcH" />

推荐阅读