Итоговый тест по HTML и CSS

HTML и CSS · 18 вопросов

Восемнадцать вопросов по всем урокам курса: от первой страницы до адаптивной вёрстки. После ответа видно пояснение — если ошиблись, вернитесь к уроку по теме вопроса.

1. С какой строки начинается HTML-документ? <html><!DOCTYPE html><head><meta charset="utf-8">

<!DOCTYPE html> сообщает браузеру, что это современный HTML. Без него браузер включает режим совместимости со старыми страницами.

Верный ответ: <!DOCTYPE html>. <!DOCTYPE html> сообщает браузеру, что это современный HTML. Без него браузер включает режим совместимости со старыми страницами.

2. Где должен стоять <title>? В <head>В <body>, перед <h1>После </html>

<title> — служебные сведения: текст вкладки браузера и заголовок в выдаче поисковиков. Служебное — в <head>.

Верный ответ: В <head>. <title> — служебные сведения: текст вкладки браузера и заголовок в выдаче поисковиков. Служебное — в <head>.

3. Какой тег делает ссылку? <link><href><a>

Ссылка — элемент <a> с атрибутом href. Тег <link> подключает к странице файлы, например стили, а тега <href> нет.

Верный ответ: <a>. Ссылка — элемент <a> с атрибутом href. Тег <link> подключает к странице файлы, например стили, а тега <href> нет.

4. Что делает атрибут target="_blank" у ссылки? Делает ссылку неактивнойОткрывает ссылку в новой вкладкеСкачивает файл по ссылке

Новую вкладку открывает target="_blank", скачивание — атрибут download.

Верный ответ: Открывает ссылку в новой вкладке. Новую вкладку открывает target="_blank", скачивание — атрибут download.

5. Страница — pages/about.html, картинка — images/logo.png в корне сайта. Какой путь верный со страницы? images/logo.png/pages/images/logo.png../images/logo.png

Путь считается от папки страницы. Из pages нужно подняться на уровень вверх (../), а потом зайти в images.

Верный ответ: ../images/logo.png. Путь считается от папки страницы. Из pages нужно подняться на уровень вверх (../), а потом зайти в images.

6. Для чего нужен атрибут alt у <img>? Задаёт подпись под картинкой на страницеОписывает картинку текстом для тех, кто её не видит, и на случай, если она не загрузиласьУскоряет загрузку картинки

alt читают программы для незрячих, его показывает браузер вместо незагруженной картинки, по нему поисковики понимают, что изображено. Видимую подпись делает <figcaption>.

Верный ответ: Описывает картинку текстом для тех, кто её не видит, и на случай, если она не загрузилась. alt читают программы для незрячих, его показывает браузер вместо незагруженной картинки, по нему поисковики понимают, что изображено. Видимую подпись делает <figcaption>.

7. Какой атрибут растягивает ячейку таблицы на две строки вниз? colspan="2"rowspan="2"height="2"

rowspan объединяет ячейки по вертикали (строки), colspan — по горизонтали (столбцы).

Верный ответ: rowspan="2". rowspan объединяет ячейки по вертикали (строки), colspan — по горизонтали (столбцы).

8. Значение поля формы не приходит на сервер. Чего не хватает у поля? placeholderidnamerequired

Браузер отправляет пары name=значение. Поле без name не отправляется вовсе.

Верный ответ: name. Браузер отправляет пары name=значение. Поле без name не отправляется вовсе.

9. Какой метод формы показывает введённые данные в адресной строке? getpostput

При get данные дописываются к адресу после ?. Поэтому пароли и заявки отправляют методом post.

Верный ответ: get. При get данные дописываются к адресу после ?. Поэтому пароли и заявки отправляют методом post.

10. Как правильно подключить внешний файл стилей? <style src="style.css"><link rel="stylesheet" href="style.css"><css href="style.css"><script href="style.css">

Файл стилей подключает <link rel="stylesheet"> в <head>. У <style> нет атрибута src, а тега <css> не бывает.

Верный ответ: <link rel="stylesheet" href="style.css">. Файл стилей подключает <link rel="stylesheet"> в <head>. У <style> нет атрибута src, а тега <css> не бывает.

11. Есть правила #menu a { color: red; } и .menu a { color: green; } (второе ниже). Какого цвета будет ссылка в <nav id="menu" class="menu">? КрасногоЗелёного: правило стоит нижеЦвета по умолчанию: правила отменят друг друга

Селектор с id точнее селектора с классом. Порядок правил решает только при равной точности.

Верный ответ: Красного. Селектор с id точнее селектора с классом. Порядок правил решает только при равной точности.

12. Какой код задаёт полупрозрачный белый цвет? #fff 50%white / 2rgb(255 255 255 / 50%)

Прозрачность в rgb() пишется после косой черты. Две другие записи CSS не поймёт.

Верный ответ: rgb(255 255 255 / 50%). Прозрачность в rgb() пишется после косой черты. Две другие записи CSS не поймёт.

13. Блок width: 300px; padding: 20px; border: 5px solid; при box-sizing: border-box. Какой он ширины? 350px300px340px

При border-box в width уже входят padding и рамка. Без него было бы 300 + 40 + 10 = 350 пикселей.

Верный ответ: 300px. При border-box в width уже входят padding и рамка. Без него было бы 300 + 40 + 10 = 350 пикселей.

14. Как поставить блок с max-width: 900px по центру страницы по горизонтали? align: center;text-align: center; у самого блокаmargin: 0 auto;

Автоматические отступы слева и справа делят свободное место поровну. text-align центрирует только строки внутри блока, а свойства align в CSS нет.

Верный ответ: margin: 0 auto;. Автоматические отступы слева и справа делят свободное место поровну. text-align центрирует только строки внутри блока, а свойства align в CSS нет.

15. Какое свойство Flexbox выравнивает элементы по поперечной оси — в строке по вертикали? justify-contentalign-itemsflex-wraptext-align

justify-content работает вдоль главной оси, align-items — поперёк неё, flex-wrap разрешает перенос на новую строку.

Верный ответ: align-items. justify-content работает вдоль главной оси, align-items — поперёк неё, flex-wrap разрешает перенос на новую строку.

16. Что задаёт grid-template-columns: repeat(3, 1fr);? Три строки равной высотыТри столбца равной шириныОдин столбец шириной 3fr

repeat(3, 1fr) — то же, что 1fr 1fr 1fr: свободное место делится на три равные доли.

Верный ответ: Три столбца равной ширины. repeat(3, 1fr) — то же, что 1fr 1fr 1fr: свободное место делится на три равные доли.

17. Без какой строки на телефоне страница показывается мелко, как на широком экране? <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><html lang="ru">

Верный ответ: <meta name="viewport" content="width=device-width, initial-scale=1">. Без meta viewport мобильный браузер считает экран широким (около 980 пикселей) и уменьшает страницу целиком.

18. Сайт работал на компьютере, а на хостинге пропали некоторые картинки. Самая вероятная причина? Хостинг не поддерживает PNGНужно было подключить картинки через CSSРегистр букв: в коде photo.jpg, а файл называется Photo.JPG

Верный ответ: Регистр букв: в коде photo.jpg, а файл называется Photo.JPG. Серверы обычно работают на Linux и различают большие и маленькие буквы в именах файлов, а Windows — нет.