/frontend-questions-with-answers

Вопросы с ответами для собеседований фронта, собирал для себя, чтобы не потерять

Подбор наиболее частный вопросов на собеседования для фронтэнда с ответами, чтобы освежить память

Пулреквесты с доп. вопросами и ответами приветствуются! Составленно на основе личного опыта прохождения собеседований, а так же с простор интернета.

Очень полезные ресурсы для js:

Вторая часть: https://github.com/yofi2tofi/frontend-questions-with-answers-2

Общие вопросы о веб-разработке:

Используете вы Perfect Pixel или что-то аналогичное?

Следует уточнить про допуски при верстке, 5px - 10px
Можете ли пояснить разницу между progressive enhancement и graceful degradation?

graceful degradation будет пониматься как отказоустойчивость клиентских веб-интерфейсов. Постепенная деградация может выражаться в возможности работы при отключённом JavaScript, в достаточно аккуратном отображении интерфейса в браузере, не поддерживающем новые свойства CSS3, в адекватном отображении сайта при отключенных изображениях. В каждом из этих случаев работа пользователя с интерфейсом будет в принципе возможна, хотя и не так удобна.

Что же такое progressive enhancement? Чаще всего этот термин переводят, как прогрессивное улучшение. Прогрессивное улучшение предполагает, что веб-интерфейсы должны создаваться поэтапно, циклически, от простого к сложному. На каждом из этапов должен получаться законченный веб-интерфейс, который будет лучше, красивее и удобнее предыдущего. Можно сказать, что сейчас таких этапов четыре

  • «Старый-добрый-HTML»
  • «CSS»
  • «CSS3»
  • «JavaScript»

Источник: https://htmlacademy.ru/blog/7-progressive-enhancement

Что такое прогрессивный JPEG?

Подробней: https://habrahabr.ru/post/165645/

Что такое feature detection (определение возможностей браузера)?

Feature detection определяет, поддерживает ли браузер тот или иной блок кода и запускает различный код в зависимости от того, поддерживает или нет, так чтобы браузер всегда мог показать рабочий код, вместо репортов об ошибках.

2 способа определения в js:
  • распарсить юзер-агент, определить версию браузера и писать в коде свитчи по версии браузера
  • Проверить наличие свойства или метода в window(dom, bom, javascript):
if("geolocation" in navigator) {
	navigator.geolocation.getCurrentPosition(function(position) {
	// show the location on a map, perhaps using the Google Maps API
	});
} else {
	// Give the user a choice of static maps instead perhaps
}
1 способ в css:
  • @supports
Подробней:
Как проверить что куки включенны?\* 

if (!navigator.cookieEnabled) {
  alert( 'Включите cookie для комфортной работы с этим сайтом' );
}
Объясните, что означает "Семантическая разметка"

Семантическая вёрстка, или семантический HTML-код, — это подход к созданию веб-страниц на языке HTML, основанный на использовании HTML-тегов в соответствии с их семантикой (предназначением), а также предполагающий логичную и последовательную иерархию страницы. Он противопоставляется подходу, при котором написание HTML-кода определяется внешним видом веб-страницы. Для оформления веб-страниц, написанных в соответствии с семантикой, используются каскадные таблицы стилей (CSS). Стандарт HTML с самого начала включал в себя ряд семантических тегов, но большую популярность семантическая вёрстка получила после начала работ над HTML5.

Источник: https://ru.wikipedia.org/wiki/Семантическая_вёрстка

Как можно оптимизировать загрузку внешних ресурсов на странице?

  • Уменьшите количество HTTP-запросов
  • Используйте поддомены для параллельного скачивания
  • Используйте кэш браузера
  • Используйте CDN для загрузки популярных JavaScript библиотек
  • Используйте Gzip- сжатие

Подробней по каждому пункту: https://habrahabr.ru/post/137239/

Каково преимущество в подгрузке внешних ресурсов с нескольких доменов?

Cогласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера – разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.

Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального)

  • Помещайте CSS файлы в начале страницы
  • Помещайте javascript в конец страницы
  • Минимизируйте css и javascript
  • Оптимизируйте ваши изображения
  • Не масштабируйте изображения

Подробней по каждому пункту: https://habrahabr.ru/post/137239/

Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?

Flash of Unstyled Content (FOUC) – это кратковременное появление неоформленных HTML-элементов в некоторых версиях браузеров – сразу же после создания визуальных элементов и до полного применения стилей CSS.

  • `css {display: block}` на компонент
  • В `` инлайнится код, необходимый для показа минимум 600px высоты страницы без загрузки дополнительных стилей.
Что такое критический путь рендеринга веб-страниц?

Критический путь рендеринга – это набор минимально необходимых для начала отрисовки страницы действий, ресурсов и вычислений.

Критический путь можно измерять в количестве критических ресурсов, минимальном времени загрузки (измеряется в RTT) и объеме критических ресурсов (в байтах).

Для иллюстрации возьмем простейший пример: HTML страницу размером 1 кб без внешних ресурсов. Критический путь будет: 1 ресурс (HTML-документ), 1 RTT (минимально), 1 кб трафика. Однако, таких простых страниц в природе почти не встретить, поэтому покажем, как можно определять критический путь на реальных веб-страницах.

Подробней: https://habrahabr.ru/post/262239/

Что такое WebSQL?

WebSQL DB — это API для доступа к полноценному SQL-хранилищу данных, основанному на SQLite. Впрочем, последнее обстоятельство — скорее, особенность реализации и стандартом не оговаривается, хотя диалект SQL используется именно от SQLite.

Подробней:
Является ли WebSQL частью спецификации HTML 5?

Нет. Многие относят его к HTML 5, но WebSQL не является частью спецификации HTML 5. Спецификация основана на SQLite.

Поддержка браузерами: https://caniuse.com/#search=websql

Является ли, Drag and drop частью спецификации? Какие drag-события Вам известны?

Да, это часть спецификации

dragstart, dragenter, dragover, dragleave, drag, drop, dragend

Подробней: https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Drag_and_drop#events

Является ли Web workers частью спецификации HTML 5?

Да. Worker - это объект, созданный при помощи конструктора (например, Worker()), который запускает JavaScript файл по имени — этот файл содержит код, который будет выполнен в потоке Worker'а; объекты Workers запускаются в другом глобальном контексте, который отличается от текущего window. Таким образом, использование переменной window для получения текущего глобального контекста (вместо self) внутри Worker вернет ошибку.

Является ли service workers частью спецификации HTML 5?

Service worker запускается в контексте worker'ов, поэтому он не имеет доступа к DOM и работает в потоке отдельном от основного потока JavaScript, управляющего вашим приложением, а следовательно — не блокирует его. Он призван быть полностью асинхронным; как следствие, синхронные API, такие как XHR и localStorage, в service worker'е использовать нельзя.

Подробней:
Что такое гиперссылка?

Часть гипертекстового документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, каталог, приложение), расположенный на локальном диске или в компьютерной сети, либо на элементы этого объекта.

Подробней: https://ru.wikipedia.org/wiki/Гиперссылка

Что такое GraphQL?

В двух словах, GraphQL это синтаксис, который описывает как запрашивать данные, и, в основном, используется клиентом для загрузки данных с сервера. GraphQL имеет три основные характеристики:

  • Позволяет клиенту точно указать, какие данные ему нужны.
  • Облегчает агрегацию данных из нескольких источников.
  • Использует систему типов для описания данных.

