Brainscape's Knowledge GenomeTM

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


See full index

tech interview > html+css > Flashcards

html+css Flashcards

1
Q

Для чего нужно указывать DOCTYPE?

A

Он указывает тип текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Что будет если не указать DOCTYPE в начале документа?

A

Браузер попытается отобразить страницу в режиме совместимости (quirks mode). Это может привести к тому, что в разных браузерах страница будет отображаться по разному.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Для чего нужны мета-теги?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Чем отличается блочный элемент от строчного?

A

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

В отличие от блочного, строчный элемент не переносится на новую строку, а располагается на той же строке, что и предыдущий элемент. Ширина строчного элемента зависит от его содержимого. Блочные элементы в строчные вкладывать нельзя.
Примеры строчных элементов: <a>, <span>, <strong>, <em>, <img>”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Почему некоторые символы могут отображаться в виде квадратов?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Какие типы заголовков есть в HTML?

A

“HTML поддерживает шесть различных типов заголовков. Эти заголовки отличаются по размеру шрифта, начиная с самого крупного.
h1 - самый крупный заголовок. h6 - самый маленький заголовок. h1 должен быть только 1 на странице.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Что такое семантическая верстка?

A

Это верстка, которая нацелена на структурирование html-документов. В ней используются теги, которые разделяют код на логические блоки, явно показывающие их роль и содержание в структуре страницы. Семантическая верстка отличается от блочной лишь элементами, используемыми при структуризации страницы. В блочной версте используют в основном только элемент div, а в семантической используются помимо div еще множество других тегов, таких как: header, main, section, footer, nav, aside.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Что такое поток HTML-документа?

A

Потоком документа в HTML называется порядок вывода элементов на страницу. В обычном виде все блоки выводятся в том порядке, в котором они записаны внутри HTML-документа. Поток можно менять с помощью css правил, к примеру с помощью position: absolute.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Как подключить JavaScript к странице?

A

Первый способ - вставить скрипт в блок script.
Второй способ - подключить скрипт при помощи добавления ссылки на файл JavaScript.
Желательно все скрипты подключать в конце блока body.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

В чем разницу между <script>, <script async> и <script defer>?

A

“1 - Когда браузер загружает HTML и доходит до тега <script>, он приостанавливает строить DOM. Он должен сначала загрузить и выполнить скрипт, и только затем обработать остальную страницу.
2 - Атрибут defer сообщает браузеру, что он должен продолжать обрабатывать страницу и загружать скрипт в фоновом режиме, а затем запустить этот скрипт, когда страница загрузится.
3 - Атрибут async сообщает браузеру, что он должен продолжать обрабатывать страницу и загружать скрипт в фоновом режиме, а затем запустить этот скрипт, как только он будет загружен. “

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Как добавить CSS на страницу?

A

Первый способ - описать селекторы и их значения внутри тега style.
Второй способ - подключить стили при помощи добавления ссылки на внешний файл css, использую тег link, который располагается внутри блока head
Третий способ - добавить инлайновые стили для каждого отдельного елемента, используя атрибут style.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Какая разница между reset.css и normalize.css?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Что такое critical CSS?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Что такое специфичность селекторов CSS?

A

Это способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены. Специфичность представляет собой вес, придаваемый конкретному правилу CSS. Наиболее весомым являются inline стили. Потом стили в селектора по ID. Класс. Наименее весомые являются селекторы по тегу, а потом селектор *.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

В чем разница между псевдоклассом и псевдо-элементом в CSS?

A

Псевдоклассы описывают особое состояние елемента. Например ссостояние нажаной кнопки.
Псевдоэлементы соответствуют виртуальным элементам. К примеру нужно выделить первую букву в строке.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Что такое блочная модель CSS?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Что делает свойство box-sizing?

A

Свойство box-sizing определяет как вычисляется общая ширина и высота элемента.
Имеет 2 поведения:
- content-box это стандартное поведение. Если установить элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.
- border-box говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые указаны в ширине и высоте элемента. Если выставить элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Какие виды позиционирования элементов на странице вы знаете?

A

Существует 5 видов позиционирования:
- static - стандартное позиционирование;
- relative - позиционирование относительно самого себя;
- absolute - позиционирование относительно его ближайшего относительно позиционированного предка, если таковой имеется;
- fixed - позиционирование относительно viewport
- sticky - липкое позиционирование, которое может изменять свое значение из relative на fixed во время прокрутки страницы

19
Q

Что делает свойство z-index?

A

Это свойство определяет положение элемента и нижестоящих элементов по оси z. В случае перекрытия элементов, это значение определяет порядок наложения. В общем случае, элементы с большим z-index перекрывают элементы с меньшим. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

20
Q

В чем разница между px, em, rem?

A

“px - пиксель, это самая базовая, абсолютная и окончательная единица измерения;
em - еденица измерения относительно текущего размера шрифта;
rem - единица имерения относительно размера шрифта элемента <html>.”

21
Q

В чём разница между резиновой, адаптивной и отзывчивой вёрсткой?

A

В резиновой верстке блоки меняют свою ширину в зависимости от размера окна браузера.
Адаптивная верстка реализуется с помощью @media правил. Это позволяет для каждого отдельного размера екрана показывать разную верстку. Любое изменение размера окна происходит рывками, после достижения одного из указанных точек перелома.
Отзывчивая верстка это объединение резиновой и адаптивной вёрстки. В реализации самая сложная. Но результат получается наиболее приемлемый.

