Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

WebDev - HTML/CSS/JavaScript/ReactJs > HTML/CSS > Flashcards

HTML/CSS Flashcards

1
Q
  1. Для чого потрібно вказувати DOCTYPE?
A

DOCTYPE вказує тип поточного документа. Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, оскільки HTML існує у кількох версіях.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q
  1. Що буде, якщо не вказати DOCTYPE на початку документа?
A

Браузер спробує відобразити сторінку в режимі сумісності (quirks mode). Це може призвести до того, що в різних браузерах сторінка відображатиметься по-різному.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q
  1. Для чого потрібні мета-теги?
A

Мета-теги – це теги, які надають пошуковим системам додаткову інформацію про сторінку сайту. Наприклад, механізми пошукових систем звертаються до мета-тегів для отримання опису сайту, ключових слів та інших даних. Мета-теги для сайту розміщуються всередині <head>.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q
  1. Чим відрізняється блоковий елемент від рядкового?
A

Блокові елементи є основою, яка використовується для верстки сторінок. Такий елемент є прямокутником, який за замовчуванням займає всю доступну ширину сторінки, а висота елемента залежить від його вмісту. Такий елемент завжди починається з нового рядка. Блоковий елемент може містити в собі інші блокові та рядкові елементи.
Приклади блокових елементів: <div>, <p>, <ul>, <ol>, <h1>

На відміну від блокового, рядковий елемент не переноситься на новий рядок, а розташовується у тому ж рядку, що й попередній елемент. Ширина рядкового елемента залежить від його вмісту. Блокові елементи не можна вкладати в рядкові.
Приклади рядкових елементів: <a>, <span>, <strong>, <em>, <img></img></em></strong></span></a>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q
  1. Чому деякі символи можуть відображатися у вигляді квадратів?
A

Це може виникати через те, що деякі браузери можуть не підтримувати певні символи операційної системи. Також може відрізнятися кодування. Або не підключено потрібний шрифт з іконками.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q
  1. Які типи заголовків є в HTML?
A

HTML підтримує шість різних типів заголовків. Ці заголовки відрізняються за розміром шрифту, починаючи з найбільшого.

h1 – найбільший заголовок. h6 – найменший заголовок.
h1 має бути лише 1 на сторінці.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q
  1. Що таке семантична верстка?
A

Це верстка орієнтована на структурування html-документів. У ній використовуються теги, які поділяють код на логічні блоки, що явно показують їх роль та зміст у структурі сторінки.

Семантична верстка відрізняється від блокової лише елементами, що використовуються при структуризації сторінки.

У блоковій верстці використовують в основному тільки елемент div, а в семантичній використовуються крім div ще безліч інших тегів, таких як: header, main, section, footer, nav, aside.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q
  1. Що таке потік HTML-документа?
A

Потоком документа HTML називається порядок виведення елементів на сторінку. У звичайному вигляді всі блоки виводяться у порядку, у якому записані всередині HTML-документа.

Потік можна змінювати за допомогою css правил, наприклад, за допомогою position: absolute.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q
  1. Як підключити JavaScript до сторінки?
A

Перший спосіб — вставити скрипт у блок script.

Другий спосіб — підключити скрипт за допомогою додавання посилання на файл JavaScript. Бажано всі скрипти підключати наприкінці блоку body.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q
  1. Яка різниця між script, script async та script defer?
A

1 - Коли браузер завантажує HTML і доходить до тегу script, він призупиняє будувати DOM. Він повинен спочатку завантажити та виконати скрипт, і лише потім обробити решту сторінки.

2 - Атрибут defer повідомляє браузеру, що він повинен продовжувати обробляти сторінку та завантажувати скрипт у фоновому режимі, а потім запустити цей скрипт, коли сторінка завантажилася.

3 - Атрибут async повідомляє браузеру, що він повинен продовжувати обробляти сторінку та завантажувати скрипт у фоновому режимі, а потім запустити цей скрипт, як тільки він буде завантажений.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q
  1. Як додати CSS на сторінку?
A

Перший спосіб — описати селектори та їх значення всередині тегу style.

Другий спосіб — підключити стилі за допомогою додавання посилання на зовнішній файл css, використовують тег link, що розташовується всередині блоку head.