Подробней: https://habrahabr.ru/post/326986/

Что такое HTTP?

Протокол передачи гипертекста (Hypertext Transfer Protocol - HTTP) это прикладной протокол для передачи гипертекстовых документов, таких как HTML. Он создан для связи между веб-браузерами и веб-серверами, хотя в принципе HTTP может использоваться и для других целей. Протокол следует классической клиент-серверной модели, когда клиент открывает соединение, создаёт запрос, а затем ждет ответа. HTTP - это stateless-протокол, то есть сервер не сохраняет никаких данных (состояние) между двумя парами "запрос-ответ". Несмотря на то, что HTTP основан на TCP/IP, он так же может использовать любой транспорт, который не теряет молча сообщения (то есть он обязан знать дошло ли сообщение до адресата).

Подробней:
Если через консоль, примеру curl'oм, запросить сайт, что мы увидим?

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

Еще желательно знать, как организовывается докачка файлов, после восстановления соединения.

Подробней: https://ru.wikipedia.org/wiki/HTTP

Перечислите хотя бы 4 метода HTTP:

GET, POST, PUT, DELETE

Подробней:
Назовите 5 классов ошибок при HTTP запросе:

  • 1xx Информирование о процессе передачи.
  • 2xx Информирование о случаях успешного принятия и обработки запроса клиента. В зависимости от статуса, сервер может ещё передать заголовки и тело сообщения.
  • 3xx Сообщает клиенту, что для успешного выполнения операции необходимо сделать другой запрос (как правило по другому URI). Из данного класса пять кодов 301, 302, 303, 305 и 307 относятся непосредственно к перенаправлениям (редирект). Адрес, по которому клиенту следует произвести запрос, сервер указывает в заголовке Location. При этом допускается использование фрагментов в целевом URI.
  • 4xx Указание ошибок со стороны клиента. При использовании всех методов, кроме HEAD, сервер должен вернуть в теле сообщения гипертекстовое пояснение для пользователя.
  • 5xx Информирование о случаях неудачного выполнения операции по вине сервера. Для всех ситуаций, кроме использования метода HEAD, сервер должен включать в тело сообщения объяснение, которое клиент отобразит пользователю.
Подробней:
В чем отличия HTTP/1 от HTTP/2?

Протокол HTTP/2 является бинарным. По сравнению с предыдущим стандартом изменены способы разбиения данных на фрагменты и транспортирования их между сервером и клиентом.

В HTTP/2 сервер имеет право послать то содержимое, которое ещё не было запрошено клиентом. Это позволит серверу сразу выслать дополнительные файлы, которые потребуются браузеру для отображения страниц, без необходимости анализа браузером основной страницы и запрашивания необходимых дополнений.

Также часть улучшений получена за счёт мультиплексирования запросов и ответов для преодоления проблемы «head-of-line blocking» протоколов HTTP 1; сжатия передаваемых заголовков и введения явной приоритезации запросов.

Так же поддерживает приоритетность загрузки

Подробней: https://ru.wikipedia.org/wiki/HTTP/2

Где именно хранятся данные session и как сервер понимает как сопоставить конкретные данные session конкретному http запросу?

Сессии могут храниться на клиенте (signed cookie session). При этом используется подпись куки с помощью HMAC, чтобы данные сессии не могли быть свободно изменены клиентом. Но обычно сессии хранятся на сервере. Тут выбор огромный: от баз данных и key-value хранилищ (Redis, например) до простых файлов. При этом, клиенту посылается кука ID сессии (так сервер идентифицирует юзера), которую злоумышленник может стащить. Таким кукам, дабы защитить юзеров от XSS, ставится флаг HttpOnly, который советует браузеру не давать эту куку скриптам вроде JS. В этом случае, стащить куку получится только завладев браузером, файловой системой юзера или через багу браузера.

Подробней: https://developer.mozilla.org/ru/docs/Web/HTTP/Куки

Что такое HTTPS?

HTTPS (HyperText Transfer Protocol Secure) — расширение протокола HTTP для поддержки шифрования в целях повышения безопасности. Данные в протоколе HTTPS передаются поверх криптографических протоколов SSL или TLS. В отличие от HTTP с TCP-портом 80, для HTTPS по умолчанию используется TCP-порт 443

Подробней:
Что такое REST?

REST (Representational State Transfer — «передача состояния представления») — архитектурный стиль взаимодействия компонентов распределённого приложения в сети. REST представляет собой согласованный набор ограничений, учитываемых при проектировании распределённой гипермедиа-системы. В определённых случаях (интернет-магазины, поисковые системы, прочие системы, основанные на данных) это приводит к повышению производительности и упрощению архитектуры. В широком смысле[уточнить] компоненты в REST взаимодействуют наподобие взаимодействия клиентов и серверов во Всемирной паутине. REST является альтернативой RPC.

Подробней:
Что такое протокол-SOAP?

SOAP (Simple Object Access Protocol — простой протокол доступа к объектам) — протокол обмена структурированными сообщениями в распределённой вычислительной среде. Первоначально SOAP предназначался в основном для реализации удалённого вызова процедур (RPC). Сейчас протокол используется для обмена произвольными сообщениями в формате XML, а не только для вызова процедур. Официальная спецификация последней версии 1.2 протокола никак не расшифровывает название SOAP. SOAP является расширением протокола XML-RPC.

Подробней:
Что такое нотация О-большое?

В информатике временна́я сложность алгоритма определяет время работы, используемое алгоритмом, как функции от длины строки, представляющей входные данные. Временная сложность алгоритма обычно выражается с использованием нотации «O» большое, которая исключает коэффициенты и члены меньшего порядка. Если сложность выражена таким способом, говорят об асимптотическом описании временной сложности, т.е. при стремлении размера входа к бесконечности. Например, если время, которое нужно алгоритму для выполнения работы, для всех входов длины n не превосходит 5n3 + 3n для некоторого n (большего некоторого n0), асимптотическая временная сложность равна O (n3).

Подробней:
Опишите несколько способов коммуникаций между серверов и клиентом. Опишите работу нескольких сетевых протоколов на высоком уровне(IP, TCP, HTTP/S/2, UDP, RTC, DNS, etc.).\*

Что такое HMAC?

HMAC (сокращение от англ. hash-based message authentication code, код аутентификации (проверки подлинности) сообщений, использующий хеш-функции) — в информатике (криптографии), один из механизмов проверки целостности информации, позволяющий гарантировать то, что данные, передаваемые или хранящиеся в ненадёжной среде, не были изменены посторонними лицами (см. человек посередине). Механизм HMAC использует MAC, описан в RFC 2104, в стандартах организаций ANSI, IETF, ISO и NIST. MAC — стандарт, описывающий способ обмена данными и способ проверки целостности передаваемых данных с использованием секретного ключа. Два клиента, использующие HMAC, как правило, разделяют общий секретный ключ. HMAC — надстройка над MAC; механизм обмена данными с использованием секретного ключа (как в MAC) и хеш-функций. В зависимости от используемой хеш-функции выделяют HMAC-MD5, HMAC-SHA1, HMAC-RIPEMD128, HMAC-RIPEMD160 и т. п.

Подробней: https://ru.wikipedia.org/wiki/HMAC

Что такое CORS?

