如何在 TextEdit 中保存 html 文件，以便它在浏览器中正确打开？

Question

刚刚在 Mac 上的 TextEdit 中创建了一个简单的 html 文件。 看起来像这样。

<html>

        <head>

                <title>My First Web Page</title>

        </head>

        <body>

                <h1>Welcome to My First Web Page</h1>

                <p>This is an HTML page that I created in TextEdit.</p>

        </body>

</html>

之后我使用 .html 扩展名保存了它，并尝试在多个浏览器中打开这个文件。 但是，我没有显示正确的布局，而是再次在页面上获得了相同的代码：请参见下图。

Safari 不显示 html 文件

结果在所有浏览器中以及刷新页面后仍然存在。 虽然如果我先将文档保存为 RTF 文件，然后手动将扩展名更改为 HTML，浏览器会显示一些内容，但并不像预期的那样和教科书中显示的一样。 在第二个结果下方。

Safari 显示 html 文件不符合预期

预期结果来自教科书，并显示在下一张图片中。

教科书中的预期结果

知道为什么 Safari（或 Firefox、Opera、Chrome、DuckDuckGo 同样）不能正确显示文件吗？

Answer 1

我的第一直觉是让第 1 行读取<!DOCTYPE HTML> ，看看这是否会让您的网络浏览器将代码读取为 HTML 而不是纯文本。 不确定这是否可行，但我会尝试。

Answer 2

您缺少一些属性，应该包含这些属性以使浏览器能够正确解析文件。

以下是一个最小的片段，传递https://validator.w3.org/

<!doctype html>
<html lang=en>
    <head>
      <meta charset=utf-8>
      <title>Your Title</title>
    </head>
    <body>
      <p>Your Content</p>
    </body>
</html>

doctype是一个声明，告知浏览器该文档写在html的哪个版本，默认html5

head 是元数据的容器

meta charset=utf-8 指定字符编码

rest 是您可能熟悉的 html 标签

Answer 3

问题一定出在 TextEdit 上，因为在我将相同的文本复制到 Brackets 后，它会立即运行并且符合预期。

Answer 4

ascii 编码的文本文件与 TextEdit 文件不同。 TextEdit 将默认使用RTF ，它比原始文本更类似于 Word 文档文档类型格式。 当您保存文件时，TextEdit 实际上是将其保存到包含 HTML 文本的 RTF 文件中。

TextEdit可以编辑 HTML ，但在默认模式下，它会根据您在编辑器中格式化文本的方式为您编写 HTML（您可能会听到这称为WYSIWYG ）

您可以更改 TextEdit 设置以在TextEdit -> Settings中将 HTML 文件编辑为文本，但我觉得您最好找到一个更合适的程序员编辑器来编辑文本。 在 macOS 上，您默认安装了命令行程序： vim和nano ，或者您可以安装基于 GUI 的编辑器，例如Sublime Text

Answer 5

例如，您是否使用任何类型的 IDE（例如 VS Code）来编写此 html？

我问是因为您还缺少其他 html 元素，浏览器 - 无论它是什么浏览器 - 都需要这些元素才能完全呈现页面。

当您使用html 样板时，这些详细信息会自动填充到在浏览器中呈现 html 网页所需的最小范围内。 该链接将为您提供更多信息，说明为什么您需要样板中的所有内容，但基本上它就像您的 html 页面的预制模板，其中已经包含您在那里需要的所有基础知识...只需开始添加内容，然后您去参加比赛吧。

在 VS Code 上，您可以通过键入添加样板； （感叹号）然后输入，VS Code 将打开一个下拉菜单以自动完成此行作为 html5 的样板，当您按回车键时。 使用该样板填充页面。

然后就可以简单的把自己写的内容复制进去，去掉重复的，就go就好了。

如何在 TextEdit 中保存 html 文件，以便它在浏览器中正确打开？

问题描述

5 个解决方案

解决方案1
0 2022-12-31 01:50:50

解决方案2
0 2022-12-31 02:06:16

解决方案3
0 2022-12-31 02:15:29

解决方案4
0 2022-12-31 08:10:21

解决方案5
-2 2022-12-31 01:50:56

如何在 TextEdit 中保存 html 文件，以便它在浏览器中正确打开？

问题描述

5 个解决方案

解决方案1 0 2022-12-31 01:50:50

解决方案2 0 2022-12-31 02:06:16

解决方案3 0 2022-12-31 02:15:29

解决方案4 0 2022-12-31 08:10:21

解决方案5 -2 2022-12-31 01:50:56

解决方案1
0 2022-12-31 01:50:50

解决方案2
0 2022-12-31 02:06:16

解决方案3
0 2022-12-31 02:15:29

解决方案4
0 2022-12-31 08:10:21

解决方案5
-2 2022-12-31 01:50:56