一个无后端也无前端彻底无服务的网页版记事本data:text/html;base64,PGh0bWwgY29udGVud

data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+，说复制到浏览器就可以是一个具备可分享，不需要网络，全平台可用的记事本，本着好奇想知道是什么意思？顺手就把这个问题抛给了 chatGPT，看看它能给我们解释什么？

但想让 AI 输出更贴近你期望的答案，在写 Prompt 的时候需要符合一定的格式要求，比如以角色-任务-要求-问题的方式进行提问。

你是一名资深前端开发工程师，请帮分析下列字符串的作用是什么？data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+

chatGPT 给出的参考答案是：

这个字符串是一个 Data URI（数据统一资源标识符）格式的字符串。具体分析如下：

1、data: 是 Data URI 的协议部分。

2、text/html 是 MIME 类型（多用于指定一种文件类型的方式）。这里指代 HTML 类型的格式字符。简单来说，这个字符串的数据部分是一段 HTML 代码。

3、base64 指数据部分采用 Base64 编码方式，这是一种将任意数据转换成 ASCII 编码的编码方式，用于在文本协议中表示二进制数据。

4、, （逗号）表示 URI 方案和数据部分的分隔。

这个 Data URI 的数据部分是由编码后的 HTML 结构组成，表示的是一个简单的 HTML 页面。具体计算过程可以参考以下示例代码来获取 Data URI 的内容：

const dataUrl = 'data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+';
 const decodedData = decodeURIComponent(escape(atob(dataUrl.substr('data:text/html;base64,'.length))));
 console.log(decodedData);

解析后的内容如下：

这个 HTML 文档包含一个带有 contenteditable 属性的 <html> 标签。这表示整个 HTML 文档是可编辑的。当用户在浏览器中打开此 data URL 时，他们可以直接点击并编辑文档中的内容。即用户点击后会看到 "edit me" 字样，并可以直接修改它。