Вопросы по HTML | Front End Interview Handbook
Ответы на Вопросы кандидату на должность фронтенд-разработчика — Вопросы по 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-страницу с контентом на конкретном языке, чаще всего при помощи бэкенд-фреймворка.
Ссылки
- https://www.w3.org/International/getting-started/language
На что необходимо обратить внимание при разработке мультиязычных сайтов?
- Используйте атрибут
lang
в HTML. - Перенаправляйте пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.
- Текст на картинках плохо поддается адаптации. Многие до сих пор помещают текст на картинки чтобы получить хорошо выглядящий несистемный шрифт на любом компьютере. Однако чтобы перевести текст картинкой, нужно иметь подготовленную картинку с каждой строкой текста для каждого языка. При большом количестве текста это быстро выйдет из-под контроля.
- Ограничение длины слов и предложений. Некоторый текст может быть длиннее при написании на другом языке. Будьте внимательны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.
- Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.
- Форматируйте даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в США или «31 мая 2012» в странах Европы.
- Не склеивайте переведённые строки. Не пишите что-то вроде
"Сегодняшняя дата " + date
. Эта фраза будет выглядеть некорректно на языках с другим порядком слов. Вместо этого используйте шаблонную строку с подстановкой параметров для каждого языка. Например, посмотрите на следующие два предложения на русском и китайском соответственно:Я буду путешествовать {% date %}
и{% date %} 我会出发
. Обратите внимание, что положение переменной отличается из-за грамматических правил языка. - Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.
Ссылки
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
Для чего нужны
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-графика и эффекты. Позволяет расширить возможности презентации.
- Производительность и интеграция. Обеспечивает большую скорость оптимизации и лучшее использование аппаратных средств.
- Доступ к устройствам. Позволяет взаимодействовать с различными устройствами ввода и вывода.
- Стилизация. Позволяет создавать более сложные темы оформления.
Ссылки
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
Объясните разницу между
cookie
, sessionStorage
и localStorage
.Все вышеупомянутые технологии являются механизмами хранения типа ключ-значение на клиентской стороне. Они могут хранить данные только как строки.
cookie | localStorage | sessionStorage | |
---|---|---|---|
Инициатор | Клиент или сервер. Сервер может использовать заголовок Set-Cookie | Клиент | Клиент |
Срок хранения | Устанавливается вручную | Всегда | До закрытия вкладки |
Хранение между сессиями | Зависит от установки срока хранения | Да | Нет |
Отправка на сервер с каждым HTTP-запросом | автоматически, с помощью заголовка Cookie | Нет | Нет |
Емкость (на один домен) | 4 КБ | 5 МБ | 5 МБ |
Доступность | В любом окне | В любом окне | В той же вкладке |
Ссылки
- https://developer. mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
Объясните разницу между
<script>
, <script async>
и <script defer>
.<script>
— отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта.<script async>
— скрипт будет получен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйтеasync
тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.<script defer>
— скрипт будет получен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсеный DOM, то атрибутdefer
обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом<body>
. Отложенный скрипт не должен содержатьdocument.write
.
Примечание: Атрибуты async
и defer
игнорируются, если у тега <script>
нет атрибута src
.
Ссылки
- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
- https://bitsofco.de/async-vs-defer/
Почему хорошей практикой считается располагать
<link>
для подключения CSS между <head></head>
, а <script>
для подключения JS ставить перед </body>
? Знаете ли вы исключения?Размещение <link>
внутри <head>
Размещение <link>
внутри тега <head>
необходимо при создании оптимизированного веб-сайта. Когда страница загружается впервые, HTML и CSS анализируются одновременно; HTML создает DOM (объектную модель документа), а CSS создает CSSOM (объектную модель CSS). И то, и другое необходимо для создания визуальных элементов на веб-сайте, что позволяет быстро определить время «первого значимого рисования». Этот прогрессивный рендеринг является категорией оптимизации сайтов, которые измеряются в их показателях эффективности. Размещение таблиц стилей в нижней части документа — это то, что препятствует прогрессивной загрузке страницы во многих браузерах. Некоторые браузеры блокируют рендеринг, чтобы избежать перерисовки элементов страницы, если ее стили изменятся. Все это время пользователь будет пялиться на пустую белую страницу. В других случаях может возникать мерцание нестилизованного содержимого (FOUC), на котором может отображаться веб-страница без применения стилей.
Размещение <script>
прямо перед </body>
Теги <script>
блокируют отрисовку HTML на то время, пока они скачиваются и исполняются. Размещение скриптов внизу позволяет сперва распарсить и показать пользователю весь HTML.
Исключением является случай, когда в вашем скрипте содержится document.write()
. Но на сегодняшний день его использование не считается хорошей практикой. К тому же, расположение скриптов внизу разметки означает, что браузер не может начать их скачивать до тех пор, пока не отрисован весь документ. Единственным рабочим способом, при котором <script>
будет расположен внутри <head>
, является добавление атрибута defer.
Ссылки
- https://developer.yahoo.com/performance/rules.html#css_top
- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
Что такое прогрессивный рендеринг
Прогрессивный рендеринг — это название технологий, используемых для ускорения отрисовки страниц (в частности, для уменьшения времени загрузки), чтобы показать пользователю контент как можно скорее.
До того, как широкополосный интернет распространился повсеместно, прогрессивный рендеринг встречался довольно часто. Но этот подход по прежнему полезен в современной разработке, поскольку все более популярным (и ненадежным) становится мобильный доступ в интернет.
Примеры подобных технологий:
- Ленивая загрузка изображений. Изображения на странице не загружаются все разом. JavaScript подгрузит изображения тогда, когда пользователь доскроллит до той части страницы, на которой они расположены.
- Приоритизация видимого контента. Только минимум CSS, контента, скриптов, необходимых для отрисовки той части страницы, которую пользователь увидит первой. Вы можете использовать отложенные скрипты или слушать события
DOMContentLoaded
илиload
, чтобы загрузить остальные ресурсы и контент. - Асинхронные фрагменты HTML. Отправка в браузер частей HTML-страницы, созданной на бэкенде. Более подробно про эту технологию можно почитать в этой статье.
Ссылки
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
Для чего используется атрибут
srcset
в теге изображения? Опишите процесс, который браузер использует при обработке содержимого этого атрибута.Вы должны использовать атрибут srcset
, когда хотите показывать пользователям разные изображения в зависимости от их ширины дисплея их устройств — предоставление изображений более высокого качества устройствам с retina-дисплеями улучшает работу пользователя, в то время как предоставление изображений с низким разрешением на устройства с низким разрешением повышает производительность и уменьшает объём передаваемых данных (поскольку нет видимой разницы с большими изображениями). Например: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">
указывает браузеру отображать малое, среднее или большое изображение в зависимости от разрешения дисплея пользователя. Первое значение — это имя изображения, а второе — ширина изображения в пикселях. Для ширины устройства 320px выполняются следующие расчеты:
- 500 / 320 = 1.5625
- 1000 / 320 = 3.125
- 2000 / 320 = 6.25
Если у клиента стандартное разрешение 1x, то 1.5625 является ближайшим коэффициентом, и 500w
соответствующее small.jpg
будет отображено в браузере.
Если же разрешение retina (2x), браузер будет использовать ближайшее разрешение выше минимального. Это означает, что он не выберет 500w (1.5625), потому что оно больше 1 и изображение может выглядеть плохо. Браузер затем выберет изображение с результирующим соотношением ближе к 2, то есть 1000w (3.125).
srcset
решает проблему, когда вы хотите показывать файлы изображений меньшего размера для устройств с узким экраном, поскольку они не нуждаются в больших изображениях, как на настольных дисплеях, — а также, при желании, вы можете показывать изображения с различным разрешением для экранов с высокой/низкой плотностью пикселей.
Ссылки
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
Приходилось ли вам работать с языками HTML-шаблонизации?
Да, Pug (ранее известный как Jade), ERB, Slim, Handlebars, Jinja, Liquid и это только некоторые из них. По моему мнению, все они более или менее одинаковые и предоставляют одинаковые возможности экранирования контента и полезных фильтров для работы с отображаемыми данными. Большинство шаблонизаторов позволяют вводить собственные фильтры, если вам необходима дополнительная обработка контента перед его отображением.
Другие ответы
- https://neal.codes/blog/front-end-interview-questions-html/
- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
Привет, мир!
Привет, мир!В этой статье мы создадим простой скрипт и посмотрим, как он работает.
Тег SCRIPT
Программы на языке JavaScript можно вставить в любое место HTML при помощи тега SCRIPT
. Например:
Этот пример использует следующие элементы:
<script> ... </script>
-
Тег
script
содержит исполняемый код. Предыдущие стандарты HTML требовали обязательного указания атрибутаtype
, но сейчас он уже не нужен. Достаточно просто<script>
.Браузер, когда видит
<script>
:- Начинает отображать страницу, показывает часть документа до
script
- Начинает отображать страницу, показывает часть документа до
-
Встретив тег
script
, переключается в JavaScript-режим и не показывает, а исполняет его содержимое. -
Закончив выполнение, возвращается обратно в HTML-режим и только тогда отображает оставшуюся часть документа.
Попробуйте этот пример в действии, и вы сами всё увидите.
alert(сообщение)
- Отображает окно с сообщением и ждёт, пока посетитель не нажмёт «Ок».
При попытке сделать такой же файл у себя на диске и запустить, вы можете столкнуться с проблемой – выводятся «кракозяблы», «квадратики» и «вопросики» вместо русского текста.
Чтобы всё было хорошо, нужно:
- Убедиться, что в
HEAD
есть строка<meta charset="utf-8">
. Если вы будете открывать файл с диска, то именно он укажет браузеру кодировку. - Убедиться, что редактор сохранил файл именно в кодировке UTF-8, а не, скажем, в
windows-1251
.
Указание кодировки – часть обычного HTML, я упоминаю об этом «на всякий случай», чтобы не было сюрпризов при запуске примеров локально.
Современная разметка для SCRIPT
В старых скриптах оформление тега SCRIPT
было немного сложнее. В устаревших руководствах можно встретить следующие элементы:
- Атрибут
<script type=…>
- В отличие от HTML5, стандарт HTML 4 требовал обязательного указания этого атрибута. Выглядел он так:
type="text/javascript"
. Если указать другое значениеtype
, то скрипт выполнен не будет.
В современной разработке атрибут type
необязателен.
- Атрибут
<script language
-
Этот атрибут предназначен для указания языка, на котором написан скрипт. По умолчанию, язык – JavaScript, так что и этот атрибут ставить необязательно.
- Комментарии до и после скриптов
-
В совсем старых руководствах и книгах иногда рекомендуют использовать HTML-комментарии внутри
SCRIPT
, чтобы спрятать Javascript от браузеров, которые не поддерживают его.Выглядит это примерно так:
Браузер, для которого предназначались такие трюки, очень старый Netscape, давно умер. Поэтому в этих комментариях нет нужды.
Итак, для вставки скрипта мы просто пишем <script>
, без дополнительных атрибутов и комментариев.
html — Нужен ли атрибут type для тегов?
спросилИзменено 11 месяцев назад
Просмотрено 41к раз
Я видел и это:
и это:
Атрибут type имеет значение?
2
Для HTML 4.x атрибут type
равен required . Источник
Этот атрибут определяет язык сценариев содержимого элемента и переопределяет язык сценариев по умолчанию. Язык сценариев указывается как тип содержимого (например, «текст/javascript»). Авторы должны предоставить значение для этого атрибута. Для этого атрибута нет значения по умолчанию.
Для HTML 5 это необязательный . Если он не указан, по умолчанию используется text/javascript
. Источник
Атрибут type указывает язык скрипта или формат данных. Если атрибут присутствует, его значение должно быть допустимым типом MIME. Параметр charset не должен быть указан. Значение по умолчанию, которое используется, если атрибут отсутствует, — «текст/javascript».
Рекомендация: См. HTML 5.2
Для HTML 5.2 следует опустить, если используется допустимый тип JavaScript MIME (например, text/javascript
).
Отсутствие атрибута или установка для него типа JavaScript MIME означает, что сценарий является классическим сценарием, который следует интерпретировать в соответствии с производством сценария JavaScript верхнего уровня. На классические скрипты влияют атрибуты charset, async и defer. Авторам следует опустить этот атрибут вместо того, чтобы избыточно указывать тип JavaScript MIME.
2
в HTML5 вам не нужен атрибут типа
, но в HTML<=4 и (X)HTML он должен быть объявлен
1
В стандарте HTML 5.2 (конец 2017 г.) указано, что атрибут type следует опускать.
Атрибут type позволяет настроить тип представленного скрипта:
Отсутствие атрибута или установка для него типа JavaScript MIME означает, что сценарий является классическим сценарием, который следует интерпретировать в соответствии с производством сценария JavaScript верхнего уровня.
На классические скрипты влияют атрибуты charset, async и defer. Авторы должны опустить атрибут вместо избыточного указания типа MIME JavaScript.
(выделено мной)
Источник: https://www.w3.org/TR/html52/semantics-scripting.html#element-attrdef-script-type
0
В целях тестирования он БУДЕТ работать без последствий, но W3C требует его правильной проверки. Черновик HTML 5 не требует этого, но он все еще находится в черновой форме в W3C, и они не рекомендуют его.
Любой браузер, который имеет значение, будет нормально анализировать его.
Нет, атрибут type в тегах не нужен. Если вы не хотите, чтобы ваш код проверялся.
Мы пропускали его в течение многих лет на работе, и это никогда не было проблемой. Мы активно тестируем на нескольких устройствах, в разных браузерах и т. д. Сюда входят различные типы документов HTML4 и XHTML.
Я создал эту маленькую страницу для тестирования на github: http://kenshub. github.io/script-type.html
Согласно W3C требуется: http://www.w3.org/TR/REC-html40/interact/scripts.html
4
Атрибут type является обязательным в HTML4.01, но необязательным в HTML5. Тип показывает, какой тип следует анализировать.
Источник: W3Schools, MDN
ПРИМЕЧАНИЕ. Если атрибут type является аудио, HTML, видео или любым типом MIME, кроме JavaScript, код НЕ будет выполнен.
0
Хотя атрибут type не является обязательным, в большинстве случаев он полезен. IE отлично работает без этого, но иногда хром и FF вызывают проблемы, особенно если скрипт большой. Я столкнулся с проблемой с атрибутом типа при работе с библиотекой plotly js. Без атрибута типа IE может отображать графики, но FF, Chrome и Edge. После добавления атрибута типа chrome и FF могут отображать диаграммы/графики
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почтаТребуется, но не отображается
javascript — Понимание атрибута «тип» в теге
спросил
Изменено 10 месяцев назад
Просмотрено 3к раз
Я ищу четкое объяснение атрибута type
внутри тега html
.На протяжении большей части моей карьеры веб-разработчика мои инструкции из Интернета были такими:
- Просто напишите
,а затем поместите внутрь него javascript.
- В html5 просто напишите
text/javascript
по умолчанию.
И долгое время я был наивен и просто делал то,что мне говорили.Сейчас я изучаю ReactJS,и есть новый набор инструкций:
- Включите скрипт
babel
вверху вашего файла - Теперь напишите
- Вуаля!Теперь вы можете написать что-то похожее на Javascript внутри этого тега,но вдобавок у него есть куча интересных дополнительных функций.
Я хочу понять магию добавленияtype='text/babel'
к тегуscript
.Я знаю,что javascript — единственный язык,который фактически работает в браузере,так какова связь между этим дополнительным атрибутом,скриптом babel и кодом,который вы пишете внутри.Этот тег каким-то образом находит скрипт babel и что-то с ним делает?Является ли это фундаментальной функцией браузера/js,которая позволяет предварительно обрабатывать текст в теге скрипта перед выполнением javascript?Что еще я должен знать?
Демистификация-цель этого вопроса.
- javascript
- html
- babeljs
- reactjs
0
Я хочу понять магию добавления type='text/babel'к тегу скрипта.
Никакого настоящего волшебства:скрипт Babel,который вы включаете на страницу,ищет эти элементы и на лету транспилирует их в ES5,а затем браузер запускает полученный код ES5.Установка этоговведите
в элементах скрипта,чтобы сделать две вещи:
Предотвращает попытки браузера запустить их напрямую,и
Идентифицирует их для скрипта Babel.
Касательнотип
наскрипт
вообще,из спецификации:
Атрибут
типа
указывает язык скрипта или формат данных.Если атрибут присутствует,его значение должно быть допустимым типом MIME.Параметр charset не должен быть указан.Значение по умолчанию,которое используется,если атрибут отсутствует,равно 9.0025"текст/javascript".
Позже,при объяснении,как обрабатыватьскрипт
элементов:
Если пользовательский агент не поддерживает язык сценариев,заданный типом блока сценария для этого
элемента сценария
,тогда пользовательский агент должен прервать эти шаги на этом этапе.Скрипт не выполняется.
Стоит узнать,что сайт Babel говорит о транспиляции в браузере:
Компиляция в браузере имеет довольно ограниченный вариант использования,поэтому,если вы работаете с рабочим сайтом,вам следует предварительно скомпилировать свои скрипты на стороне сервера.Дополнительные сведения см.в разделе Настройка систем сборки.
(Там,где они сказали «компилировать»,большинство из нас сказали бы «транспилировать».)
Нет,браузер ничего не делает сtype=text/babel
.Основные браузеры понимают только поддерживаемые типы MIME в атрибутеtype
и всегда по умолчанию используют ECMAScript(JavaScript).Большинство браузеров на сегодняшний день все еще не полностью совместимы с ES6.
Babel — это компилятор,который компилирует любой код ES6,заключенный вв JavaScript ES5,версию,которую могут понять большинство современных браузеров.Когда вы запускаете код Babel,браузер просто игнорирует скрипты Babel.Babel — это библиотека,которая ищет его,преобразовывает код в ES5 и говорит браузеру запустить его.
Если в браузере зарегистрирован тип MIME(как(исторически)могло быть в случае VBScript или PerlScript),то он будет запущен браузером через соответствующий парсер/компилятор/интерпретатор/и т.д.
В противном случае это просто элемент в DOM с текстовым узлом внутри него.
Другой код,напр.