CORS (Cross-Origin Resource Sharing,"Совместное использование ресурсов между разными источниками") - это система, состоящая из отправки HTTP заголовков, которые определяют: заблокировать или выполнить запрос к ограниченному ресурсу на веб-странице из другого домена, отличного от домена происхождения запрашиваемого ресурса.

The same-origin security policy ("правило ограничения домена") по умолчанию запрещает междоменные запросы. CORS предоставляет веб-серверам возможность контролировать междоменные запросы и позволяет производить безопасный обмен данными между разными доменами.

Подробней:
Что такое архитектурный-паттерн MVC?

Model-View-Controller (MVC, «Модель-Представление-Контроллер», «Модель-Вид-Контроллер») — схема разделения данных приложения, пользовательского интерфейса и управляющей логики на три отдельных компонента: модель, представление и контроллер — таким образом, что модификация каждого компонента может осуществляться независимо

  • Модель (Model) предоставляет данные и реагирует на команды контроллера, изменяя свое состояние.
  • Представление (View) отвечает за отображение данных модели пользователю, реагируя на изменения модель.
  • Контроллер (Controller) интерпретирует действия пользователя, оповещая модель о необходимости изменений.

Есть passive model & active model. Но из-за веба, этот паттер, претерпел изменения, что вносит смуту, и вряд ли получится найти 3 программиста, у которых совпадет понимание этого паттерна. Главное понимать общие черты, чтобы суметь отличить от MVVM(bindings) ;)

Признаки контроллера:
  • Контроллер определяет, какие представление должно быть отображено в данный момент;
  • События представления могут повлиять только на контроллер.контроллер может повлиять на модель и определить другое представление.
  • Возможно несколько представлений только для одного контроллера;
Подробней:
Что такое архитектурный-паттерн MVP?

Данный подход позволяет создавать абстракцию представления. Для этого необходимо выделить интерфейс представления с определенным набором свойств и методов. Презентер, в свою очередь, получает ссылку на реализацию интерфейса, подписывается на события представления и по запросу изменяет модель.

Признаки презентера:
  • Двухсторонняя коммуникация с представлением;
  • Представление взаимодействует напрямую с презентером, путем вызова соответствующих функций или событий экземпляра презентера;
  • Презентер взаимодействует с View путем использования специального интерфейса, реализованного представлением;
  • Один экземпляр презентера связан с одним отображением.
Подробеней:

https://habrahabr.ru/post/215605/

https://stackoverflow.com/questions/2056/what-are-mvp-and-mvc-and-what-is-the-difference

https://habrahabr.ru/post/171925/

https://habrahabr.ru/company/mobileup/blog/313538/

Что такое архитектурный-паттерн MVVM?

Данный подход позволяет связывать элементы представления со свойствами и событиями View-модели. Можно утверждать, что каждый слой этого паттерна не знает о существовании другого слоя.

Признаки презентера:
  • Двухсторонняя коммуникация с представлением;
  • View-модель — это абстракция представления. Обычно означает, что свойства представления совпадают со свойствами View-модели / модели
  • View-модель не имеет ссылки на интерфейс представления (IView). Изменение состояния View-модели автоматически изменяет представление и наоборот, поскольку используется механизм связывания данных (Bindings)
  • Один экземпляр View-модели связан с одним отображением.
Подробней:

https://habrahabr.ru/post/215605/

https://ru.wikipedia.org/wiki/Model-View-ViewModel

https://habrahabr.ru/company/mobileup/blog/313538/

Что такое DCI?

https://habrahabr.ru/post/151169/

Что такое DOM?

Объектная Модель Документа (DOM) является программным интерфейсом для HTML, XML и SVG документов. Это обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания. DOM обеспечивает представление документа в виде структурированной группы узлов и объектов, которые имеют свойства и методы. По сути, она связывает веб -страницы со скриптами или языками программирования.

DOM (Document Object Model — «объектная модель документа») — это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

Подробней:
Что такое Virtual DOM? Как он работает?

Virtual DOM - это абстракция HTML DOM, которая выборочно отображает поддеревья узлов на основе изменений состояния. Он обеспечивает минимальное количество манипуляций с DOM, чтобы поддерживать ваши компоненты в актуальном состоянии.

Подробней:
Что такое Shadow DOM?

Спецификация Shadow DOM является отдельным стандартом. Частично он уже используется для обычных DOM-элементов, но также применяется для создания веб-компонентов.

Shadow DOM – это внутренний DOM элемента, который существует отдельно от внешнего документа. В нём могут быть свои ID, свои стили и так далее. Причём снаружи его, без применения специальных техник, не видно, поэтому не возникает конфликтов.

Подробней:
Чем отличаются между собой Shadow DOM и Virtual DOM и Regular Dom?

Virtual DOM – полное представление реального DOM. Его самой важной особенностью является группировка изменений и выполнение одиночного повторного рендеринга вместо множества мелких. Если коротко, то можно сказать, что Virtual DOM решает проблемы, связанные с производительностью (Не буду вдаваться в подробности принципа работы Virtual DOM. В рамках этой статьи достаточно знать, зачем он нужен.)

Shadow DOM, как настоящий интроверт, надежно защищает себя от влияния окружающих элементов и не заинтересован и не интересуется изменениями снаружи. Спросите себя, какую главную UI-проблему решают фреймворки типа React и VueJS?

Инкапсуляция

CSS – сложная штука. Все становится еще сложнее, если вы соединяете стили, пытаясь повторно их использовать в различных комбинациях. Это неизбежно приводит к регрессивным ошибкам интерфейса, сложному обслуживанию и плохой масштабируемости. И все же, я считаю, что основная проблема это не CSS, а то, как мы его используем.

Shadow DOM – инструмент, помогающий обойти инкапсуляцию DOM на нативном уровне. Суть не просто в CSS, а в элементах.

В отличие от обычного DOM Shadow DOM идет маленькими кусочками. То есть это не полное представление всего DOM. Представьте Shadow DOM в виде лего, формирующего реальный DOM, где каждый кирпичик представляет собой отдельный DOM.

Shadow DOM – это инкапсуляция.

Подробней:
Что такое ООП и на каких 4х постулатах оно стоит?

абстрагирование для выделения в моделируемом предмете важного для решения конкретной задачи по предмету, в конечном счете — контекстное понимание предмета, формализуемое в виде класса;

инкапсуляция для быстрой и безопасной организации собственно иерархической управляемости: чтобы было достаточно простой команды «что делать», без одновременного уточнения как именно делать, так как это уже другой уровень управления;

наследование для быстрой и безопасной организации родственных понятий: чтобы было достаточно на каждом иерархическом шаге учитывать только изменения, не дублируя все остальное, учтенное на предыдущих шагах;

полиморфизм для определения точки, в которой единое управление лучше распараллелить или наоборот — собрать воедино.

Подробней: https://ru.wikipedia.org/wiki/Объектно-ориентированное_программирование

Что такое инкапсуляция?

Инкапсуляция - это механизм, который объединяет данные и методы, манипулирующие этими данными, и защищает и то и другое от внешнего вмешательства или неправильного использования. Когда методы и данные объединяются таким способом, создается объект.

Подробней:
Какие классификации паттернов проектирования Вы знаете?

Порождающие паттерны беспокоятся о гибком создании объектов без внесения в программу лишних зависимостей.

Структурные паттерны показывают различные способы построения связей между объектами.

