html Flashcards

Question 1

Q

Что такое html?

Answer

A

HTML — это сокращение от «Hypertext Markup Language». Это стандартный язык форматирования текста, используемый для создания и отображения страниц в Интернете. HTML-документы состоят из двух частей: содержимого и тегов, которые форматируют его для правильного отображения на страницах.

Язык гипертекстовой разметки HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах ЦЕРНа в Женеве в Швейцарии.

Question 2

Q

Что такое теги в html?

Answer

A

Тег — это специальное служебное слово, заключенное в угловые скобки. Его ещё называют «элемент HTML». Тегов в языке HTML много и каждый что-то делает с контентом, который обычно находится внутри скобок или между тегами.
Если тег парный, то тегу <ТЕГ> соответствует </ТЕГ>.

Question 3

Q

Какие теги html ты знаешь?

Answer

A

Теги HTML можно классифицировать по различным критериям в зависимости от их функционального назначения или способа применения. Вот некоторые из возможных классификаций тегов:

По функциональному назначению:

Теги структуры: Они определяют структуру документа, такие как <html>, <head>, <body>.
Теги текста: Используются для форматирования текста, такие как <p>, <h1>-<h6>, <b>, <i>.
Теги ссылок и мультимедиа: Включают <a> для ссылок, <img></img> для изображений, <audio> и <video> для мультимедийных файлов.
Теги списков и таблиц: Это <ul>, <ol>, <li> для списков и <table>, <tr>, <th>, <td> для таблиц.
Теги форм: Они позволяют создавать формы для ввода данных, такие как <form>, <input></input>, <textarea>, <select>, <button>.
По способу применения:</button></select></textarea></video></audio></a></i></b>

Блочные теги: Эти теги занимают всю доступную ширину и начинаются с новой строки. Примеры: <div>, <p>, <h1>-<h6>.
Строчные теги: Эти теги занимают только необходимое пространство и не переносят текст на новую строку. Примеры: <span>, <a>, <strong>.
Теги, принимающие атрибуты: Эти теги могут принимать атрибуты для изменения их поведения или внешнего вида. Примеры: <img></img>, <a>, <input></input>.
Теги контейнеры: Эти теги могут содержать другие элементы. Примеры: <div>, <span>, <ul>, <ol>.
Теги самозакрывающиеся: Эти теги не имеют закрывающего тега и используются для вставки элементов без контента, таких как изображения или линии разделителя. Примеры: <img></img>, <input></input>, <br></br>.
По семантическому назначению:</span></a></strong></a></span>

Теги контейнеры: Эти теги определяют семантическую структуру документа, такую как <header>, <footer>, <nav>, <article>, <section>.
Теги семантического форматирования: Эти теги помогают определить семантическое значение текста, такое как <em>, <strong>, <mark>, <cite>.
Теги для связывания документов: Эти теги используются для создания связей между различными документами, такие как <link></link>, <a>, <iframe>.
Теги для метаданных: Эти теги предоставляют информацию о документе или его содержимом, такие как <meta></meta>, <title>, <base></base>.</title></a></cite></mark></strong></em>

Question 4

Q

Как вставить комментарий в HTML?

Answer

A

<!-- A SAMPLE COMMENT -->

Question 5

Q

Какие основные виды списков применяют при создании веб-страницы?

Answer

A

Ordered list (нумерованный список — <ol>).
Unordered list (маркированный список — <ul>).
Definition list (список определений — <dl>).
Menu list (список меню — <menu>).

Question 6

Q

Зачем мы используем альтернативный текст (атрибут alt тега <img></img>) для изображений?

Answer

A

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

Question 7

Q

Что такое семантика в контексте html?

Answer

A

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

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

Question 8

Q

Какие семантические теги вы знаете?

Answer

A

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

<nav>: Определяет навигационную область документа, которая содержит ссылки на другие страницы или разделы текущего документа.

<main>: Определяет основное содержимое документа, которое обычно содержит уникальный для страницы контент.

<article>: Определяет независимую статью, пост или блок содержимого, который может быть переиспользован или оценен независимо от остальной части страницы.

<section>: Определяет раздел документа, который может включать в себя группу связанных контентных элементов.

<aside>: Определяет боковую панель, которая содержит контент, который связан с основным контентом страницы, но может быть вынесен за его пределы.

<footer>: Определяет нижнюю часть документа или секции, обычно содержащую информацию об авторстве, ссылки на контактные данные или дополнительные ссылки.

<figure> и <figcaption>: <figure> используется для обозначения самостоятельных элементов контента, таких как изображения, графики или видео, а <figcaption> - для предоставления подписи или описания к этим элементам.

<details> и <summary>: <details> определяет дополнительные детали, которые могут быть скрыты или раскрыты пользователем, а <summary> - заголовок или краткое описание этих дополнительных деталей.

Семантических тегов очень много.
</summary></details></summary></details></figcaption></figure></figcaption></figure></footer></aside></section></article></main></nav></header>

Question 9

Q

В чем разница между тегом article и тегом section?

Answer

A

Основное различие между <article> и <section> заключается в том, что <article> обозначает самостоятельный и переиспользуемый контент (статья, блог-пост, комментарий, виджет новостей и т. д.), в то время как <section> используется для организации контента по тематическим разделам, не обязательно самостоятельным. В отличие от <article>, содержимое внутри <section> может быть связано друг с другом и не обязательно иметь смысл вне контекста остальной части страницы.

Question 10

Q

В чем разница между тегом i и тегом em?

Answer

A

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

Question 11

Q

Для чего нужен DOCTYPE?

Answer

A

DOCTYPE — это сокращение от DOCument TYPE (тип документа). DOCTYPE всегда связан с DTD — Document Type Definition (определение типа документа).

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

DOCTYPE для стандарта HTML5 определяется как <!DOCTYPE html>.

Question 12

Q

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

Answer

A

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

На сегодняшний день использование data-атрибутов не поощряется. Одной из причин является то, что пользователь может модифицировать данные в атрибуте, используя инспектор кода в браузере. Данные лучше хранить в самом JavaScript и обновлять DOM.

Question 13

Q

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

Answer

A

<script> - отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта.

<script async> - скрипт будет получен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйте async тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.

<script defer> - скрипт будет получен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсенный DOM, то атрибут defer обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом <body>. Отложенный скрипт не должен содержать document.write.

Примечание: Атрибуты async и defer игнорируются, если у тега <script> нет атрибута src.

Question 14

Q

Почему хорошей практикой считается располагать <link> для подключения CSS между <head></head>, а <script> для подключения JS ставить перед </body>? Знаете ли вы исключения?

Answer

A

Размещение <link></link> внутри <head>

Размещение <link></link> внутри тега <head> необходимо при создании оптимизированного веб-сайта. Когда страница загружается впервые, HTML и CSS анализируются одновременно; HTML создает DOM (объектную модель документа), а CSS создает CSSOM (объектную модель CSS). И то, и другое необходимо для создания визуальных элементов на веб-сайте, что позволяет быстро определить время «первого значимого рисования». Этот прогрессивный рендеринг является категорией оптимизации сайтов, которые измеряются в их показателях эффективности. Размещение таблиц стилей в нижней части документа - это то, что препятствует прогрессивной загрузке страницы во многих браузерах. Некоторые браузеры блокируют рендеринг, чтобы избежать перерисовки элементов страницы, если ее стили изменятся. Все это время пользователь будет пялиться на пустую белую страницу. В других случаях может возникать мерцание нестилизованного содержимого (FOUC), на котором может отображаться веб-страница без применения стилей.

Размещение

 прямо перед </body>

Теги

 блокируют отрисовку HTML на то время, пока они скачиваются и исполняются. Размещение скриптов внизу позволяет сперва распарсить и показать пользователю весь HTML.

Исключением является случай, когда в вашем скрипте содержится document.write(). Но на сегодняшний день его использование не считается хорошей практикой. К тому же, расположение скриптов внизу разметки означает, что браузер не может начать их скачивать до тех пор, пока не отрисован весь документ. Единственным рабочим способом, при котором

 будет расположен внутри <head>, является добавление атрибута defer.

Question 15

Q

Что такое атрибуты в html?

Answer

A

В HTML, атрибуты (attributes) - это дополнительная информация, которая добавляется к HTML элементам для определения их свойств или поведения. Атрибуты предоставляют дополнительные сведения о том, как браузер должен обрабатывать элементы или каким образом они должны отображаться. Атрибуты содержат две основные части: имя и значение.

Question 16

Q

Какие глобальные атрибуты вы знаете?

Answer

A

Глобальные атрибуты — это атрибуты общие для всех HTML-элементов; они могут использоваться всеми элементами, хотя на некоторые элементы могут не оказывать влияния.

Они используются для предоставления дополнительной информации или функциональности элементам, улучшая их поведение или внешний вид по умолчанию.

Примеры
id class lang style hidden aria-*

Question 17

Q

Опишите структуру HTML-элемента

Answer

A

<p>Мой кот очень сердитый</p>`

Основными частями элемента являются:

Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
Закрывающий тег: выглядит как и открывающий, но содержит слеш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
Содержимое: Как видно, в нашем случае содержимым является простой текст.

Элемент: открывающий тег + закрывающий тег + содержимое = элемент.

Question 18

Q

Что внутри тега <head>?

Answer

A

Элемент head HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:

заголовок (title) страницы
ссылки на файлы CSS (если вы хотите применить к вашему HTML стили CSS)
ссылки на иконки (favocon)
другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)

Question 19

Q

Что такое валидация? И какие типы проверок HTML документа вы знаете?

Answer

A

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

Типы проверок HTML документа:

Проверка синтаксиса (Syntax Validation)
Проверка на валидность (Validity Checking). Валидный HTML документ следует стандартам, что повышает совместимость с различными браузерами и устройствами.
Проверка на доступность (Accessibility Checking): Эта проверка определяет, насколько легко пользователи с ограниченными возможностями могут использовать и взаимодействовать с содержимым HTML-документа. Она включает в себя такие аспекты, как правильное использование семантических элементов HTML, альтернативных текстов для изображений, возможность навигации по сайту с помощью клавиатуры и т. д.
Проверка на кроссбраузерную совместимость (Cross-Browser Compatibility Checking): Эта проверка гарантирует, что HTML-документ будет корректно отображаться на различных веб-браузерах, таких как Chrome, Firefox, Safari, Internet Explorer и др.
Проверка на производительность (Performance Checking): Это проверка оценивает эффективность загрузки и выполнения HTML-документа.

Question 20

Q

Что лучше использовать: ссылки или кнопки?

Answer

A

За что отвечает:

Ссылка
Навигация, т. е. пользователь перемещается на другую часть страницы или на новую страницу.

Кнопка
Выполнение какой-либо функции без перехода на другую страницу — добавить в корзину, купить, отправить, проголосовать, войти и т. д.

Что видит пользователь:

Ссылка
* При наведении курсора на ссылку внизу окна браузера возникает её адрес.
* Через меню по клику правой кнопкой мыши можно скопировать, отправить, открыть ссылку в новой вкладке.

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

Question 21

Q

Как семантически правильно сверстать картинку с подписью?

Answer

A

Семантически правильно сверстать картинку с подписью можно с использованием следующих HTML-элементов и семантических тегов:

<figure>: Этот элемент используется для группировки связанных содержательных элементов, таких как изображения или графики, вместе с их подписями.

<img>: Этот элемент используется для вставки изображений на веб-страницу.

<figcaption>: Этот элемент используется для добавления подписи к содержимому элемента <figure>. Он содержит текстовое описание изображения.</figure>

Пример кода HTML:

<figure>
    <img src="путь_к_изображению" alt="Описание изображения">
    <figcaption>Подпись к изображению</figcaption>
</figure>

Question 22

Q

Какие есть типы тега <input>?

Answer

A

Элемент <input></input> в HTML используется для создания различных видов интерактивных элементов ввода. Ниже приведены основные типы <input></input> элементов:

<input type="text">: Создает текстовое поле, в которое пользователь может вводить однострочный текст.

<input type="password">: Создает поле для ввода пароля, где символы маскируются (обычно заменяются точками или звездочками) для обеспечения безопасности.

<input type="checkbox">: Создает флажок, который пользователь может отметить или снять.

<input type="radio">: Создает кнопку-переключатель, которая позволяет пользователю выбрать только один вариант из нескольких вариантов.

<input type="file">: Создает поле для загрузки файлов, которое позволяет пользователю выбирать файлы с компьютера.

<input type="submit">: Создает кнопку отправки формы. При нажатии на эту кнопку данные формы отправляются на сервер для обработки.

<input type="reset">: Создает кнопку сброса формы. При нажатии на эту кнопку все введенные пользователем данные в форме сбрасываются до исходного состояния.

<input type="button">: Создает кнопку, которая может выполнять пользовательские скрипты JavaScript, но не отправляет данные формы на сервер.

<input type="number">: Создает поле для ввода чисел.

<input type="date">: Создает поле для ввода даты.

<input type="email">: Создает поле для ввода адреса электронной почты.

<input type="url">: Создает поле для ввода URL-адреса.

Это лишь некоторые из наиболее распространенных типов элементов <input></input>. Существует также ряд других типов, таких как <input></input> для создания скрытых полей формы и других, которые используются для специфических целей.

Question 23

Q

Для чего используется элемент <datalist>?

Answer

A

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

<label for="fruits">Выберите фрукт:</label>
<input type="text" id="fruits" list="fruitsList">
<datalist id="fruitsList">
  <option value="Яблоко">
  <option value="Груша">
  <option value="Банан">
  <option value="Апельсин">
  <option value="Манго">
</datalist>

Question 24

Q

Что такое мета-тэги?

Answer

A

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

Вот некоторые из наиболее распространенных мета-тегов:

: Определяет кодировку символов документа, такую как UTF-8, которая указывает, какие символы и символьные наборы можно использовать в HTML-документе.

: Управляет поведением и масштабированием страницы на мобильных устройствах, определяя ширину и начальный масштаб просмотра.

: Предоставляет краткое описание содержимого страницы. Эта информация часто используется поисковыми системами для отображения описания в результатах поиска.

: Указывает имя автора страницы.

Question 25

Q

Структура html таблицы

Answer

A

<table>: Этот элемент определяет начало и конец таблицы.

<thead>: Этот элемент определяет группу заголовков таблицы. Он содержит одну или несколько строк с элементами <tr>, обычно содержащими элементы <th>.

<tbody>: Этот элемент определяет тело таблицы. Он содержит одну или несколько строк с элементами <tr>, обычно содержащими элементы <td>.

<tr>(Table Row): Этот элемент определяет строку в таблице.

<th> (Table Header Cell): Этот элемент определяет заголовок ячейки таблицы. Он используется для первой строки или первого столбца и содержит обычно более выделенные, жирные заголовки.

<td> (Table Data Cell): Этот элемент определяет ячейку данных в таблице. Он содержит фактическую информацию, которая будет отображаться в таблице.

Это основная структура таблицы. В зависимости от ваших потребностей, вы можете добавлять дополнительные элементы, такие как <tfoot> для подвала таблицы или добавлять атрибуты, такие как colspan и rowspan для объединения ячеек по горизонтали или вертикали.

<table>
    <thead>
        <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
            <!-- Дополнительные заголовки, если нужно -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
            <!-- Дополнительные ячейки данных в первой строке -->
        </tr>
        <!-- Дополнительные строки данных, если нужно -->
    </tbody>
</table>

Question 26

Q

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

Answer

A

Пример тега с атрибутами по умолчанию:

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

Этот тег определяет следующие параметры:

width=device-width: Это означает, что ширина вьюпорта (видимой области на экране) должна быть равна ширине экрана устройства.
initial-scale=1.0: Это означает, что страница будет отображаться с начальным масштабом 1.0. То есть страница будет отображаться без изменений масштаба по умолчанию.

Таким образом, мета-тег viewport с настройками width=device-width, initial-scale=1.0 помогает обеспечить адаптивное и правильное отображение веб-страницы на мобильных устройствах, исключая необходимость вручную масштабировать страницу для соответствия экрану устройства.

Question 27

Q

Что такое элемент <canvas>? И для чего он используется?</canvas>

Answer

A

Элемент <canvas> является одним из элементов HTML5 и предоставляет пустое поле, на котором можно рисовать графику с помощью JavaScript. Он предоставляет низкоуровневый, программно-ориентированный интерфейс для рисования различных изображений, анимаций и других графических элементов.</canvas>

Question 28

Q

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

Answer

A

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

Значение атрибута autocomplete может быть одним из следующих:

on: Это значение разрешает автозаполнение для поля ввода, и браузер может предложить ранее введенные пользователем значения для данного поля.
off: Это значение запрещает автозаполнение для поля ввода, и браузер не будет предлагать предыдущие значения для данного поля.
Дополнительные значения: Некоторые браузеры и интерфейсы могут поддерживать дополнительные значения, такие как name, email, tel, password, username, которые могут указывать браузеру на специфический тип данных, который ожидается в поле ввода, и предлагать соответствующие значения для автозаполнения.

Question 29

Q

Что такое элемент <output> в HTML5?

Answer

A

Элемент <output> в HTML5 используется для отображения результатов вычислений или других выходных данных в форме. Этот элемент предназначен для вывода информации, которая генерируется или обрабатывается на веб-странице, например, результатов вычислений или обработки формы.</output>

Основное назначение элемента <output> заключается в том, чтобы предоставить место на странице для отображения результата операции, которая производится на странице, и облегчить взаимодействие пользователя с этим результатом.</output>

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="0">
  \+ 
  <input type="number" id="b" value="0">
  = 
  <output name="result" for="a b"></output>
</form>

Question 30

Q

Answer

A

Атрибут target используется в HTML для указания окна или фрейма, в котором должна быть открыта связанная с элементом ссылка или форма после отправки данных. Этот атрибут применяется к элементам <a> и <form>.

Атрибут target может принимать следующие значения:

_self: Ссылка или форма открывается в текущем окне или фрейме (по умолчанию, если атрибут target не указан).

_blank: Ссылка или форма открывается в новом безымянном окне браузера или в новой вкладке.

_parent: Ссылка или форма открывается в родительском окне или фрейме текущего окна или фрейма.

_top: Ссылка или форма открывается в верхнем уровне окна или фрейма, игнорируя все фреймы.

Имя фрейма или окна: Ссылка или форма открывается в определенном окне или фрейме с указанным именем

Question 31

Q

Для чего используется элемент <picture>?</picture>

Answer

A

Элемент <picture> в HTML используется для предоставления нескольких источников изображения для элемента <img></img>. Это позволяет веб-разработчикам оптимизировать загрузку изображений в зависимости от различных условий, таких как разрешение экрана, размер экрана и другие параметры.</picture>

Основное использование элемента <picture> состоит в том, чтобы предоставить несколько источников изображения с разным разрешением или форматом, чтобы браузер мог выбрать наиболее подходящий источник в зависимости от контекста.</picture>

Вот пример использования элемента <picture>:</picture>

<picture>
  <source srcset="image-large.jpg" media="(min-width: 1200px)">
  <source srcset="image-medium.jpg" media="(min-width: 800px)">
  <img src="image-small.jpg" alt="Описание изображения">
</picture>

Question 32

Q

Что такое srcset? Как работает srcset?

Answer

A

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

<img src="image-default.jpg" 
     srcset="image-small.jpg 300w,
             image-medium.jpg 600w,
             image-large.jpg 900w"
     alt="Описание изображения">

Question 33

Q

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

Answer

A

<nav>
  <ul>
    <li><a href="#home">Главная</a></li>
    <li><a href="#about">О нас</a></li>
    <li><a href="#services">Услуги</a></li>
    <li><a href="#portfolio">Портфолио</a></li>
    <li><a href="#contact">Контакты</a></li>
  </ul>
</nav>

Question 34

Q

Что такое <iframe>?

Answer

A

Элемент <iframe> в HTML используется для вставки другого документа в текущий документ. Это позволяет разработчикам встраивать веб-страницы или внешние ресурсы, такие как видео, карты или другие веб-страницы, внутрь основной веб-страницы.

Question 35

Q

Для чего используются тэги _{и ^?}

Answer

A

Теги _{и ^{используются для управления вертикальным положением текста в HTML.}}

_{(subscript) используется для отображения текста в нижнем индексе.}

^{(superscript) используется для отображения текста в верхнем индексе.}

Question 36

Q

Как можно скрыть элемент разметки не используя CSS и JS?

Answer

A

Вы можете скрыть элемент разметки, не используя CSS или JavaScript, с помощью атрибута HTML, называемого hidden. Этот атрибут просто скрывает элемент отображения в браузере.

```

<p>Этот абзац скрыт</p>

~~~

Однако стоит отметить, что этот элемент все равно присутствует в документе и может быть найден и отображен при помощи инструментов разработчика или средств анализа HTML.

Question 37

Q

Разница между <meter> и <progress>?</progress></meter>

Answer

A

Элементы <meter> и <progress> используются для отображения прогресса, но они имеют некоторые различия в своем применении и предназначении.</progress></meter>

<meter>:

- <meter> используется для представления значения в заданном диапазоне. Он обычно используется для измерения величин, таких как процентное значение выполнения задачи, градации оценок, уровни заряда батареи и т. д.
- У элемента <meter> есть атрибуты min, max, value, которые определяют минимальное значение, максимальное значение и текущее значение метра соответственно.
- Элемент <meter> также может иметь атрибуты low, high и optimum, которые позволяют определить диапазоны значений и оптимальное значение.

<progress>:

- <progress> используется для представления прогресса выполнения задачи, которая может быть измерена в процентах. Обычно это отображается как полоса прогресса.
- У элемента <progress> есть атрибуты value, который определяет текущее значение прогресса, и необязательный атрибут max, который определяет максимальное значение прогресса (по умолчанию равно 1).
- <progress> обычно используется, когда у вас есть конкретное количество выполненной работы и общее количество работы, и вы хотите отобразить процент выполнения.