Третій спосіб — додати інлайнові стилі для кожного окремого елемента, використовуючи атрибут style.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q
  1. Яка різниця між reset.css та normalize.css?
A

reset.css - скидає всі стилі в нуль для того, щоб можна було розпочати стилізацію сайту з чистого аркуша.

normalize.css - приводить вихідні стилі до єдиного стану, у всіх браузерах.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q
  1. Що таке critical CSS?
A

Critical CSS - це стилі, які необхідні для відтворення першої видимої частини сторінки. Для моментального відтворення критичний CSS вбудовують в HTML, всі інші стилі завантажуються окремим файлом асинхронно.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q
  1. Що таке специфічність селекторів CSS?
A

Це спосіб, за допомогою якого браузери визначають, які значення властивостей CSS найбільше відповідають елементу і, отже, будуть застосовані. Специфічність є вагою, що надається конкретному правилу CSS.

Найбільшу вагу мають inline стилі. Потім стилі селектора за ID. Найменшу вагу мають селектори по тегу і також селектор * (астерікс).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q
  1. Яка різниця між псевдокласом і псевдоелементом в CSS?
A

Псевдокласи описують особливий стан елементу. Наприклад, стан натиснутої кнопки. Псевдоелементи відповідають віртуальним елементам. Наприклад, потрібно виділити першу літеру в рядку.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q
  1. Що таке блокова модель CSS?
A

Кожен блок має прямокутну область вмісту в центрі, поля навколо вмісту (padding), рамку навколо полів (border) та відступ за межами рамки (margin).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q
  1. Що робить властивість box-sizing?
A

Властивість box-sizing визначає як обчислюється загальна ширина та висота елемента. Має 2 поведінки:
- content-box це стандартна поведінка. Якщо встановити елементу ширину 100 пікселів, то ширина його контенту буде 100 пікселів, а ширина меж і внутрішніх відступів під час рендеру буде додана до фінальної ширини, що зробить елемент ширше ста пікселів.

  • border-box каже браузеру враховувати будь-які межі та внутрішні відступи у значеннях, які вказані у ширині та висоті елемента. Якщо виставити елементу ширину 100 пікселів, то ці 100 пікселів будуть містити межі та внутрішні відступи, а контент стискається, щоб виділити для них місце. Зазвичай це полегшує роботу з розмірами елементів.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q
  1. Які види позиціонування елементів на сторінці ви знаєте?
A

Існує 5 видів позиціонування:

  • static - стандартне позиціонування;
  • relative - позиціонування щодо самого себе;
  • absolute - позиціонування щодо його найближчого відносно позиціонованого предка, якщо такий є;
  • fixed - позиціонування відносно viewport
  • sticky - липке позиціонування, яке може змінювати своє значення з relative на fixed під час прокручування сторінки.
19
Q
  1. Що робить властивість z-index?
A

Ця властивість визначає положення елемента та елементів, розташованих нижче по осі z. У разі перекриття елементів це значення визначає порядок накладання. У загальному випадку елементи з більшим z-index перекривають елементи з меншим.

Ця властивість працює тільки для елементів, у яких значення position встановлено як absolute, fixed або relative.

20
Q
  1. Яка різниця між px, em, rem?
A

px - піксель, це найбільш базова, абсолютна та остаточна одиниця виміру;

em - одиниця виміру відносно поточного розміру шрифту;

rem - одиниця виміру відносно розміру шрифту елемента <html>.

21
Q
  1. Яка різниця між гумовою, адаптивною та респонсивною версткою?
A

У гумовій верстці блоки змінюють ширину залежно від розміру вікна браузера.

Адаптивна верстка реалізується за допомогою правил @media. Це дає змогу для кожного окремого розміру екрана відображати різну верстку. Будь-яка зміна розміру вікна відбувається ривками, після досягнення однієї із зазначених точок перелому.

Респонсивна верстка — це поєднання гумової та адаптивної верстки. У реалізації найскладніша. Але результат виходить найбільш прийнятним.

22
Q
  1. Яка різниця між visibility:hidden та display:none?
A

visibility:hidden залишає елемент у нормальному потоці сторінки, і він все ще займає місце.

display:none видаляє елемент із нормального потоку сторінки, що дозволяє іншим елементам заповнити його місце.

23
Q
  1. Для чого потрібне правило @supports?
