Воссоздание веб-страницы путем копирования-вставки?
Я новичок в мире HTML. Я хотел создать локальную копию веб-сайта, с которым я хотел поиграть, скопировав, вставив и сохранив исходный HTML-код, а также сохранив веб-страницу (со всеми элементами CSS, javascript, .ico и т. д.) И разместив HTML-код. файл в том же каталоге. Однако, когда я открыл файл HTML, он был сломан, и все стили пропали. Почему это так? Приношу искренние извинения, если это повторение, я действительно не знала, что искать, когда ищу ответ. Спасибо!
HTML ссылается на множество других файлов, таких как внешний CSS для стилизации и изображения. Это не часть HTML. Если он не может найти необходимые ресурсы, он просто «сделает все возможное» без них.
Было бы полезно знать контекст, в котором работает ваш сайт, например, статический сайт, подключается ли он к базе данных, откуда вы его обслуживаете или какие-либо другие подсказки, которые могут помочь нам помочь вам. Попробуйте провести небольшое исследование и отредактировать вопрос.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Невозможно узнать, что происходит, не видя кода или какие (если есть) ошибки возникают в вашем браузере.
Я бы посоветовал открыть консоль JavaScript в вашем браузере, чтобы проверить, нет ли ошибок. Я мог бы угадать указать, что файлы JS и CSS ссылаются на абсолютный путь, и поскольку вы обслуживаете их из файловой системы, вам нужен относительный путь. Но, как я уже сказал, вам просто нужно отладить это самостоятельно.
Не вдаваясь в подробности - большинство современных веб-сайтов невероятно сложны (JS, CDN, веб-шрифты, кроссдоменный контент и т. д.) И вряд ли будут выглядеть как-то разумно при «копировании и вставке» в локальное расположение.
Если вы используете Chrome, я бы попробовал функцию More Tools -> Save Page As, которая немного умнее с точки зрения сохранения зависимостей, и даже тогда она может работать не очень хорошо.
Лучше всего проанализировать сайт внутри браузера, например Developer Tools Chrome и примените свои знания к локальному стеку, который вы создаете с нуля.
HTML-файл не всегда содержит все необходимое для визуализации страницы. Часто css хранится во внешних файлах. Скопированный вами html-файл должен содержать ссылку на CSS, который выглядит так.
<link rel = "stylesheet" href = "styles.css" >
Похоже, что таблицы стилей / скрипты в скопированном html указывают на файлы, которых нет в вашей скопированной среде. Не могли бы вы опубликовать то, как у вас структурированы файлы?
Возможно, ваша файловая система настроена иначе, чем на исходной веб-странице, например /
wwwroot/
|-- index.html (which has stylesheet references to "css/styles.css")
|-- app.js
|-- styles.css
^ здесь файл index.html будет искать styles.css в папке с именем "css", но файл styles.css находится не в этом месте.
(Я знаю, что это не настоящий ответ и может быть более подходящим в качестве комментария. У меня недостаточно репутации для комментирования, поэтому приношу свои извинения, если я не следую способам работы с StackOverflow.)
В идеале это может быть проблемой из-за использования внешних ресурсов, которые используются на этой веб-странице и отсутствуют в вашей локальной системе.
Вы можете проверить это на developer console в Chrome или в любом другом браузере, который вы используете.
- Нажмите
F12при просмотре веб-страницы, это откроет Инструменты разработчика - Щелкните вкладку
Console, здесь вы можете увидеть все ошибки и предупреждения, которые могут вызвать какие-либо проблемы на этой странице.
Смотрите скриншот для процесса:
Вы увидите ошибки красным цветом и предупреждения оранжевым цветом.
Вы загрузили все необходимые файлы?