Как я могу получить доступ к каталогу root в HTML? (Использование / не работает)

Question

Итак, я пытаюсь получить доступ к своему каталогу root в HTML, но когда я использую / он не работает. Так, например, я пытаюсь получить свою навигацию css, выполнив:

<link rel="stylesheet" href="/nav.css">

Странная вещь, она прекрасно работает, когда я использую VS Code с расширением живого сервера, но я просто недавно заметил, когда я запускаю файл index. html в одиночку, ни одна из ссылок не начинается с / work. Я знаю, что это тоже проблема, потому что когда я убираю / в приведенной выше строке, она снова прекрасно работает (только для страницы домашней страницы в каталоге root).

Answer 1

Как уже указывали другие, причина того, что он не работает, заключается в том, что, загружая файл напрямую, вы теперь загружаете его как локальный файл, а не как файл на веб-сайте, и, следовательно, ваша база URL (Ваша /) теперь ссылается на root вашей локальной файловой системы. Вероятно, это будет C:\ в windows системе или ваша реальная root / в * nix-системе.

Чтобы действительно решить вашу проблему, я бы предложил одно из следующих решений:

1. Просто всегда запускайте проект через HTTP через сервер.
2. Go через ваш проект и меняйте все ваши пути на относительные. Вы можете использовать для этого поиск замены в вашем редакторе.
3. Используйте тег <base>, чтобы указать, каким должен быть базовый раздел вашей веб-страницы.

Если вы не можете использовать сервер и у вас есть только один файл HTML, то, возможно, быстрее всего будет использовать исправление 3. Возможно, вам не под силу использовать <base href="."> для создания базы текущий каталог вашего индекса. html файл, который, я подозреваю, станет верным решением для того, чтобы заставить вещи работать так, как они это делали раньше.

В будущем лучше всего рассмотреть это и то, как вы собираетесь запустить файл, и что ваши URL будут относительно. В настоящее время мы легко можем упустить из виду то, что инструменты, которые мы используем при разработке, настолько хороши, что скрывают детали того, как на самом деле развертываются веб-сайты.

Answer 2

Попробуйте:

./nav.css

Он (я имею в виду, ./) загружает файлы в тот же каталог index.html, что и nav.css. С VS Code я держу пари, что ./nav.css должно работать и для предварительного просмотра: использование внешнего HTTP-сервера (например, http-server на Node.js) помогает, потому что он принимает текущий каталог (где index.html) в качестве root и вы легко можете достичь /nav.css. Без действующего сервера можно было бы получить относительный путь, как я сказал, с помощью ./nav.css (типичный путь * NIX) или просто nav.css без косых черт на Windows.

Answer 3

Как указывает Квентин, если вы загружаете файл index.html локально без сервера, каталог root будет root вашей файловой системы. Если вы требуете, чтобы файл index.html работал локально на компьютере вашего профессора без веб-сервера, вы должны использовать относительные пути .

, чтобы выполнить обратное копирование файловой системы из текущий файл, вы можете использовать пути, которые начинаются с ../

Answer 4

когда я запускаю файл индекса. html в одиночку ни одна из ссылок не начинается с / work

Если вы работаете index.html в одиночку , то ссылки, начинающиеся с /, будут относиться к root вашей файловой системы .

Браузер не знает (и не может) знать, какой каталог представляет root проекта вашего веб-сайта.

Использовать веб-сервер. Загрузить данные по HTTP.