A

Правило @supports дозволяє перевірити, чи підтримує браузер ту чи іншу можливість, і на основі цього створити набір стильових правил.

24
Q
  1. Яка різниця між Progressive Enhancement та Graceful Degradation?
A

Прогресивне покращення – це коли основний функціонал програми однаково працює у всіх браузерах, а для нових браузерів додається щось додаткове. Це добре працює з технологіями, які поки що широко не підтримуються, але вже можуть принести користь. Для реалізації цього підходу використовується директива @supports.

Поступова деградація – це коли код спочатку пишеться для найновіших браузерів з використанням останніх технологій, але при цьому додаток потребує підтримки старими браузерами. За такого підходу інтерфейс спрощується або деградує поступово, але при цьому ним все одно можна користуватися.

25
Q
  1. Що таке repaint та reflow?
A

Під час завантаження сторінки, якщо вона не порожня, завжди виконується щонайменше по одному reflow та repaint. Далі ці події виникають у таких випадках:

  • 1 - частина дерева відображення потребує перерахунку, тобто у якогось вузла змінилися ширина, висота чи координати. Викликається подія reflow.
  • 2 - в результаті змін частина контенту, що відображається, повинна оновитися. Йдеться в першу чергу про властивості стилів: колір фону і т. д. Викликається подія repaint. Якщо викликається reflow, після нього обов’язково викликається і repaint. Але зворотне хибно: repaint може викликатися незалежно від reflow.
26
Q
  1. Яка різниця між cookie, sessionStorage та localStorage?
A

localStorage:
- зберігає дані безстроково.
- очищається тільки за допомогою JavaScript або чищення кешу браузера.
- зберігає дані об’ємом до 5 МБ.
- не підтримується старими браузерами, наприклад, IE 7 і нижче.
- працює за правилом обмеження домену (same origin policy).

sessionStorage:
- зберігає дані, поки триває поточна сесія вкладки.
- кожна вкладка має свій sessionStorage.
- зберігає дані об’ємом до 5 МБ.
- не підтримується старими браузерами, наприклад, IE 7 і нижче.

cookie:
- зберігає дані, що передаються на сервер через заголовки.
- мають термін зберігання даних.
- обсяг даних від 4 Кбайт до 32 Кбайт.
- сookie можуть бути захищеними, в цьому випадку їх вміст не можна отримати на стороні клієнта. Це важливо для аутентифікації при зберіганні користувальницьких токенів.

27
Q
  1. Яка різниця між відносним та абсолютним шляхом?
A

