Специализация
Python Backend Developer
Java Backend Developer
Node.js Backend Developer
Golang Backend Developer
React Frontend Developer
Выберите навыки
React
JavaScript
Git
Redux
Webpack
Сложность
1-3
4-6
7-8
9-10
Рейтинг вопросов
1
2
3
4
5
Подпишись на React Developer в телеграм
Как выглядит базовая структура HTML страницы?
Базовая структура HTML страницы начинается с <!DOCTYPE html> для указания типа документа. Затем идет тег <html>, внутри которого находятся два ключевых раздела: <head> (для метаинформации, стилей, ссылок на ресурсы) и <body> (для контента, который виден пользователю). Например:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
</body>
</html>Что такое мета-теги?
Мета-теги — это элементы в <head> HTML-документа, которые содержат метаинформацию, то есть данные о самой странице. Они не отображаются пользователю напрямую, но влияют на индексацию в поисковых системах, корректное отображение страницы и взаимодействие с социальными сетями.
Например, <meta charset="UTF-8"> задает кодировку, а <meta name="description" content="Описание страницы"> предоставляет поисковикам описание страницы.
Для чего используется тег <link>?
Тег <link> используется для подключения внешних ресурсов к HTML-документу. Чаще всего он применяется для подключения CSS-стилей. Тег располагается внутри секции <head> и не отображается на странице.
Пример:
<link rel="stylesheet" href="styles.css">
Этот код подключает файл стилей styles.css к странице.
Что такое атрибут в html?
Атрибут в HTML — это дополнительная информация, которая задает свойства элемента. Он указывается внутри открывающего тега в формате имя="значение".
Например, атрибут href в теге <a> задает ссылку, а src в <img> указывает путь к изображению. Атрибуты влияют на внешний вид или функциональность элементов, но их значения не видны на самой странице.
Пример:
<a href="https://example.com">Перейти на сайт</a>Какие есть этапы рендеринга html страницы?
Парсинг HTML
Браузер начинает парсить HTML-документ и строить DOM-дерево (Document Object Model), представляющее иерархическую структуру всех элементов страницы.
Если браузер находит <script>, он приостанавливает парсинг, загружает и выполняет скрипт, что может изменить структуру DOM.
Загрузка внешних ресурсов
Во время парсинга HTML браузер обнаруживает ссылки на внешние ресурсы (CSS, изображения, шрифты, скрипты) и начинает их загружать параллельно.
CSS загружается и парсится, формируя CSSOM (CSS Object Model).
Построение рендер-дерева
DOM и CSSOM объединяются для создания рендер-дерева, которое представляет собой структуру элементов, подлежащих отображению на экране с примененными стилями.
Вычисление геометрии (Layout)
Браузер вычисляет размеры и положение каждого элемента на странице, основываясь на рендер-дереве. Этот процесс называется layout или reflow.
Отрисовка (Painting)
Браузер преобразует рендер-дерево в пиксели на экране, рисуя текст, цвета, изображения, тени и другие графические элементы.
Композиция (Compositing)
Некоторые элементы могут быть отрисованы в отдельных слоях для улучшения производительности (например, анимации или фиксированные элементы). На этапе композиции браузер объединяет эти слои в одно изображение для отображения на экране.
Интерфейс пользователя (UI)
Браузер обрабатывает пользовательские события (клики, прокрутка, ввод данных и т.д.).
JavaScript может изменять DOM, что может запустить повторные этапы layout и painting.
Какие есть виды подключения CSS в HTML?
Что такое DOCTYPE и зачем он нужен?
Какие есть виды списков в HTML?
Как вставить видео в HTML?
Как вставить аудио в HTML?
Рейтинг:
3
Сложность:
4
Существует три основных способа подключения CSS к HTML: встроенный, внутренний и внешний. Встроенный CSS применяет стили непосредственно к элементу с помощью атрибута style. Внутренний CSS размещается внутри тега <style> в <head> HTML-документа и применяется ко всем элементам на странице. Внешний CSS хранится в отдельном файле с расширением .css, который подключается к HTML через тег <link> в <head>, что позволяет использовать одни и те же стили на нескольких страницах.
Рейтинг:
1
Сложность:
2
<!DOCTYPE> — это инструкция для браузера, которая сообщает, в каком режиме он должен обрабатывать HTML-код. Без этого браузер может работать в режиме совместимости (quirks mode), что может привести к неправильному отображению страницы. Современные страницы обычно используют <!DOCTYPE html> для включения стандартного режима, который поддерживает современные веб-технологии.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Пример</title>
</head>
<body>
<h1>Привет, мир!</h1>
</body>
</html>Рейтинг:
1
Сложность:
2
В HTML существует три основных вида списков: нумерованные списки (<ol>), ненумерованные списки (<ul>) и списки определений (<dl>). Нумерованные списки используют числа или буквы для обозначения каждого элемента, ненумерованные — маркеры, а списки определений содержат пары "термин-описание".
Рейтинг:
1
Сложность:
3
Для вставки видео в HTML используется тег <video>. Внутри него указываются источники видео через тег <source>, а также можно добавить атрибуты, такие как controls для отображения элементов управления, autoplay для автоматического воспроизведения и loop для повторного воспроизведения.
Рейтинг:
1
Сложность:
3
Для вставки аудио в HTML используется тег <audio>. Как и в случае с видео, можно указывать несколько форматов аудиофайлов через тег <source>, а атрибуты controls, autoplay, и loop управляют воспроизведением аудио.
Рейтинг:
2
Сложность:
1
Рейтинг:
2
Сложность:
1
Рейтинг:
1
Сложность:
3
Рейтинг:
1
Сложность:
1
Рейтинг:
5
Сложность:
10