Таким образом, основное различие между <meter> и <progress> заключается в том, что <meter> предназначен для измерения и отображения значения в диапазоне, в то время как <progress> предназначен для отображения прогресса выполнения задачи в процентах.
</progress></meter></progress></meter></progress></progress></progress></progress></meter></meter></meter></meter>

Question 38

Q

Как можно сгруппировать опции внутри тэга <select>?</select>

Answer

A

Для группировки опций внутри элемента <select> в HTML можно использовать атрибут optgroup для определения группы и атрибут label для указания названия группы.</select>

```
<select></select>

<optgroup>
<option>Яблоко</option>
<option>Груша</option>
<option>Банан</option>
</optgroup>

<optgroup>
<option>Помидор</option>
<option>Огурец</option>
<option>Морковь</option>
</optgroup>

</select>
~~~

Question 39

Q

Для чего используют атрибут novalidate?

Answer

A

При отправке формы браузер обычно выполняет некоторые встроенные проверки, такие как проверка обязательных полей (required), проверка типов ввода (type=”email”, type=”number”, и т. д.) и другие. Если какие-либо из этих правил не выполняются, браузер может блокировать отправку формы и выдавать сообщения об ошибках.

Добавление атрибута novalidate к тегу <form> отключает эту встроенную проверку, позволяя форме быть отправленной независимо от того, соответствуют ли данные каким-либо ожидаемым форматам или правилам.

Question 40

Q

Для чего используется атрибут pattern?

Answer

A

Атрибут pattern используется в элементах <input></input> типа text, search, tel, url и email для определения регулярного выражения (RegExp), которому должно соответствовать значение поля ввода.

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

Question 41

Q

Почему стоит использовать семантические теги в верстке?

Answer

A

Улучшение доступности
Улучшение SEO
Повышение читаемости кода
Улучшение структуры документа

Question 42

Q

Для чего используется тэг <label>?</label>

Answer

A

Элемент <label> в HTML используется для создания метки (label) для элемента формы, такого как <input></input>, <textarea>, <select>, <button> и других.</button></select></textarea></label>

Основное предназначение тега <label> - это связывание текстовой метки с элементом формы, что улучшает удобство использования формы для пользователей и обеспечивает более доступный и понятный интерфейс.</label>

Question 43

Q

Способы улучшения производительности веб-страницы при использовании HTML?

Answer

A

Оптимизация изображений
Минимизация HTML-кода
Использование кэширования
Сжатие текстовых ресурсов
Асинхронная загрузка скриптов
Lazy load
Аудит и оптимизация веб-страницы

Question 44

Q

Основные атрибуты HTML-форм? Как они влияют на отправку данных с веб-страницы?

Answer

A

Основные атрибуты HTML-форм влияют на поведение и обработку данных, отправляемых с веб-страницы. Вот некоторые из основных атрибутов:

action: Атрибут action указывает URL-адрес, на который должна быть отправлена форма при ее отправке. Этот URL обычно обрабатывает данные формы на сервере. Если атрибут action не указан, форма отправляется на текущую страницу.

method: Атрибут method указывает HTTP-метод, который будет использоваться при отправке данных формы. Два основных метода - GET и POST. GET используется для получения данных от сервера, а POST - для отправки данных на сервер для обработки.

name: Атрибут name присваивает имя форме, что позволяет идентифицировать ее при обработке на сервере или при работе с данными на стороне клиента.

enctype: Атрибут enctype определяет способ кодирования данных формы перед отправкой на сервер. Обычные значения включают application/x-www-form-urlencoded, multipart/form-data и text/plain.

target: Атрибут target указывает, куда браузер должен открыть результат отправки формы. Обычные значения включают _self, _blank, _parent и _top.

autocomplete: Атрибут autocomplete управляет автозаполнением полей формы браузером. Значения могут быть on (включено) или off (отключено).

novalidate: Атрибут novalidate указывает, что браузер не должен выполнять проверку формы перед отправкой. Это может быть полезно при кастомной валидации на стороне клиента или сервера.

Brainscape's Knowledge GenomeTM

html Flashcards

Brainscape's Knowledge Genome^TM