Абсолютні адреси повинні починатися із зазначення протоколу (зазвичай http://) та містити ім’я сайту. (http://some-site.com/path)

Відносні посилання ведуть відлік від кореня сайту чи поточного документа. (/path)

28
Q
  1. Яка різниця між тегом та елементом?
A

Теги використовують для позначення початку та кінця вмісту HTML елемента.
Елемент складається з тегів та вмісту.

29
Q
  1. Коли використовувати <button>, а коли <a>?</a></button>
A

Кнопка — це функціональний елемент, тобто елемент, який відповідає за виконання певної функції після натискання на неї.

Посилання — це елемент навігації, тобто елемент, який відповідає за взаємозв’язок розділів веб-ресурсу (або різних ресурсів) між собою.

30
Q
  1. Для чого потрібний атрибут type у кнопки?
A

type визначає тип кнопки, який встановлює її поведінку у формі. На вигляд кнопки різного типу ніяк не відрізняються, але у кожної такої кнопки свої функції.

Існує 3 типи: button, reset і submit.

За замовчуванням встановлено значення submit.

31
Q
  1. Для чого потрібний тег <base></base>?
A

Тег <base></base> призначений для документів, у яких використовується відносна адреса та ці документи можуть переноситися до іншої директорії без втрати зв’язку.

Браузер шукає тег <base></base>, визначає повну адресу документа та коректно завантажує його. Також тег <base></base> використовують для задавання цільового вікна для всіх посилань на поточній сторінці.

32
Q
  1. Яка різниця між checkbox та radio?
A

radio - створює перемикання між варіантами та дозволяє вибрати тільки один з них.

checkbox - застосовується у формі для вибору кількох значень.

33
Q
  1. Що таке наслідування стилів в CSS?
A

Коли вказується стиль елемента, частина властивостей може бути успадкована його дочірніми елементами та нащадками. Наприклад, якщо задати колір тексту для body, то всі дочірні елементи та нащадки його успадкують.

34
Q
  1. Що таке каскадність в CSS?
A

Каскадність — це особливість CSS, за допомогою якої браузер визначає значення яких властивостей буде застосовано до елемента, коли виникає конфлікт властивостей.

Конфлікт властивостей виникає, коли для елемента визначено кілька правил, селектори яких мають однакову специфічність і містять однакові властивості, але з різними значеннями.

35
Q
  1. Яка різниця між контентними та декоративними зображеннями?
A

За допомогою контентних зображень до користувачів доноситься корисна інформація. Щоб додати контентне зображення на сторінку, в розмітці використовується тег <img></img>. Для таких зображень необхідно заповнювати атрибут alt, який описує те, що зображено на картинці.

Декоративні зображення використовуються виключно для оформлення. Такі зображення не несуть для користувача корисну інформацію. Декоративні зображення слід реалізовувати за допомогою CSS.

36
Q
  1. Чому у <img></img> та <input></input> немає псевдоелементів ::before, ::after?
A

Псевдоелементи ::before та ::after дають результат тільки для тих елементів, які мають вміст. А у <img></img> та <input></input> вмісту немає.

37
Q
  1. Для чого потрібна функція calc в CSS?
A

Функція calc дозволяє розрахувати значення властивостей CSS під час їх визначення. Вона приймає як параметр математичний вираз, результат обчислення якого можна використовувати як значення CSS властивості.

38
Q
  1. Що таке flex-контейнер та flex-елемент?
A

Flex-контейнер встановлює новий гнучкий контекст форматування для його вмісту.

Flex-контейнером є той елемент, у якого задано властивість display: flex або display: inline-flex.

Flex-елементом є кожен дочірній елемент flex-контейнера.

39
Q
  1. Що таке flex-вісь?
A

Flexbox визначає поняття головної та допоміжної осі. Елементи flex завжди розміщуються вздовж головної осі. При цьому головна вісь може бути розташована горизонтально чи вертикально.

Спочатку головна вісь розташована горизонтально з напрямком елементів справа наліво. Напрямок головної осі можна змінити за допомогою властивості flex-direction.

40
Q
  1. Які відмінності у mobile first та desktop first підходів?
A

Mobile first орієнтований на вузькі екрани. Це підхід, коли стилі застосовуються спочатку до мобільних пристроїв. Розширені стилі та інші перевизначення для великих екранів потім додаються до таблиці стилів через медіазапити.

Desktop first орієнтований на широкі екрани. Це підхід, при якому стилі застосовуються спочатку до великих пристроїв. Розширені стилі та перевизначення для менших екранів потім додаються до таблиці стилів через медіазапити.

41
Q
  1. Які переваги svg перед png або jpeg?
A

1 - На відміну від растрової графіки, SVG не втрачає якості при масштабуванні.

2 - Браузеру не потрібно запитувати картинку у сервера, оскільки він сам її малює, отже, продуктивність підвищується.

3 - За допомогою CSS/JS можна змінювати параметри графіки на сайті, наприклад, фон, прозорість або межі. Також SVG можна анімувати.

4 - Об’єкти SVG важать набагато менше растрових зображень.

42
Q
  1. Яка різниця між rgb, rgba та hex?
A

rgb - це змішування червоного, зеленого та синього кольору у відсотковому чи числовому співвідношенні для отримання потрібного кольору.

rgba - це той же rgb тільки з альфа-каналом, який задає рівень непрозорості (0 – прозорий, 1 – непрозорий).

hex - цей опис кольору заснований на 16-річному записі числа.

43
Q
  1. Чим відрізняється лінійний та радіальний градієнти?
A

Лінійний градієнт створюється за допомогою двох і більше кольорів, для яких задано напрямок розподілу. Якщо напрямок не вказано, використовується значення за замовчуванням — зверху-вниз.

Радіальний градієнт відрізняється від лінійного тим, що кольори виходять із центру градієнта і рівномірно розподіляються назовні, набуваючи форми кола.

WebDev - HTML/CSS/JavaScript/ReactJs (3 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions