通过复制粘贴重新创建网页？

Question

我是HTML世界的新手。我想通过复制，粘贴和保存HTML源代码来创建我想要玩的网站的本地副本，以及保存网页（包含所有CSS，javascript，.ico元素等）并放置HTML文件在同一目录中。但是，当我打开HTML文件时，它被破坏了，所有样式都消失了。为什么会这样？真诚地道歉，如果这是一个重复，我真的不知道在寻找答案时要搜索什么。谢谢！

Answer 1

没有太多细节 - 大多数现代网站都非常复杂（JS，CDN，网页字体，跨域内容等），并且在“复制并粘贴”到本地位置时看起来不太合理。

如果您使用的是Chrome，我会尝试使用More Tools -> Save Page As功能，该功能在保留依赖关系方面稍微聪明一些，即使这样，它也可能无法正常运行。

您最好的选择是分析浏览器内部的网站，例如Chrome的Developer Tools并将您的学习内容应用到您从头开始创建的本地堆栈。

Answer 2

如果没有看到代码或浏览器产生的错误（如果有的话），就不可能知道发生了什么。

我建议您在浏览器中打开JavaScript控制台，看看是否有任何错误。我可以猜测用绝对路径引用JS和CSS文件，并且因为你从文件系统中为它们提供服务，所以你需要一个相对路径。但就像我说的那样，你只需要自己调试一下。

Answer 3

html文件并不总是包含呈现页面所需的所有内容。通常css存储在外部文件中。您复制的html文件应该具有对css的引用。

if

Answer 4

听起来复制的html中的样式表/脚本指向复制环境中不存在的文件。 你能发布文件结构的方式吗？

可能是您的文件系统设置与原始网页ex /

的设置不同

wwwroot/
|-- index.html (which has stylesheet references to "css/styles.css")
|-- app.js
|-- styles.css

^这里index.html文件将在名为“css”的文件夹中查找styles.css，但styles.css文件不在该位置。

（我知道这不是一个真正的答案，可能更适合作为评论。我没有足够的评论声誉，所以如果我不遵循StackOverflow的方式，我很抱歉做事。）

Answer 5

理想情况下，这可能是一个问题，因为使用了该网页中使用的外部资源而且本地系统中没有该资源。

您可以使用Chrome中的developer console或您使用的任何浏览器进行检查。

1. 在查看网页时按F12，这将打开开发人员工具
2. 点击Console标签，您可以在此处查看可能导致该页面出现任何问题的所有错误和警告。

请参阅该过程的屏幕截图： 您将能够看到红色错误和橙色警告。