Поведенческие паттерны заботятся об эффективной коммуникации между объектами.

Подробней:
Назовите паттерны, которые относятся к порождающим

Назовите паттерны, которые относятся к структурным

Назовите паттерны, которые относятся к поведенческим

Что такое функциональное программирование?

Функциона́льное программи́рование — раздел дискретной математики и парадигма программирования, в которой процесс вычисления трактуется как вычисление значений функций в математическом понимании последних (в отличие от функций как подпрограмм в процедурном программировании).

Противопоставляется парадигме императивного программирования, которая описывает процесс вычислений как последовательное изменение состояний (в значении, подобном таковому в теории автоматов). При необходимости, в функциональном программировании вся совокупность последовательных состояний вычислительного процесса представляется явным образом, например, как список.

Функциональное программирование предполагает обходиться вычислением результатов функций от исходных данных и результатов других функций, и не предполагает явного хранения состояния программы. Соответственно, не предполагает оно и изменяемость этого состояния (в отличие от императивного, где одной из базовых концепций является переменная, хранящая своё значение и позволяющая менять его по мере выполнения алгоритма).

Подробней:

Вопросы по HTML:

Для чего нужен doctype и сколько разновидностей Вы можете назвать?

Элемент DOCTYPE предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать DOCTYPE.

  • HTML 4.01
  • HTML 5
  • XHTML 1.0
  • XHTML 1.1
Что такое режим совместимости (Quirks Mode) и стандартный режим (Standards Mode)

На сегодняшний день существует три режима отображения, которые используются движками разметки (layout engines) браузеров: режим совместимости (quirks mode), частично стандартный режим (almost standards mode) и стандартный режим (full standards mode). В режиме совместимости (quirks mode), разметка эмулирует нестандартное поведение браузеров Navigator 4 и Internet Explorer 5. Этот режим необходим для поддержки сайтов, созданных до начала широкого применения веб стандартов. В стандартном режиме (full standards mode) поведение браузера соответствует (будем надеяться) описанному в спецификациях HTML и CSS. В частично стандартном режиме (almost standards mode) реализовано лишь незначительное количество так называемых "странностей" (quirks).

Если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, броузер перейдет в «загадочный» (quirk) режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов, т.е. так, как писали в конце 90-ых годов. В этом режиме броузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-ой версии, а DOM будет работать так, как он работал именно в этом броузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще в бог знает что).

Подробней
В чем разница между HTML и XHTML?

  • XHTML - это приложение XML, которое является довольно строгим языком с угловыми скобками.
  • HTML - это приложение SGML, которое является гораздо менее строгим языком с угловой скобкой.
  • (XML также является применением SGML.)

При написании кода XHTML придерживаются того же синтаксиса, который характерен для HTML. При этом разница между HTML и XHTML состоит в наборе некоторых обязательных правил.

Правила XHTML следующие.
  • Все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами).
  • Значения любых атрибутов необходимо заключать в кавычки.
  • Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег.
  • Должна соблюдаться правильная вложенность тегов.
  • Нельзя использовать сокращенные атрибуты тегов.
  • Вместо атрибута name следует указывать id.
  • Следует определять DTD (document type definition, описание типа документа) с помощью элемента DOCTYPE.

Подробнее с примерами: http://htmlbook.ru/xhtml/sintaksis-xhtml

Могут ли возникнуть проблемы при подаче страниц с типом application/xhtml+xml?

MIME (Multipurpose Internet Mail Extensions, многоцелевые расширения интернет-почты) — стандарт Интернет, является частью протокола HTTP. Задача MIME это идентификация типа содержимого документа по его заголовку. К примеру, текстовый файл имеет тип text/plain, а HTML-файл — text/html. Отправка заголовка обычно происходит на основе расширения файла веб-сервером.

Документы XHTML по умолчанию отправляются как text/html, что в действительности говорит о том, что мы имеем дело с HTML, а не XHTML-файлом. Чтобы задействовать возможности XHTML требуется отдавать файл с типом application/xhtml+xml. Если у вас установлен веб-сервер Apache, то вы можете сделать это через директиву AddType, добавив следующую строку в файл .htaccess, расположенный в корне сайта.

AddType application/xhtml+xml .xhtml

В данном случае мы говорим, что все файлы с расширением .xhtml отдавать как application/xhtml+xml. Если документы формируются через PHP, то можно отдавать заголовок следующим образом:

header ("Content-type: application/xhtml+xml");

Учтите, что эта строка должна идти до вывода любого текста на странице.

Браузер Internet Explorer до версии 8.0 включительно не поддерживает тип application/xhtml+xml и не сможет отобразить страницу, которая отдаётся с этим типом. Остальные браузеры, в том числе IE9, понимают этот тип как переход в стандартный режим.

Тип application/xhtml+xml необходим в случае, когда в документе применяется MathML (Mathematical Markup Language, язык математической разметки), предназначенный для добавления формул или SVG (Scalable Vector Graphics, масштабируемая векторная графика), язык разметки для создания на странице векторных рисунков. Если вы ничего не знаете об этих технологиях и пока не собираетесь их использовать, лучше отдавать документ как text/html. Это позволит охватить наибольшее количество браузеров и поисковых систем.

По сути, тип text/html для файлов с расширением .html или .htm настроен автоматически, поэтому не требуется предпринимать каких-либо действий для этого типа.

согласование содержимого для переключения между application/xhtml+xml и text/html так же, как вы описываете, не замечая проблем с поисковыми роботами. Строго говоря, вы должны учитывать значения q в заголовке accept, который указывает предпочтение пользовательского агента к каждому типу контента. Если пользовательский агент предпочитает принимать text/html, но будет принимать application/xhtml+xml в качестве альтернативы, то для обеспечения максимальной безопасности вы должны иметь страницу text/html.

Какая связь между SGML, HTML, XML и XHTML?

