Подключение CSS файлов с помощью тега <link>
Для подключения файлов CSS используется тег <link>. Этот тег необходимо размещать в <head> HTML-документа. Его структура следующая:
<link>
Сам по себе тег <link> не выполняет никаких действий без атрибутов. Необходимые атрибуты:
- rel="stylesheet": указывает, что подключаемый файл — таблица стилей.
- href="…": указывает путь к CSS-файлу. Путь может быть абсолютным (полный URL файла на другом сайте) или относительным (путь к файлу внутри проекта).
Например, для файла main.css в папке css проекта используется следующий код:
<link rel=»stylesheet» href=»css/main.css»>
Перезагрузка страницы не приведёт к видимым изменениям, если файл main.css пуст.
Подключение JavaScript файлов с помощью тега <script>
Для подключения JavaScript файлов используется тег <script>. Его можно размещать как в <head>, так и в <body>. Рекомендуется размещать его в конце <body>, перед закрывающим тегом </body>. Это связано с тем, что JavaScript может замедлять загрузку страницы. Размещение в конце <body> обеспечивает загрузку всего HTML-кода перед выполнением JavaScript.
<script>
Внутри тега <script> можно писать JavaScript-код:
function myFunction() {
// ...ваш код...
}
Или подключать внешний JavaScript-файл с помощью атрибута src:
- src="…": указывает путь к JavaScript-файлу. Путь может быть абсолютным или относительным.
Например, для файла main.js в папке js проекта используется:
<script src=»js/main.js»></script>
Важные различия
Важно помнить о различиях в атрибутах:
- Тег <link> использует атрибут href.
- Тег <script> использует атрибут src.
Не следует путать эти атрибуты.
В этом уроке рассмотрены теги <link> для подключения CSS файлов и <script> для подключения JavaScript файлов. Рекомендуется размещать тег <script> в конце <body> для оптимизации скорости загрузки страницы.