Вопросы по HTML
Ответы на Вопросы кандидату на должность фронтенд-разработчика - Вопросы по HTML.
- Для чего нужен DOCTYPE?
- Как следует оформлять страницу, содержимое которой может быть на разных языках?
- На что необходимо обратить внима ние при разработке мультиязычных сайтов?
- Для чего нужны
data-
атрибуты? - Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
- Объясните разницу между
cookie
,sessionStorage
иlocalStorage
. - Объясните разницу между
<script>
,<script async>
и<script defer>
. - Почему хорошей практикой считается располагать
<link>
для подключения CSS между<head></head>
, а<script>
для подключения JS ставить перед</body>
? Знаете ли вы исключения? - Что такое прогрессивный рендеринг
- Для чего используется атрибут
srcset
в теге изображения? Опишите процесс, который браузер использует при обработке содержимого этого атрибута. - Приходилось ли вам работать с языками HTML-шаблонизации?
- Другие ответы
Для чего нужен DOCTYPE?
DOCTYPE — это сокращение от DOCument TYPE (тип документа). DOCTYPE всегда связан с DTD — Document Type Definition (определение типа документа).
DTD определяет как должны быть структурированы документы определенного типа (т.е. тег button
может содержать в себе тег span
, но не div
), в то время как DOCTYPE объявляет, к какому DTD предположительно относится документ.
Для веб-страниц объявление DOCTYPE необходимо. Он используется для того, чтобы сообщить пользовательскому агенту, к какой версии спецификаций HTML принадлежит ваш документ. Как только пользовательский аг ент распознал правильный DOCTYPE, он запустит режим no-quirks, соответствующий этому DOCTYPE, для чтения документа. Если пользовательский агент не распознает правильный DOCTYPE, он активирует режим quirks.
DOCTYPE для стандарта HTML5 определяется как <!DOCTYPE html>
.
Ссылки
- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
- https://html.spec.whatwg.org/multipage/xhtml.html
- https://quirks.spec.whatwg.org/
Как следует оформлять страницу, содержимое которой может быть на разных языках?
Вопрос немного расплывчатый. Полагаю, что речь о наиболее частом случае: как показывать страницу, где содержимое доступно на нескольких языках, но отображается на одном определенном.
Когда к серверу делается HTTP-запрос, то браузер пользователя обычно отсылает информацию о предпочитаемом языке в заголовке Accept-Language
. Сервер может использовать эту информацию, чтобы вернуть версию документа на подходящем языке, если такая возможность есть. В возвращённом HTML-документе обязательно должен быть указан атрибут lang
у тега <html>
, к примеру <html lang="en">...</html>
.
На бэкенде HTML-разметка будет содержать плейсхолдер i18n, а контент для конкретного языка будет храниться в YAML- или JSON-формате. Сервер динамически формирует HTML-страницу с контентом на конкретном языке, чаще всего при помощи бэкенд-фреймворка.
Ссылки
На что необходимо обратить внимание при разработке мультиязычных сайтов?
- Используйте атрибут
lang
в HTML. - Перенаправляйте пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.
- Текст на картинках плохо поддается адаптации. Многие до сих пор помещают текст на картинки чтобы получить хорошо выглядящий несистемный шрифт на любом компьютере. Однако чтобы перевести текст картинкой, нужно иметь подготовленную картинку с каждой строкой текста для каждого языка. При большом количестве текста это быстро выйдет из-под контроля.
- Ограничение длины слов и предложений. Некоторый текст может быть длиннее при написании на другом языке. Будьте внимат ельны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.
- Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.
- Форматируйте даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в США или «31 мая 2012» в странах Европы.
- Не склеивайте переведённые строки. Не пишите что-то вроде
"Сегодняшняя дата " + date
. Эта фраза будет выглядеть некорректно на языках с другим порядком слов. Вместо этого используйте шаблонную строку с подстановкой параметров для каждого языка. Например, посмотрите на следующие два предложения на русском и китайском соответственно:Я буду путешествовать {% date %}
и{% date %} 我会出发
. Обратите внимание, что положение переменной отличается из-за грамматических правил языка. - Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.
Ссылки
Для чего нужны data-
атрибуты?
До того, как JavaScript-фреймворки стали популярны, фронтенд-разработчики использовали data-
атрибуты чтобы хранить дополнительные данные прямо в DOM без хаков вроде нестандартных атрибутов или дополнительных свойств в DOM. Атрибуты этого семейства предназначены для хранения частных данных пользователя, для которых не существует более подходящих атрибутов или элементов на странице или в приложении.
На сегодняшний день использование data-атрибутов не поощряется. Одной из причин является то, что пользователь может модифицировать данные в атрибуте, используя инспектор кода в браузере. Данные лучше хранить в самом JavaScript и обновлять DOM при помощи связывания данных через библиотеку или фреймворк.
Ссылки
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
- Семантика. Позволяет более точно описать из чего состоит контент.
- Связанность. Позволяет общаться с сервером новыми и инновационными способами.
- Офлайн и хранилище. Позволяют страницам хранить данные локально на клиентской стороне и более эффективно работать в офлайне.
- Мультимедиа. Ставит создание видео и аудио на первое место в вебе.
- 2D/3D-графика и эффекты. Позволяет расширить возможности презентации.
- Производительность и интеграция. Обеспечивает большую скорость оптимизации и лучшее использование аппаратных средств.
- Доступ к устройствам. Позволяет взаимодействовать с различными устройствами ввода и вывода.
- Стилизация. Позволяет создавать более сложные темы оформления.