SGML (Standard generalized markup language — стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.

HTML – это язык разметки, который описывается с помощью SGML.

Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию «DOCTYPE» в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Разбор кода по стандарту SGML был связан с определёнными трудностями, поэтому был создан XML, чтобы облегчить эту процедуру. XML использует SGML. Например, в SGML вы должны использовать открывающие и закрывающие теги, тогда как в XML вы можете использовать самозакрывающиеся теги, которые закрываются автоматически. XHML был создан из XML и использовался в HTML 4.0. Поэтому, например, в HTML, основанном на SGML, тег недопустим, а в XHTML он допускается. Вы можете использовать XML определение документа, как показано в следующем примере:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML.

Как следует оформлять страницу, в которой контент может быть на разных языках?

От гугла: https://support.google.com/webmasters/answer/182192?hl=ru

Чем полезны data- атрибуты?

HTML5 спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или Node.setUserData().

Синтаксис HTML 
<article
	id="electriccars"
	data-columns="3"
	data-index-number="12314"
	data-parent="cars">
</article>

Доступ в JavaScript

var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

Доступ в CSS

article::before {
	content: attr(data-parent);
}

Подробнее: https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Using_data_attributes

Если рассматривать HTML5 как открытую web-платформу, на чем она строится, из каких компонентов состоит?

HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 году (предыдущая, четвёртая, версия опубликована в 1999 году), ещё с 2013 года[4] браузерами оперативно осуществлялась поддержка, а разработчиками — использование рабочего стандарта (англ. HTML Living Standard). Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.

Во всемирной паутине долгое время использовались стандарты HTML 4.01, XHTML 1.0 и XHTML 1.1. Веб-страницы на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например веб-браузеров, а также сложившихся общеупотребительных приёмов. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений.

В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы video, audio и canvas, а также возможность использования SVG и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования сторонних API и плагинов. Другие новые элементы, такие как section, article, header и nav, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удалён. Некоторые элементы, например a, menu и cite, были изменены, переопределены или стандартизированы. API и DOM стали основными частями спецификации HTML5. HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами.

Подробнее: https://ru.wikipedia.org/wiki/HTML5

В чем отличия HTML5 от HTML4.01 и XHTML1.0

Ниже представлен список отличий(не все):

  • Изменён синтаксис
  • Встраивание SVG и MathML в text/html
  • Новые элементы:

    <article>, <aside>, <audio>, <canvas>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <keygen>, <main>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time>, <video>, <wbr>

  • Новые компоненты ввода:

    date/time, email, url, search, number, range, tel, color

  • Новые атрибуты: charset (в meta), async (в script)
  • Глобальные атрибуты, которые могут быть применены ко всем элементам: id, tabindex, hidden, data-* (пользовательские атрибуты данных)
  • Элементы, которые будут исключены:

    <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <isindex>, <noframes>, <strike>, <tt>

Подробнее: https://ru.wikipedia.org/wiki/HTML5

Что такое HTTP cookie?

HTTP cookie (web cookie, cookie браузера) - это небольшой фрагмент данных, отправляемый сервером на браузер пользователя, который тот может сохранить и отсылать обратно с новым запросом к данному серверу. Это, в частности, позволяет узнать, с одного ли браузера пришли оба запроса (например, для аутентификации пользователя). Они запоминают информацию о состоянии для протокола HTTP, который сам по себе этого делать не умеет.

Получив HTTP-запрос, вместе с откликом сервер может отправить заголовок Set-Cookie с ответом. Cookie обычно запоминаются браузером и посылаются в значении заголовка HTTP Cookie с каждым новым запросом к одному и тому же серверу. Можно задать срок действия cookie, а также срок его жизни, после которого cookie не будет отправляться. Также можно указать ограничения на путь и домен, то есть указать, в течении какого времени и к какому сайту оно отсылается.

Подробней: https://developer.mozilla.org/ru/docs/Web/HTTP/Куки

Что такое Secure ("безопасные") и HttpOnly cookies?

"Безопасные" (secure) cookie отсылаются на сервер только если запрос выполняется по протоколу SSL и HTTPS. Однако важные данные никогда не следует передавать или хранить в cookies, поскольку сам их механизм весьма уязвим в отношении безопасности, а флаг secure никакого дополнительного шифрования или средств защиты не обеспечивает. Начиная с Chrome 52 and Firefox 52, незащищенные сайты (http:) не могут создавать куки с флагом secure.

Куки HTTPonly не доступны из JavaScript через свойства Document.cookie, и через XMLHttpRequest и Request API, что помогает избежать межсайтового скриптинга (XSS). Устанавливайте этот флаг для тех cookie, к которым не требуется обращаться через JavaScript. В частности, если куки используются только для поддержки сеанса, то в JavaScript они не нужны, так что в этом случае следует устанавливать флаг HttpOnly.

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

Подробней: https://developer.mozilla.org/ru/docs/Web/HTTP/Куки

Объясните разницу между cookies, sessionStorage и localStorage.

  • LocalStorage
    Плюсы:
    • Веб-хранилище можно рассматривать упрощенно как усовершенствование файлов cookie, обеспечивая гораздо большую емкость хранилища. Если вы посмотрите исходный код Mozilla, мы увидим, что 5120KB (5 МБ), равный 2,5 миллионам символов в Chrome), является размером хранилища по умолчанию для весь домен. Это дает вам значительно больше возможностей для работы, чем обычный cookie 4 КБ.
    • Данные не отправляются обратно на сервер для каждого HTTP-запроса (HTML, изображения, JavaScript, CSS и т.д.) - уменьшение количества трафика между клиентом и сервером.
    • Данные, хранящиеся в localStorage, сохраняются до явного удаления. Сделанные изменения сохраняются и доступны для всех текущих и будущих посещений сайта.
    Минусы:
    • Он работает в политике одного и того же происхождения. Таким образом, сохраненные данные будут доступны только в том же месте.
  • Cookies
    Плюсы:
    • По сравнению с другими, ничего.
    Минусы:
    • Предел 4Kб предназначен для всего файла cookie, включая имя, значение, дату истечения срока годности и т.д. Чтобы поддерживать большинство браузеров, держите имя менее 4000 байт и общий размер файла cookie под 4093 байтами.
    • Данные отправляются обратно на сервер для каждого HTTP-запроса (HTML, изображения, JavaScript, CSS и т.д.) - увеличение количества трафика между клиентом и сервером.
    Обычно допустимы следующие действия:
    • 300 файлов cookie
    • 4096 байт для каждого файла cookie
    • 20 файлов cookie для каждого домена
    • 81920 байт для каждого домена (задано 20 файлов cookie максимального размера 4096 = 81920 байт.)
  • sessionStorage
    Плюсы:
    • Он похож на localStorage.
    • Изменения доступны только для каждого окна (или вкладки в браузерах, таких как Chrome и Firefox). Сделанные изменения сохраняются и доступны для текущей страницы, а также для будущих посещений сайта в том же окне. Когда окно закрыто, хранилище удаляется.
    Минусы:
    • Данные доступны только внутри окна/вкладки, в котором он был установлен.
    • Данные не сохраняются, т.е. будут потеряны после закрытия окна/вкладки.
    • Подобно localStorage, работает в политике одинакового происхождения. Таким образом, сохраненные данные будут доступны только в том же месте.
Подробней:
Каким способом, возможно вложить js-объект в localstorage?

localStorage.setItem(‘Object’, JSON.stringify(Object))

Нужно ли в 5-м ХТМЛ закрывать /> одиночные теги ?

По спецификации - не нужно. Закрывающие слэши предполагаются в XHTML, а в HTML (любой версии) они не нужны.

По здравому смыслу - тоже не нужно. Валидатор w3c так же не ругается.

Что такое кэш приложения в HTML5?

Доступность в оффлайне становится всё более важной для веб-приложений. Да, все браузеры имеют механизмы кэширования, но они ненадежны и работают не всегда ожидаемо. HTML5 устраняет некоторые из этих неприятностей с помощью интерфейса ApplicationCache.

Использование интерфейса кэша даёт вашему приложению три преимущества:

  • автономный просмотр — пользователи могут исследовать ваш сайт целиком, когда они находятся в оффлайне;
  • скорость — ресурсы кэшируются локально, поэтому загружаются быстрее;
  • снижение нагрузки на сервер — браузер загружает с сервера только изменённые ресурсы.
  • Кэш приложения (или AppCache) позволяет разработчику указать, какие файлы браузер должен кэшировать и сделать доступными для оффлайновых пользователей. Ваше приложение будет работать корректно, даже если пользователь нажимает кнопку «Обновить», находясь в автономном режиме.

Подробней, как настроить и обновлять: http://htmlbook.ru/blog/rukovodstvo-po-ispolzovaniyu-kesha-prilozheniya

