Питання інтервью Flashcards
Для чого потрібно вказувати DOCTYPE?
DOCTYPE вказує тип поточного документа. Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, оскільки HTML існує у кількох версіях.
Що буде, якщо не вказати DOCTYPE на початку документа?
Браузер спробує відобразити сторінку в режимі сумісності (quirks mode). Це може призвести до того, що в різних браузерах сторінка відображатиметься по-різному.
Для чого потрібні мета-теги?
Мета-теги – це теги, які надають пошуковим системам додаткову інформацію про сторінку сайту. Наприклад, механізми пошукових систем звертаються до мета-тегів для отримання опису сайту, ключових слів та інших даних. Мета-теги для сайту розміщуються всередині <head>.
Чим відрізняється блоковий елемент від рядкового?
Блокові елементи є основою, яка використовується для верстки сторінок. Такий елемент є прямокутником, який за замовчуванням займає всю доступну ширину сторінки, а висота елемента залежить від його вмісту. Такий елемент завжди починається з нового рядка. Блоковий елемент може містити в собі інші блокові та рядкові елементи.
Приклади блокових елементів: <div>, <p>, <ul>, <ol>, <h1>
На відміну від блокового, рядковий елемент не переноситься на новий рядок, а розташовується у тому ж рядку, що й попередній елемент. Ширина рядкового елемента залежить від його вмісту. Блокові елементи не можна вкладати в рядкові.
Приклади рядкових елементів: <a>, <span>, <strong>, <em>, <img></img></em></strong></span></a>
Чому деякі символи можуть відображатися у вигляді квадратів?
Це може виникати через те, що деякі браузери можуть не підтримувати певні символи операційної системи. Також може відрізнятися кодування. Або не підключено потрібний шрифт з іконками.
Які типи заголовків є в HTML?
HTML підтримує шість різних типів заголовків. Ці заголовки відрізняються за розміром шрифту, починаючи з найбільшого.
h1 – найбільший заголовок. h6 – найменший заголовок.
h1 має бути лише 1 на сторінці.
Що таке семантична верстка?
Це верстка орієнтована на структурування html-документів. У ній використовуються теги, які поділяють код на логічні блоки, що явно показують їх роль та зміст у структурі сторінки.
Семантична верстка відрізняється від блокової лише елементами, що використовуються при структуризації сторінки.
У блоковій верстці використовують в основному тільки елемент div, а в семантичній використовуються крім div ще безліч інших тегів, таких як: header, main, section, footer, nav, aside.
Що таке потік HTML-документа?
Потоком документа HTML називається порядок виведення елементів на сторінку. У звичайному вигляді всі блоки виводяться у порядку, у якому записані всередині HTML-документа.
Потік можна змінювати за допомогою css правил, наприклад, за допомогою position: absolute.
Як підключити JavaScript до сторінки?
Перший спосіб — вставити скрипт у блок script.
Другий спосіб — підключити скрипт за допомогою додавання посилання на файл JavaScript. Бажано всі скрипти підключати наприкінці блоку body.
Яка різниця між
,та?
1 - Коли браузер завантажує HTML і доходить до тегу
, він призупиняє будувати DOM. Він повинен спочатку завантажити та виконати скрипт, і лише потім обробити решту сторінки.
2 - Атрибут defer повідомляє браузеру, що він повинен продовжувати обробляти сторінку та завантажувати скрипт у фоновому режимі, а потім запустити цей скрипт, коли сторінка завантажилася.
3 - Атрибут async повідомляє браузеру, що він повинен продовжувати обробляти сторінку та завантажувати скрипт у фоновому режимі, а потім запустити цей скрипт, як тільки він буде завантажений.
Як додати CSS на сторінку?
Перший спосіб — описати селектори та їх значення всередині тегу style.
Другий спосіб — підключити стилі за допомогою додавання посилання на зовнішній файл css, використовують тег link, що розташовується всередині блоку head.
Третій спосіб — додати інлайнові стилі для кожного окремого елемента, використовуючи атрибут style.
Яка різниця між reset.css та normalize.css?
reset.css - скидає всі стилі в нуль для того, щоб можна було розпочати стилізацію сайту з чистого аркуша.
normalize.css - приводить вихідні стилі до єдиного стану, у всіх браузерах.
Що таке critical CSS?
Critical CSS - це стилі, які необхідні для відтворення першої видимої частини сторінки. Для моментального відтворення критичний CSS вбудовують в HTML, всі інші стилі завантажуються окремим файлом асинхронно.
Що таке специфічність селекторів CSS?
Це спосіб, за допомогою якого браузери визначають, які значення властивостей CSS найбільше відповідають елементу і, отже, будуть застосовані. Специфічність є вагою, що надається конкретному правилу CSS.
Найбільшу вагу мають inline стилі. Потім стилі селектора за ID. Найменшу вагу мають селектори по тегу і також селектор*.
Яка різниця між псевдокласом і псевдоелементом в CSS?
Псевдокласи описують особливий стан елементу. Наприклад, стан натиснутої кнопки. Псевдоелементи відповідають віртуальним елементам. Наприклад, потрібно виділити першу літеру в рядку.