22
Q

В чем разница между visibility:hidden и display:none?

A

display:none удаляет элемент из нормального потока страницы, позволяя другим элементам заполнить его.
visibility:hidden оставляет элемент в нормальном потоке страницы таким, что он все еще занимает место.

23
Q

Для чего нужно правило @supports?

A

Правило @supports позволяет проверить, поддерживает браузер ту или иную возможность, и на основе этого создать набор стилевых правил.

24
Q

В чем разница между Progressive Enhancement и Graceful Degradation?

A

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

25
Q

Что такое repaint и reflow?

A

При загрузке страницы, если она не пустая, всегда выполняется, как минимум, по одному reflow и repaint. Далее эти события возникают в следующих случаях:
- 1 - часть дерева отображения нуждается в перерасчете, т. е. у какого-то узла изменились ширина, высота или координаты. Вызывается событие reflow.

  • 2 - в результате изменений часть отображаемого контента должна обновиться. Речь идет, в первую очередь, о свойствах стилей: цвет фона, радиус и т. д. Вызывается событие repaint.

Если вызывается reflow, после него обязательно вызовется и repaint. Но обратное неверно: repaint может вызываться независимо от reflow.

26
Q

В чем разница между cookie, sessionStorage и localStorage?

A

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

sessionStorage:
- хранит данные, пока продолжается текущая сессия вкладки.
- каждая вкладка имеет свой sessionStorage.
- хранит данные объёмом до 5 МБ.
- не поддерживается старыми браузерами, например, IE 7 и ниже.

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

27
Q

Какая разница между относительным и абсолютным путем?

A

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

28
Q

Какая разница между тегом и элементом?

A

Тэги используют для обозначения начала и конца содержимого HTML элемента.
Элемент включает в себя тэги и содержимое.

29
Q

Когда использовать <button> а когда <a>?

A

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

30
Q

Для чего нужен атрибут type у кнопки?

A

type определяет тип кнопки, который устанавливает ее поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.
Существует 3 типа: button, reset и submit. По умолчанию установлено значение submit.

31
Q

Для чего нужен тег <base>?

A

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

32
Q

Какая разница между checkbox и radio?

A

radio - создает переключать между вариантами и позволяет выбрать только один из них.
checkbox - применяются в форме для выбора нескольких значений.

33
Q

Что такое наследование стилей в CSS?

A

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

34
Q

Что такое каскадность в CSS?

A

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

35
Q

В чем разница между контентными и оформительнимы изображениями?

A

С помощью контентных изображений мы можем донести до пользователей полезную информацию. Чтобы добавить контентное изображение к себе на страницу, используйте в разметке <img>. Для изображений такого типа необходимо заполнять атрибут alt, который описывает то, что изображено на картинке.
Декоративные изображений используется исключительно для оформления. Такие изображения не несут для пользователя полезной информации. Декоративные изображения следует реализовывать с помощью CSS.

36
Q

Почему у <img> и <input> нет псевдоэлементов ::before, ::after?

A

И :after и :before дают результат только для тех элементов, у которых имеется содержимое. А у <img> и <input> содержимого нет.

37
Q

Для чего нужна функция calc в CSS?

A

Функция calc даёт возможность рассчитать значения свойств CSS во время их определения. Она принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS свойства.

38
Q

Что такое flex-контейнер и flex-элемент?

A

Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнером является тот елемент, в которого задано свойство display: flex или display: inline-flex.
Flex-элементом является каждый дочерний элемент flex-контейнера.

39
Q

Что такое flex-ось?

A

Flexbox предоставляет пoнятие главное и вспомогательной оси.
Элементы flex всегда располагаются вдоль главной оси. При этом главная ось может быть расположена горизонтально или вертикально. Изначально главная ось расположена горизонтально с направлением элементов справа налево. Направление главной оси можно изменить с помощью свойства flex-direction

40
Q

В чем отличия mobile first и desktop first подходов?

A

Mobile first ориентирован на узкие экраны. Это подход, при котором стили применяются сначала к мобильным устройствам. Расширенные стили и другие переопределения для больших экранов затем добавляются в таблицу стилей через медизапросы.
Desktop first oриентирован на широкие экраны. Это подход, при котором стили применяются сначала к большим устройствам. Расширенные стили и переопределения для меньших экранов затем добавляются в таблицу стилей через медиазапросы.

41
Q

Какие преимущества svg перед png или jpeg?

A

1 - В отличие от растровой графики, SVG не теряет в качестве при масштабировании.
2 - Браузеру не нужно запрашивать картинку у сервера, т.к. он сам её рисует, следовательно, производительность повышается.
3 - При помощи CSS/JS можно менять параметры графики на сайте, например фон, прозрачность или границы. Также SVG можно анимировать.
4 - Объекты SVG весят намного меньше растровых изображений.

42
Q

В чем разница между rbd, rgba и hex?

A

rgb - это смешивание красного, зеленого и синего цвета в процентном или числовом соотношении для получения нужного цвета.
rgba - это тот же rgb только с альфа-каналом, который задает уровень непрозрачности (0 - прозрачный, 1 - непрозрачный).
hex - это описание цвета основано на 16-ричной записи числа.

43
Q

Чем отличается линейный и радиальный градиенты?

A

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

tech interview (4 decks)

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