Дайте описание след. разделам в файле манифеста кеша: CACHE, NETWORK и FALLBACK.

  • CACHE - Это стандартный раздел для записи. Файлы, перечисленные в этом блоке (или сразу после CACHE MANIFEST) будут явно кэшированы после того как они скачаны в первый раз.
  • NETWORK - Файлы, перечисленные в этом разделе, это ресурсы, которые требуют подключения к серверу. Все запросы к этим ресурсам идут в обход кэша, даже если пользователь находится в оффлайне. Можно использовать * для задания шаблона.
  • FALLBACK Дополнительный раздел указывает резервные страницы, если ресурс недоступен. Первый URL является ресурсом, второй резервом. Оба адреса должны быть относительны и быть в том же месте, что и файл манифеста. Можно использовать * для задания шаблона.

Подробней, как настроить и обновлять: http://htmlbook.ru/blog/rukovodstvo-po-ispolzovaniyu-kesha-prilozheniya

Объясните разницу между ```<script>, <script async> и <script defer>```

Просто script с src:
  • Получить страницу HTML (например, index.html)
  • Начните синтаксический анализ HTML
  • Парсер встречает тег ```<script>```, ссылающийся на внешний файл script.
  • Браузер запрашивает файл script. Между тем, синтаксический анализатор блокирует и останавливает анализ другого HTML на вашей странице.
  • Через некоторое время загрузится и затем выполняется script.
  • Парсер продолжает анализировать остальную часть HTML-документа.

async: Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении ```<script async src="...">``` браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится.

defer: Поддерживается всеми браузерами, включая самые старые IE. Скрипт также выполняется асинхронно, не заставляет ждать страницу, но есть два отличия от async.

Первое – браузер гарантирует, что относительный порядок скриптов с defer будет сохранён.

Второе отличие – скрипт с defer сработает, когда весь HTML-документ будет обработан браузером.

Подробнее: https://learn.javascript.ru/external-script#асинхронные-скрипты-defer-async

Какое будет поведение ```<script async defer>```?

При одновременном указании async и defer в современных браузерах будет использован только async, в IE9- – только defer (не понимает async).

Подробнее: https://learn.javascript.ru/external-script#асинхронные-скрипты-defer-async

Что такое прогрессивный рендеринг?

Прогрессивное рендеринг - это имя, данное методам, используемым для рендеринга содержимого для отображения как можно быстрее. Раньше он был гораздо более распространенным в дни перед широкополосным доступом в Интернет, но он по-прежнему полезен в современном развитии, поскольку мобильные соединения данных становятся все более популярными (и ненадежными!)

Примеры таких методов:
  • Ленивая загрузка изображений, где (как правило) некоторые javascript загружают изображение, когда оно попадает в окно просмотра браузеров, вместо загрузки всех изображений при загрузке страницы.
  • Приоритет видимого содержимого (или выше рендеринга сложения), где вы включаете только минимальные css/content/скрипты, необходимые для количества страницы, которая будет отображаться в чтобы браузер отображался как можно быстрее, вы можете использовать отложенный javascript (domready/load) для загрузки других ресурсов и контента.
Подробнее:
Что такое meta теги?

`````` определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере ``````. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.

Аттрибуты:
  • charset: Задает кодировку документа.
  • content: Устанавливает значение атрибута, заданного с помощью name или http-equiv.
  • http-equiv: Предназначен для конвертирования метатега в заголовок HTTP.
  • name: Имя метатега, также косвенно устанавливает его предназначение.

Подробнее об аттрибутах: http://htmlbook.ru/html/META

Как можно с помощью meta-тега, указать HTTP - заголовок?

<meta http-equiv="Content-Type" content="text/html" />

Много подброней: https://ru.wikipedia.org/wiki/Метатеги

Расскажите о meta-теге с name=viewport

Типичный сайт, оптимизированный для мобильных устройств, содержит следующий мета-тег:

<meta name="viewport" content="width=device-width, initial-scale=1">

Свойство width определяет размер окна просмотра. Он может быть установлен на определенное количество пикселей, скажем,width=600 или на специальное значение device-width, которое означает ширину экрана в пикселях CSS в масштабе 100%. (Есть также соответствующие значения height и device-height, которые могут быть полезны для страниц с элементами, которые изменяют размер или положение на основе высоты окна просмотра).

Свойство initial-scale контролирует уровень масштабирования при первой загрузке страницы. Свойства maximum-scale, minimum-scale и user-scalable определяют, как пользователям разрешено увеличивать или уменьшать страницу.

"user-scalable=no" запрещается любое масштабирование

Подброней: https://developer.mozilla.org/ru/docs/Mozilla/Mobile/Viewport_meta_tag

Какие теги практически обязательно должны быть в ```head```? 

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Use the content="ie-edge" tag if your project
    supports Internet Explorer prior to version 11. -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Page Title</title>

Много больше информации о том, что должно быть в head: https://gethead.info/

Есть ли разница: `meta charset="utf-8"` и `meta http-equiv="Content-Type" content="text/html; charset=utf-8"`?

В HTML5 они эквивалентны

Используйте ```meta charset="utf-8"``` для веб-браузеров при использовании HTML5.

Используйте ```meta http-equiv="Content-Type" content="text/html; charset=utf-8"``` при использовании HTML4 или XHTML или для устаревших парсеров dom, например DOMDocument в php

Как сделать чтобы все гиперссылки сайта открывались в новом окне, т.е чтобы по умолчанию использовался `target="_blank"`?

Нужно в области head прописать тег base с атрибутом `target="_blank"`:

<head><base target=”_blank”></head>
А как теперь быть, если какую-то из гиперссылок я захочу открыть в этом же окне, т.е. не создавая новое?

В тег `a` этой ссылки вам уже нужно будет добавить атрибут `target="_self"`, ибо по умолчанию сейчас у нас используется `target="_blank"`

Что такое аттрибут target и какие значения он принимает и что делает?

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . В XHTML применение этого атрибута запрещено. Все значения аттрибуты начинаются с \_

  • blank - Загружает страницу в новое окно браузера.
  • self - Загружает страницу в текущее окно.
  • parent - Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как self.
  • top - Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как self.

Подробней: http://htmlbook.ru/html/a/target

Что такое абсолютная и относительная ссылка?

  • <a href=”http://google.com/example.html”>Абсолютная ссылка</a>

  • <a href=”../../example.html”>Относительная ссылка</a>

Какие новые элементы форм введены в HTML 5?

В HTML 5 введены десять новых важных элементов форм:
  • Color;
  • Date;
  • Datetime-local;
  • Email;
  • Time;
  • Url;
  • Range;
  • Telephone;
  • Number;
  • Search;
Что такое элемент datalist в HTML 5?

Элемент datalist в HTML 5 помогает реализовать функцию автозаполнения в поле для ввода.

<input list="Country">
<datalist id="Country">
	<option value="India">
	<option value="Italy">
	<option value="Iran">
	<option value="Israel">
	<option value="Indonesia">
</datalist>

Подробней: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

Что такое элемент output в HTML 5?

Элемент output требуется, когда вы хотите отобразить сумму двух введённых чисел в виде текста. Например, у вас есть два поля для ввода и вы хотите сложить числа из этих двух полей и отобразить их сумму в виде текста. Ниже приведён пример использования элемента output в HTML 5:

<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
	<input name="a" type="number"> +
	<input name="b" type="number"> =
	<output name="o" />
