Путь к файлу HTML
Путь к файлу HTML используется для описания расположения файла в папке веб-сайта. Пути к файлам похожи на адрес файла для веб-браузера. Мы можем связать любой внешний ресурс для добавления в наш HTML-файл с помощью путей к файлам, таких как изображения, файл, файл CSS, файл JS, видео и т. д.
Атрибут src или href требует атрибута для связи любого внешнего источника с файлом HTML.
Ниже приведены различные типы для указания путей к файлам:
<img src="picture.jpg">
Указывает, что picture.jpg находится в той же папке, что и текущая страница.
<img src="images/picture.jpg">
Указывает, что файл picture.jpg находится в папке с изображениями в текущей папке.
<img src="/images/picture.jpg">
Указывает, что файл picture.jpg находится в папке с изображениями в корне текущей сети.
<img src="../picture.jpg">
Указывает, что picture.jpg находится в папке на один уровень выше текущей папки.
Пути к файлам используются на веб-страницах для ссылки на внешние файлы, такие как:
интернет страницы
Картинки
Таблицы стилей
JavaScript
Существует два типа путей к файлам:
Абсолютные пути к файлам
Относительные пути к файлам
Абсолютные пути к файлам
Абсолютный путь к файлу указывает полный URL-адрес.
<html>
<head>
<title>Document</title>
</head>
<body>
<img src="https://example.com/images/nature-1.jpg" alt="image" style="width:300px">
</body>
</html>
Относительные пути к файлам
Относительный путь к файлу указывает на файл, связанный с расположением текущей страницы.
Давайте возьмем пример, чтобы увидеть, как путь к файлу указывает на файл в папке изображений, расположенной в корне текущего веб-сайта.
<html>
<head>
<title>Document</title>
</head>
<body>
<img src="/images/nature-2.jpg" alt="Mountain" style="width:300px">
</body>
</html>
Вот как путь к файлу указывает на файл в папке изображений, расположенной в текущей папке.
<html>
<head>
<title>Document</title>
</head>
<body>
<img src="images/nature-3.jpg" alt="Mountain" style="width:300px">
</body>
</html>
Когда папка с изображениями расположена в папке на один уровень выше текущей папки.
<html>
<head>
<title>Document</title>
</head>
<body>
<img src="../images/nature4.jpg" alt="Mountain" style="width:300px">
</body>
</html>
◦ Всегда не забывайте использовать правильный URL, имя файла, имя изображения, иначе оно не будет отображаться на веб-странице.
◦ Попробуйте использовать относительные пути к файлам, чтобы ваш код не зависел от URL.
