Тесты по HTML и CSS
Проверьте себя: выберите вариант ответа и нажмите «Проверить». Правильные ответы подсветятся, а под каждым вопросом появится короткое объяснение. Если что-то забыли — перечитайте HTML или CSS и вернитесь.
1. Тест по HTML
1. Сколько тегов <h1> рекомендуется иметь на одной странице?
Один <h1> на страницу: это главный заголовок, по которому поисковые системы и скринридеры понимают тему документа.
2. Для чего нужен атрибут alt у изображения?
alt — текстовый дубль изображения: он отображается при ошибке загрузки и озвучивается программами чтения с экрана. Для декоративных картинок alt оставляют пустым.
3. Какой тег обозначает самостоятельный «остров» контента: статью или запись?
<article> — самодостаточный контент (статья, новость, запись в блоге). <section> — логический раздел страницы, <div> — нейтральный контейнер без смысла.
4. Что делает атрибут required у поля формы?
required включает браузерную валидацию: форма не отправится, пока обязательное поле не заполнено. Подробнее — в разделе про формы.
5. Как показать пользователю символ < как текст?
< — сущность символа «меньше». Без экранирования браузер примет < за начало тега.
6. Чем нужно задавать ширину и высоту iframe в современном HTML (в ответе учитывайте и атрибуты, и размеры)?
Атрибуты width/height резервируют место (страница не «прыгает» при загрузке), а CSS-максимумы делают iframe резиновым на мобильных.
7. Какой элемент правильно связать с полем формы по id?
<label for="id"> связывает подпись с полем: клик по подписи активирует поле, а скринридер озвучивает её как имя элемента.
8. Какие теги дают самую логичную структуру страницы для поисковиков?
Семантические теги описывают смысл блоков; отсюда их читает и поисковик, и скринридер. Таблицы — только для табличных данных.
2. Тест по CSS
9. Что входит в box model по порядку от контента наружу?
Слои идут от центра наружу: content, padding (внутр. отступ), border (граница), margin (внешний отступ).
10. Зачем используют box-sizing: border-box?
С border-box блок шириной 300px остаётся 300px даже при изменении padding и border — так проще контролировать размеры.
11. Какая специфичность у селектора .btn (класс)?
Класс даёт 10 очков, тег — 1, id — 100, inline-стиль — 1000. .card .title = 20 и перекроет одиночный .title.
12. Как выровнять элементы по главной оси в flex-контейнере?
justify-content — по главной оси, align-items — по поперечной. Гланая ось задаётся flex-direction.
13. Что значит repeat(auto-fit, minmax(200px, 1fr)) в CSS Grid?
auto-fit + minmax делает «резиновую» сетку: сколько колонок помещается, столько и строится, а на узком экране получается одна.
14. Почему анимируют transform и opacity, а не top и height?
transform и opacity анимируются на GPU-композиторе — гладко и без «дёрганий». top/left/height заставляют браузер пересчитывать раскладку.
15. Что такое :focus-visible?
:focus-visible показывает кольцо фокуса только там, где оно реально нужно (клавиатурная навигация), и прячет при обычном клике.
16. Какие свойства относятся к «логическим»?
Логические свойства зависят от направления текста (inline/block): они автоматически «зеркалятся» для языков справа-налево.
Что дальше
Тест показал сильные и слабые места. Закрепите их практикой: соберите карточку товара или лендинг в уроке Практика: лендинг, затем решите задания из Заданий и тестов. Если хочется свежих примеров раскладки — загляните в Flexbox и Grid.