</form>

Вы можете заменить «parseInt» на «valueAsNumber» для простоты. Также вы можете использовать атрибут «for» элемента output для повышения читаемости.

<output name="o" for="a b"></output>

Подробней: http://htmlbook.ru/blog/element-output

Что такое свойство valueAsNumber?

В HTML5 представлено свойство JavaScript valueAsNumber для полей формы (в частности: number, date, range). Оно возвращает значение в виде числа, а не строки, то есть нам больше не нужно использовать parseInt или parseFloat, и оператор + складывает, а не склеивает.

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
	<input name="a" id="a" type="number" step="any"> +
	<input name="b" id="b" type="number" step="any"> =
	<output name="o" for="a b"></output>
</form>

Подробней: http://htmlbook.ru/blog/element-output

Для чего нужен атрибут autocomplete? Какие параметры принимает?

Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках и не может в таком случае управляться атрибутом autocomplete.

  • on - Включает автозаполнение текста.
  • off - Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).

Подробней: http://htmlbook.ru/html/input/autocomplete

Какой формат у input type="date" в HTML5

YYYY-MM-DD

Какой метод запускает проигрывание аудио-файла?

var sound = new Audio(«file.wav»);

sound.play();

Какой формат видео файлов сейчас поддерживается html5?

MPEG 4

Какие элементы в HTML5 могут иметь aria атрибут?

Любой элемент

Знаете ли вы тег dfn и за что он отвечает?

Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю. Тег dfn применяется для выделения таких терминов при их первом появлении в тексте.

Браузеры отображают содержимое контейнера с помощью курсивного начертания.

Подробней: http://htmlbook.ru/html/DFN

Что такое SVG?

язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую.

Подробней: https://ru.wikipedia.org/wiki/SVG

Что такое canvas в HTML 5?

Это HTML элемент, использующийся для рисования графики средствами языков программирования (обычно это JavaScript). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой (и не очень) анимации. Изображения в правой части статьи являются примерами использования , примеры их создания приводятся в этой статье.

Подробней: https://developer.mozilla.org/ru/docs/Web/API/Canvas_API/Tutorial

В чём разница между canvas и SVG?

  • SVG
    Плюсы:
    • Нет зависимости от разрешения — SVG лучше подходит для кроссплатформенных пользовательских интерфейсов, так как позволяет масштабировать изображение при различных разрешениях экрана.
    • SVG очень хорошо поддерживает анимацию. Элементы могут быть анимированы с использованием описательного синтаксиса или с помощью JavaScript.
    • Можно получить полный контроль над каждым элементом, используя SVG DOM API в JavaScript.
    • SVG хранится в формате XML, что предоставляет больше возможностей браузерам по обеспечению доступности SVG документов по сравнению с элементом canvas. Таким образом, SVG выглядит лучшим решением для пользовательских интерфейсов веб-приложений.
    Минусы:
    • Низкая скорость рендеринга при увеличении сложности документа (рисунка), так как используется модель DOM
    • Скорее всего, SVG не подходит для таких приложений как игры. Возможно лучшим выбором будет комбинация HTML Canvas + SVG.
  • Canvas
    Плюсы:
    • Высокая производительность при отрисовке любых 2D объектов.
    • Стабильная производительность — всё есть пиксель. Производительность падает только при увеличении разрешения изображения.
    • Можно сохранить полученное изображение в PNG или JPG файл.
    • Лучше всего подходит для создания растровой графики (например, в играх, фракталов и т.п.), редактирования изображений и операций, требующих манипулирования на уровне пикселей.
    Минусы:
    • Отрисовка основана на пикселях.
    • Не существует API для анимации. Вам придется прибегать к использованию таймеров и других событий для обновления канвы.
    • Слабые возможности по рендерингу текста.
    • Возможно, не самый лучший выбор, когда доступность имеет решающее значение. Канва предоставляет вам поверхность для рисования в выбранном контексте (2D и 3D). Можно указать альтернативный контент внутри элемента canvas, который будет показан браузером при невозможности отображения графики. Кроме того, вы можете выполнить проверку доступности выбранного Canvas API с помощью JavaScript. На основе этого вы можете обеспечить различную функциональность для пользователей браузеров с разной поддержкой HTML 5 Canvas.
    • HTML 5 Canvas не подходит для создания веб-сайтов или интерфейсов веб-приложений, так как пользовательские интерфейсы обычно должны быть динамическими и интерактивными, а Canvas требует от вас постоянной перерисовки каждого элемента в интерфейсе.
Подробней:
  • https://habrahabr.ru/company/simbirsoft/blog/332750/
  • https://developer.mozilla.org/ru/docs/Web/API/Canvas_API/Tutorial
В каких случаях лучше выбрать canvas, а в каких svg?

  • HTML 5 Canvas следует использовать для:
    • Редактирования изображений: обрезки, изменения размеров, фильтров (удаления эффекта красных глаз, создания эффекта сепии, изменения цветности или яркости)
    • Создания растровой графики: визуализации данных, создания фракталов и графиков функций.
    • Анализа изображений: создания гистограмм и т.п.
    • Создания игровой графики, такой как спрайты и фоны.
  • SVG следует использовать для:
    • Создания пользовательских интерфейсов веб-приложений, независимых от разрешения экрана.
    • Высокоинтерактивных анимированных пользовательских интерфейсов.
    • Графиков и диаграмм.
    • Редактирования векторных изображений.
Что такое WebGL?

WebGL (Web-based Graphics Library) — программная библиотека для языка программирования JavaScript, позволяющая создавать на JavaScript интерактивную 3D-графику, функционирующую в широком спектре совместимых с ней веб-браузеров. За счёт использования низкоуровневых средств поддержки OpenGL, часть кода на WebGL может выполняться непосредственно на видеокартах. WebGL — это контекст элемента canvas HTML, который обеспечивает API 3D графики без использования плагинов. Спецификация версии 1.0 была выпущена 3 марта 2011 года. Проект по созданию библиотеки управляется некоммерческой организацией Khronos Group.

Подробней: https://ru.wikipedia.org/wiki/WebGL

Перечислите блочные элементы, которые Вам известны(хотя бы 5).

<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>

Подробней: https://developer.mozilla.org/ru/docs/Web/HTML/Block-level_elements

Перечислите строчные элементы, которые Вам известны(хотя бы 5).

  • b, big, i, small, tt

  • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, time, var

  • a, bdo, br, img, map, object, q, script, span, sub, sup

  • button, input, label, select, textarea

Подробней: https://developer.mozilla.org/ru/docs/Web/HTML/Строчные_Элементы

Дайте пояснения, для какой цели добавленны след. элементы: article, aside, audio, canvas, figcaption, figure, footer, header, hgroup, output, section, video. (Кратко)

  • article: Тег article задает содержание сайта вроде новости, статьи, записи блога, форума или др. Элемент должен содержать часть самодостаточной информации, которая может быть вырвана из контекста всей страницы без потери смысла.
  • aside: Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель».
  • audio: Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег source. Внутри контейнера audio можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.
  • canvas: Это HTML элемент, использующийся для рисования графики средствами языков программирования (обычно это JavaScript).
  • figcaption: Содержит описание для тега figure. Тег figcaption должен быть первым или последним элементом в группе.
  • figure: Используется для группирования любых элементов, например, изображений и подписей к ним.
  • footer: Тег footer задаёт «подвал» сайта или раздела, в нём может располагаться имя автора, дата документа, контактная и правовая информация.
  • header: Тег header задает «шапку» сайта или раздела, в которой обычно располагается заголовок.
  • hgroup: Используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от h1 до h6. Данный тег исключён из версии HTML от W3C, но остался в версии WHATWG, будущее элемента пока не определено.
  • output: Определяет область в которую выводится информация, преимущественно с помощью скриптов.
  • section: Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один тег section внутрь другого.
  • video: Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег source.
