wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

Базовые основы HTML, CSS, JS, Web APIs

Total questions: 17

Worksheet time: 13mins

Name
Class
Date
1.

Какие HTML-элементы используются для создания формы?

a)

<div> и <span>

b)

<table> и <tr>

c)

<header> и <footer>

d)

<form>, <input>, <button> и <label>

2.

Какой элемент HTML используется для отображения форматированного текста с сохранением пробелов и переносов строк?

a)

<div>

b)

<p>

c)

<pre>

d)

<span>

3.

Что даёт уверенность в том, что html-элементы, к которым идёт обращение в скрипте <script>, существуют на странице?

a)

указан атрибут <script type="module">

b)

<script> идёт сразу перед закрывающимся тегом </body>

c)

<script> находится внутри <head>

d)

код скрипта обёрнут в функцию, которая вызывается сразу после своей инициализации

4.

Как сделать так, чтобы бразуер знал с какими стилями отрисовать контент при первом рендере.

a)

добавить <link> со стилями перед закрывающимся тегом </body>

b)

указать атрибут <link type="module">

c)

разместить <link> со стилями внутри <head>

d)

разместить <link> со стилями внутри <header>

5.

Какие CSS-свойства используются для создания отступов между элементами?

a)

margin

b)

padding

c)

border

d)

width

6.

Какой псевдо-класс использоать, чтобы применить стили к элементу при наведении курсора?

a)

:visited

b)

:active

c)

:focus

d)

:hover

7.

Укажите CSS селектор, который выберет только те элементы <span>, которые находятся непосредственно внутри элемента <div> с классом .info-block

a)

div.info-block span

b)

.info-block > span

c)

div .info-block span

d)

div.info-block > span

8.

Есть текст `<span id="main-paragraph" class="text highlight">Привет!</span>`. Укажите, какое правило победит и определит его цвет.

a)

span.highlight { color: blue; }

b)

.text { color: red; }

c)

`span { color: green; }

d)

span.highlight.text { color: orange; }

9.

Какой из `@media` правил меняет `font-size` основного текста (`<body>`) на `14px`, когда ширина экрана меньше `768px`

a)

`@media (max-width: 767px) { body { font-size: 14px; } }

b)

@media (min-width: 769px) { body { font-size: 14px; } }`

c)

@media (max-width: 768px) { body { font-size: 14px; } }

d)

@media (min-width: 768px) { body { font-size: 14px; } }

10.

Вы хотите расположить три элемента `<div>` (item1, item2, item3) в ряд внутри родительского элемента `<section>`. Какие из свойств применённых к `<section>` расположат его дочерние div-ы горизонтально?

a)

display: flex;

b)

display: flex;

flex-direction: row;

c)

display: grid;

d)

 display: grid;

grid-template-columns: auto auto auto;

11.

Какие из следующих определений стрелочной функции являются синтаксически правильными в JavaScript?

a)

const sum = (a, b) => a + b;

b)

const greet = name => { return 'Привет, ' + name; };

c)

const log = () => console.log('Готово!');

d)

const calculate = (x, y) => return x * y;

12.

Дан массив `numbers`. Какой код правильно создаст новый массив, содержащий только числа больше чем 0 из исходного массива?

a)

numbers.map(num => num > 0)

b)

numbers.find(num => num > 0);

c)

numbers.reduce((acc, num) => num >= 0 ? [...acc, num] : acc, []);

d)

numbers.filter(num => num > 0);

13.

Дан объект `const person = { name: 'Алиса', age: 28, city: 'Москва' };`. Какие из следующих выражений или методов вернут массив, содержащий строки `'name'`, `'age'`, `'city'`?

a)

Object.values(person)

b)

Object.keys(person)

c)

for (let key in person) { console.log(key); }

d)

`Object.entries(person)

14.

Какой синтаксис деструктурирующего присваивания в JavaScript является корректным?

a)

const { width, height } = { width: 100, height: 200 };

b)

const [first, second] = [10, 20, 30];

c)

const  processUser = ({ id, username }) { /* ... */ }

d)

const { city: userCity } = { city: 'Лондон', country: 'Великобритания' };

15.

Какие утверждения верны относительно `Set` в JavaScript?

a)

`Set` хранит данные в виде пар ключ-значение, где ключом может быть любой тип данных (включая объекты)

b)

для получения количества элементов в `Set` используется свойство `.length`

c)

`Set` гарантирует уникальность хранимых значений

d)

для получения значения по ключу в `Set` используется доступ через квадратные скобки, как в объектах (`myMap['key']`)

16.

У вас есть HTML форма `<form id="myForm" action="/submit">` и JavaScript код для обработки её отправки `form.addEventListener('submit', (event) => { ... });`. Какие из следующих утверждений верны?

a)

Если внутри обработчика события не вызвать `event.preventDefault()`, браузер попытается отправить форму обычным способом

b)

Метод `event.stopPropagation()` остановит отправку формы браузером по умолчанию

c)

Объект `event`, передаваемый в callback, содержит свойство `target`, ссылающееся на элемент формы

d)

Код `document.querySelector("#myForm")` вернёт элемент формы

17.

 Какие из следующих JavaScript выражений корректно используются для поиска элементов в DOM с помощью `querySelector` или `querySelectorAll`?

a)

document.querySelector('input[type="checkbox"]:checked')

b)

document.querySelectorAll('.item:first-child')

c)

`element.querySelector('span.label')`, где `element` - существующий DOM-элемент

d)

document.querySelectorAll('#myId', '.myClass')