如何在您喜欢的浏览器上做笔记

你喜欢在网上浏览或阅读内容时做笔记，但讨厌一直切换应用程序吗？那么，这个提示是给你的。我们将向您展示如何在您喜欢的浏览器（如 Chrome、Firefox 和 Safari）上做笔记。请记住，这不适用于 Microsoft Edge 和 Internet Explorer。

如何在 Chrome、Firefox 和 Safari 中做笔记？

使用帮助简单的命令方法，您可以将您喜欢的浏览器转换为文本编辑器。您不需要任何类型的额外应用程序或扩展来执行此操作。您可以直接在浏览器窗口上写尽可能多的内容并做笔记。让我们用 Chrome 来解释这一点，但您可以在任何其他流行的浏览器（如 Firefox 和 Safari）上执行此操作。

打开一个新的 Chrome 标签页，输入 data:text/html，在地址栏中，然后按 Enter。

您将看到一个空白的白色屏幕。当您单击它时，将出现一个光标，您可以开始输入任何内容，例如文本编辑器。

在 Firefox 上，您还可以在编辑器上拖放图像并开始创建完整的文档。

保存笔记

现在，这种方法有一个限制，您不能将笔记保存为文本文件。当您关闭选项卡时，您的所有数据都将消失。记完所有笔记后，在 Windows 上按“Control + S”，在 MacBook 上按“Command + S”来保存内容。确保在保存内容之前在 Chrome 和 Firefox 中选择“网页，完成”选项。在 Mac Safari 上，您应该选择“Web Archive”选项来保存内容。

这会将您的笔记以 HTML 页面格式保存在您的 PC 上，扩展名为 .htm 或 .html。下次你可以打开它，你所有的工作都会在那里。您可以再次开始编辑并将其保存为网页。否则，您可以简单地复制内容并粘贴到文本编辑器中，如 Windows 平台中的 Microsoft Word 或记事本或 macOS 平台中的 TextEdit。这种方法最大的好处是你可以使用任何浏览器做笔记，然后打开任何其他支持的浏览器进行编辑。

这个怎么运作？

基本上，“contenteditable”是一个 HTML5 全局属性，允许应用程序编辑内容。当与浏览器地址栏中的数据元素一起使用时，它使用数据 URI 方案将浏览器窗口转换为具有可编辑模式的 HTML 页面。您可以添加更多的 CSS 内容以使内容区域看起来不同。例如，您可以创建带有填充的边框，并为您的笔记使用不同的字体大小。

data:text/html, <div contenteditable="true" style="border:1px solid red;padding:20px;font-size:20px"> Here is your editable text.....</div>

在地址栏上输入时，您将看到以下结果。

浏览器支持

现代浏览器（如 Google Chrome、Mozilla Firefox 和 Apple Safari）支持此 HTML5 属性。不幸的是，Internet Explorer 和 Edge 等 Microsoft 浏览器不支持 contenteditable 属性。事实上，较早支持的浏览器之一是 Internet Explorer，但在后来的版本中不再支持。