Подробней:
  • https://developer.mozilla.org/ru/docs/Web/HTML/Element/article
  • https://developer.mozilla.org/ru/docs/Web/HTML/Element/aside
  • https://developer.mozilla.org/ru/docs/Web/HTML/Element/audio
  • https://developer.mozilla.org/ru/docs/Web/HTML/Element/canvas
  • https://developer.mozilla.org/ru/docs/Web/HTML/Element/figure
  • https://developer.mozilla.org/ru/docs/Web/HTML/Element/footer
  • https://developer.mozilla.org/ru/docs/Web/HTML/Element/header
  • https://developer.mozilla.org/ru/docs/Web/HTML/Element/hgroup
  • https://developer.mozilla.org/ru/docs/Web/HTML/Element/section
  • https://developer.mozilla.org/ru/docs/Web/HTML/Element/video
На какие события video или audio можно подписаться?(Кандидат может не знать ни одного. Это легко гуглится в работе)

abort, canplay, ended, loadstart, pause, play, playing

Подробней: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

Чем отличается article от section?

Чтобы не было путаницы, разберём где и когда использовать разные контейнеры:
  • div — контейнер общего назначения, не обязательно смысловой. Дивы используются для разметки мелких блоков, создания сетки и декоративных эффектов.
  • section — более крупный логический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле и так далее.
  • article — самостоятельный, цельный и независимый раздел документа. Этот раздел можно в неизменном виде использовать в различных местах, в том числе и на других сайтах. Примеры: статья, пост в блоге, сообщение на форуме и так далее.

Подробней: https://habrahabr.ru/post/214407/

Для чего нужен тег noscript?

Элемент HTML noscript определяет секцию html кода, которая будет вставлена, если в браузере пользователя нет либо отключена поддержка JavaScript'а.

Подробней: https://developer.mozilla.org/ru/docs/Web/HTML/Element/noscript

Что такое категории контента в HTML5, cколько их, расскажите о них.

Каждый элемент HTML принадлежит некоторому количеству категорий контента, которые объединяют элементы с общим набором характеристик. Такая группировка является свободной, то есть не задает на самом деле отношение между элементами таких типов, но помогает определить и описать их поведение и правила, которым они должны следовать, особенно когда дело доходит до сложных деталей. Также возможна ситуация, когда элемент не входит ни в одну из этих категорий.

Существует три типа категорий контента:
  • Основные категории контента, описывающие общие для многих элементов правила;
  • Категории контента для элементов форм, описывающие общие правила для элементов форм;
  • Особые категории контента, описывающие редкие категории, актуальные только для нескольких элементов, возможно, лишь в особом контексте.

Подробней: https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories

Какие категории считаются основными категориями контента?

  • Метаданные: Элементы, принадлежащие к категории метаданных, изменяют отображение или поведение HTML-документа, связывают его с другими документами и предоставляют другую дополнительную информацию о документе.
  • Потоковый контент: Элементы основного потока обычно содержат текст и встроенный контент.
  • Секционный контент: Подобные элементы создают секции (блоки) в текущей структуре документа, определяющие область действия заголовочного контента и элементов header и footer
  • Заголовочный контент: Заголовочный контент задает заголовок секции, явно отмеченной структурным элементом или неявно – самим заголовочным.
  • Фразовый контент: Фразовый контент определяет текст и его формат. Серии фразового контента образуют параграфы.
  • Встроенный контент: Встроенный контент импортирует в документ другой ресурс или вставляет содержимое на другом языке разметки или принадлежащее другому пространству имен.
  • Интерактивный контент: К интерактивному контенту относятся элементы, который специально разработаны для взаимодействия с пользователем.
  • Явный контент: Контент считается явным, когда он не скрыт и не является пустым, это контент, который отображен и предметен. У элементов потокового или фразового контента должен быть хотя бы один явный узел.
  • Контент форм: Контент форм включает в себя элементы, у которых есть владелец формы, обозначенный атрибутом form. Владелецем формы является либо элемент form либо элемент, id которого указан в атрибуте form.

Подробней: https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories

Отличие i от em и strong от b т. д.?

Следует отметить, что теги b и strong, также как i и em, несмотря на сходный результат, не совсем эквивалентны и заменяемы. Первый тег b — относится к тегам физической разметки и устанавливает жирный текст, а тег strong — является тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов b и strong, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

Можно ли вложить p в другой такой же p? Можно ли вложить div в p?

Синтаксически div и p внутри p является недопустимым во всех стандартах HTML. Более того, при использовании соответствующего парсера HTML невозможно разместить элемент div внутри p в DOM, потому что открывающий тег div автоматически закрывает элемент p.

Какие теги запрещены в html5? (хотя бы 3, не страшно если ни одного)

<applet> <ins> <col />, <colgroup> <area /> <basefont /> <center> <bdo> <dir> <font> <frame /> <frameset> <iframe> <isindex> <noframes> <strike> <u> <tbody> <tfoot> <thead>

Чем отличается класс (class) от идентификатора (id) в HTML?

Идентификаторы:
  • В коде документа каждый идентификатор уникален и должен быть включён лишь один раз.
  • Имя идентификатора чувствительно к регистру.
  • Через метод getElementById можно получить доступ к элементу по его идентификатору и изменить свойства элемента.
  • Стиль для идентификатора имеет приоритет выше, чем у классов.
Классы:
  • Классы могут использоваться в коде неоднократно.
  • Имена классов чувствительны к регистру.
  • Классы можно комбинировать между собой, добавляя несколько классов к одному тегу.
Какое событие сработает при потери фокуса элементом формы?

Событие onblur возникает при потере элемента фокуса. Это обычно происходит, если щелкнуть на другой элемент текущего документа. Событие onblur противоположно по своему действию событию onfocus.

Подробенй:
  • http://htmlbook.ru/html/attr/onBlur
  • https://developer.mozilla.org/ru/docs/Web/Events/blur
Для чего существует тег q?

Тег q используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.

Подробней: http://htmlbook.ru/html/Q

Что такое "Якорь"?

Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.

Подробней: http://htmlbook.ru/samhtml/yakorya

Расскажите про тег keygen

Используется для генерации пары ключей — закрытого и открытого. Когда форма отправляется на сервер, закрытый ключ сохраняется на локальном компьютере, а открытый ключ передается вместе с формой. Сами ключи необходимы для шифрования и расшифровки данных, создания и проверки цифровой подписи.

Подробней:
  • http://htmlbook.ru/html/KEYGEN
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/keygen
Для олдскульных ребят, существует ли тег basefont и за что он отвечает?

Не существует, ни за что не отвечает

Существовал, убран из html5

Тег basefont предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега font, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере head или body, причем несколько раз. Это позволяет изменять вид шрифта для части документа.

Подробней: http://htmlbook.ru/html/basefont