Подключение статических ресурсов
Виды статики
-
Стили
-
Скрипты
-
Шрифты
-
Картинки
Подключение скриптов
1. Внутренние скрипты
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
console.log('Hello, world!');
</script>
</body>
</html>2. Внешние скрипты
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="scripts.js"></script>
</body>
</html>
Порядок исполнения внешних скриптов
Атрибут async
<script src="scripts.js" async></script>Атрибут defer
<script src="scripts.js" defer></script>Мета-тэги
Для чего нужны?
- Влияют на отображение страницы в поисковой выдаче
- Влияют на режим отображения страниц
- Фиксируют данные о странице
Группы мета-тэгов
Name
HTTP-EQUIV
-
keywords
-
description
-
author
-
copyright
-
charset
-
сontent-language
keywords
<!DOCTYPE html>
<html>
<head>
<title>keywords</title>
<meta name="keywords" content="Frontend is awesome">
</head>
</html>Name
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta name="description" content="Page about markup">
</head>
</html>description
Name
charset
<!DOCTYPE html>
<html>
<head>
<title>charset</title>
<meta charset="UTF-8">
</head>
</html>HTTP-EQUIV
content-language
<!DOCTYPE html>
<html>
<head>
<title>Content-Language</title>
<meta http-equiv="content-language" content="ru">
</head>
</html>
<!-- HTML5 -->
<html lang="ru">HTTP-EQUIV
<meta charset="utf-8">Поддержка максимально доступной версии IE:
<meta http-equiv="X-UA-Compatible" content="IE=edge">Кодировка страницы
Настройки viewport'а
<meta name="viewport"
content="initial-scale=1.0,width=device-width"
>Важные мета-тэги
Пример использования viewport
Подключение изображений
Виды графики
- Растровые картинки (gif, jpg, png, webp)
- Векторные картинки (svg, шрифты, canvas)
PPI и dppx
SVG
-
Не теряет качества при масштабировании.
-
При помощи CSS можно менять параметры (фон, например).
-
Весят меньше, чем растровые изображения (но здесь есть ограничения: если использовать вектор, например, для фотографий, то такие изображения станут весить в разы больше).
<svg>
<line x1="0" y1="0" x2="200" y2="200"
stroke-width="1" stroke="rgb(0,0,0)"
/>
</svg>SVG Symbols
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
<!-- В symbol описываем фигуру в виде круга.-->
<symbol id="myDot" width="10" height="10"
viewBox="0 0 2 2">
<circle cx="1" cy="1" r="1" />
</symbol>
<!-- Выводим эту фигуру, используя ссылку на нее d="myDot"-->
<use xlink:href="#myDot"
x="5" y="5" style="opacity:1.0" />
<use xlink:href="#myDot"
x="20" y="5" style="opacity:0.8" />
<use xlink:href="#myDot"
x="35" y="5" style="opacity:0.6" />
</svg>Спрайты
Пример использования спрайта
.icon {
width: 46px;
left: 0;
background: url('sprite.png') -65px 0;
}Использование для создания hover-эффекта
.icon {
width: 45px;
left: 0;
background: url('sprite.png') -65px 0;
}
.icon:hover {
width: 46px;
left: 0;
background: url('sprite.png') -110px 0;
}Подключение изображений
Добавление картинки в html-страницу с помощью тега <img>
<img src="./images/img.png" alt="Растровая картинка">Добавление картинки как бэкграунда
.main {
background-image: url(./images/img.png);
}Seminar01
By malko_alena
