HTML ru Flashcards
Что такое HTML?
HTML означает язык разметки гипертекста. Это общий язык, который мы используем для разработки интерактивных и динамических веб-страниц.
Что такое теги?
Теги являются важной частью HTML-тегов, и мы используем их для создания HTML-документов. Каждый тег имеет разные свойства и состоит из трех частей: открывающего тега, содержимого и закрывающего тега. Любой контент, который мы хотим отобразить на веб-странице, мы должны упомянуть в открывающих и закрывающих тегах.
Для чего нужен DOCTYPE?
DOCTYPE — это сокращение от DOCument TYPE (тип документа). DOCTYPE всегда связан с DTD — Document Type Definition (определение типа документа).
Для веб-страниц объявление DOCTYPE необходимо. Он используется для того, чтобы сообщить пользовательскому агенту, к какой версии спецификаций HTML принадлежит ваш документ. Как только пользовательский агент распознал правильный DOCTYPE, он запустит режим no-quirks, соответствующий этому DOCTYPE, для чтения документа. Если пользовательский агент не распознает правильный DOCTYPE, он активирует режим quirks.
DOCTYPE для стандарта HTML5 определяется как .
На что необходимо обратить внимание при разработке мультиязычных сайтов?
Используйте атрибут lang в HTML.
Перенаправляйте пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.
Текст на картинках плохо поддается адаптации. Многие до сих пор помещают текст на картинки чтобы получить хорошо выглядящий несистемный шрифт на любом компьютере. Однако чтобы перевести текст картинкой, нужно иметь подготовленную картинку с каждой строкой текста для каждого языка. При большом количестве текста это быстро выйдет из-под контроля.
Ограничение длины слов и предложений. Некоторый текст может быть длиннее при написании на другом языке. Будьте внимательны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.
Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.
Форматируйте даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в США или «31 мая 2012» в странах Европы.
Не склеивайте переведённые строки. Не пишите что-то вроде “Сегодняшняя дата “ + date. Эта фраза будет выглядеть некорректно на языках с другим порядком слов. Вместо этого используйте шаблонную строку с подстановкой параметров для каждого языка. Например, посмотрите на следующие два предложения на русском и китайском соответственно: Я буду путешествовать {% date %} и {% date %} 我会出发. Обратите внимание, что положение переменной отличается из-за грамматических правил языка.
Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.
Почему хорошей практикой считается располагать для подключения CSS между , а для подключения JS ставить перед
Размещение внутри тега необходимо при создании оптимизированного веб-сайта. Когда страница загружается впервые, HTML и CSS анализируются одновременно; HTML создает DOM (объектную модель документа), а CSS создает CSSOM (объектную модель CSS). И то, и другое необходимо для создания визуальных элементов на веб-сайте, что позволяет быстро определить время «первого значимого рисования». Этот прогрессивный рендеринг является категорией оптимизации сайтов, которые измеряются в их показателях эффективности. Размещение таблиц стилей в нижней части документа - это то, что препятствует прогрессивной загрузке страницы во многих браузерах. Некоторые браузеры блокируют рендеринг, чтобы избежать перерисовки элементов страницы, если ее стили изменятся. Все это время пользователь будет пялиться на пустую белую страницу. В других случаях может возникать мерцание нестилизованного содержимого (FOUC), на котором может отображаться веб-страница без применения стилей.
Что такое прогрессивный рендеринг
Прогрессивный рендеринг — это название технологий, используемых для ускорения отрисовки страниц (в частности, для уменьшения времени загрузки), чтобы показать пользователю контент как можно скорее.
Примеры подобных технологий:
Ленивая загрузка изображений. Изображения на странице не загружаются все разом. JavaScript подгрузит изображения тогда, когда пользователь доскроллит до той части страницы, на которой они расположены.
Приоритизация видимого контента. Только минимум CSS, контента, скриптов, необходимых для отрисовки той части страницы, которую пользователь увидит первой. Вы можете использовать отложенные скрипты или слушать события DOMContentLoaded или load, чтобы загрузить остальные ресурсы и контент.
Асинхронные фрагменты HTML. Отправка в браузер частей HTML-страницы, созданной на бэкенде. Более подробно про эту технологию можно почитать в этой статье.
Для чего используется атрибут srcset в теге изображения? Опишите процесс, который браузер использует при обработке содержимого этого атрибута.
Вы должны использовать атрибут srcset, когда хотите показывать пользователям разные изображения в зависимости от их ширины дисплея их устройств - предоставление изображений более высокого качества устройствам с retina-дисплеями улучшает работу пользователя, в то время как предоставление изображений с низким разрешением на устройства с низким разрешением повышает производительность и уменьшает объём передаваемых данных (поскольку нет видимой разницы с большими изображениями). Например: <img></img> указывает браузеру отображать малое, среднее или большое изображение в зависимости от разрешения дисплея пользователя. Первое значение - это имя изображения, а второе - ширина изображения в пикселях. Для ширины устройства 320px выполняются следующие расчеты:
500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25
srcset решает проблему, когда вы хотите показывать файлы изображений меньшего размера для устройств с узким экраном, поскольку они не нуждаются в больших изображениях, как на настольных дисплеях, - а также, при желании, вы можете показывать изображения с различным разрешением для экранов с высокой/низкой плотностью пикселей.
метатег
Он не будет отображаться на странице, но может быть прочитан устройством.
Может использоваться
- для браузеров (как отображать контент или перезагружать страницу),
- поисковых систем (ключевых слов)
- или других веб-служб.
Где и почему размещен css js
Когда дело доходит до размещения css js, нам необходимо понимать весь процесс загрузки сайта.
。
Сначала браузер получает html-код с сервера, а затем начинает его анализировать.
Создайте дерево DOM (сверху вниз на основе html-кода) и одновременно создайте дерево визуализации
Загрузка и выполнение файла Encounter js заблокирует построение дерева DOM; обнаружение файла css заблокирует построение дерева отрисовки
Атрибут defer в теге скрипта: процесс построения дерева DOM и загрузка файла js выполняются асинхронно (параллельно), но выполнение файла js должно быть завершено после построения дерева DOM
Атрибут async в теге скрипта: процесс построения дерева DOM, дерева рендеринга, а также загрузка и выполнение файла js выполняются асинхронно (параллельно)
Таким образом, тег скрипта лучше всего размещать перед тегом, потому что после всех тегов в теле не будет пустого места при загрузке веб-страницы. Он может продолжать предоставлять пользователям визуальную обратную связь, а в некоторых случаях сокращает количество ошибок. получилось.
И тег css должен быть помещен между тегами, потому что, если он помещается перед тегом, тогда дерево рендеринга будет построено при построении дерева DOM, затем, когда дерево рендеринга построено, браузер должен повторно отобразить всю страницу, что вызывает Пустая трата ресурсов. КПД невысокий. Если поместить между ними, браузер будет строить и отображать одновременно, что намного эффективнее. В общем, это для повышения производительности и улучшения читабельности веб-страниц.
Что такое прогрессивный рендеринг
При первом рендеринге загружается только содержимое первого экрана, а последующая загрузка выполняется по мере того, как пользователь скользит или проходит время. Преимущество этого: повышение производительности веб-страницы, отсутствие траты ресурсов, загрузка по запросу.
HTML-язык шаблона
Шаблон содержит: статическую часть HTML, вставленную динамическую часть контента.
Front-end оптимизация (повышение скорости загрузки веб-страниц)
- Использование css-спрайтов может эффективно уменьшить количество HTTP-запросов.
- Используйте кеш
- Сжимайте файлы js и css, чтобы уменьшить размер файла.
- Используйте CDN, чтобы снизить нагрузку на сервер.
- Ленивая загрузка изображений.
- Предварительно загрузите файлы css и js.
- Избегайте глубокой вложенности домовой структуры.
- При добавлении стилей к элементам DOM поместите стили в класс и напрямую добавьте класс к элементу, чтобы уменьшить количество рефакторинга и перекомпоновки.
Как Бы Вы Сгруппировали Элементы Формы?
Если вы хотите собрать и переместить определённые HTML-элементы в одну группу, то тег fieldset считается наиболее лучшим вариантом для этого.
Что Такое Теги Якоря?
Теги якоря используются для создания гиперссылок. Эти ссылки создают в уже существующей части контента (текста). Всего существует три типа якорей – активные, посещённые и непосещённые.
Что Такое Семантические Элементы?
Если простые элементы (теги) нацелены на определение того, как должна выглядеть страница, то семантические элементы привносят смысл в эту страницу. Примерами семантических элементов может стать: head, footer и article. Как вы видите, они ясно показывают какой тип контента в них будет находиться.
Как в HTML5 Хранятся Данные?
Всего существует два способа хранения данных в HTML 5 – с помощью локального хранилища или сессионного хранилища.
Данные, хранящиеся в локальном хранилище, остаются в сохранности и не будут удалены после того как разработчик закроет браузер. В сессионном хранилище при выходе из браузера данные автоматически удаляются.
Что Случается, Если Две Пары Тегов Перекрывают Друг Друга?
Если вы случайно перекроете два или более набора тегов, то вы, скорее всего, сразу же заметите это по внешнему виду сайта.
Если различные теги перекрывают друг друга, то в работающей версии сайта активируются только первые теги. Вы легко можете проверить свой сайт на наличие подобных ошибок в визуальном плане.
Как Вы Можете Добавить JavaScript На Ваш Сайт?
На данный момент существует два способа добавления JavaScript на ваш сайт – строчный, с помощью добавления блока скрипта и при помощи добавления ссылки на файл JavaScript.
Что Такое Кэширование Приложения?
Кэширование приложения — это функция, которая позволяет вам запускать проект (сайт) в офлайн режиме. Это отличная возможность для тестирования, так как позволит загрузить необходимые ресурсы гораздо быстрее.
Что Такое Marquee?
Marquee — это функция, позволяющая вам добавлять бегущую строку на вашу страницу. Вы можете сделать это с помощью добавления текста внутри тегов “marquee”.
Что Такое API?
Это один из самых часто задаваемых вопросов, ответ на который должен знать каждый HTML верстальщик. API — это “Application Programming Interface” или “Программный Интерфейс Приложения”. Эти интерфейсы используют для создания веб-приложений. API используют уже существующие инструменты и компоненты, поэтому позволяют разработчикам напрямую интегрировать их в свои сайты.
В Чём Различие Между Нормальными Ссылками и Активными?
Нормальные ссылки отображаются синим. Однако эти же ссылки могут стать активными при наведении на них курсора.
Каков Размер Текстового Поля По Умолчанию?
Опытный HTML верстальщик без труда ответит на данный вопрос, но некоторые могут быть удивлены подобной мелочью.
Ответ очень прост – максимальное количество символов, которое может присутствовать в неизменённом текстовом поле, равно 13.
Почему Часть Текста Может Выходить За Пределы Страницы?
В обычной ситуации такое практически невозможно – HTML имеет чётко определённые границы, поэтому текст или изображения не могут выходить за них. Тем не менее, в очень редких случаях текст всё же может выйти за их пределы. Чаще всего это случается из-за того, что текст был помещён в таблицу с неправильно указанными параметрами (особенно длины).
Какие основные виды списков применяют при создании веб-страницы?
При создании веб-страницы можно использовать:
Ordered list (нумерованный список — <ol>).
Unordered list (маркированный список — </ol><ul>).
datalist
Создает список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.
Список, создаваемый тегом, связывается с текстовым полем посредством атрибутаid. Его значение должно совпадать со значением атрибутаlistтега.
- Definition list (список определений — <dl>).</dl></ul>
Тег<dl>входит в тройку элементов<dl>,<dt>,</dt><dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера<dl>, куда входит тег<dt>создающий термин и тег</dt><dd>задающий определение этого термина.
<dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> <dt>Термин 2</dt> <dd>Определение термина 2</dd> </dl>
</dd></dl></dd></dl></dl>
Зачем использовать списки в HTML?
Списки делают информацию более наглядной и удобной для восприятия. Более того, внутри списков (точнее, для произвольного отображения элементов списка) тоже можно использовать различные теги.
Почему некоторые символы на веб-странице иногда отображаются некорректно?
Чаще всего символы отображаются некорректно из-за проблем с кодировкой. То есть причина — в настройках браузера или веб-сервера.
Что такое Image Map?
Image Map — это технология, которая позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные веб-страницы.
Что такое white-space?
White-space — это свойство, позволяющее менять количество пробелов между словами при отображении веб-страницы. По умолчанию любое количество пробелов в HTML-коде браузер интерпретирует как один пробел.
В чём главное преимущество white-space?
При написании HTML-кода разработчику не нужно беспокоиться о лишних пробелах, которые он мог ввести: браузер при отображении веб-страницы уберёт все лишние пробелы.
Разработчик может добавлять в код пробелы не только случайно, но и специально: чтобы код стал более читабельным.
Можно ли присваивать значения не всем атрибутам тега?
Да, в этом случае браузер будет использовать значения по умолчанию. Если вас не устраивает то, как он отобразил веб-страницу, то, возможно, следует явно указать значения некоторых атрибутов.
Как разместить знак copyright на веб-странице, ведь его нет на клавиатуре?
Знак copyright относится к спецсимволам. Чтобы разместить его на веб-странице, нужно в соответствующем фрагменте HTML-кода набрать на клавиатуре последовательность © или ©.
Как создать ссылки на разные фрагменты (разделы) одной и той же веб-страницы?
Для этого нужно найти в HTML-коде начало нужного нам фрагмента. В этом месте создать так называемый «якорь» при помощи атрибута name тега <a>.</a>
Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы
<p><a></a></p>
(в теге д.б. атрибут name =’top’)
<p>Здесь много-много текста. Прокручивай его вниз. </p>
<p><a>Наверх</a></p>
</a>
Зачем мы используем альтернативный текст (атрибут alt тега <img></img>) для изображений?
Альтернативный текст отображается при отключенной загрузке графики в браузере пользователя или в случае проблемы при загрузке конкретного изображения. Этот текст даёт понять, что должно было быть изображено на этой картинке.
Могут ли файлы HTML хорошо работать в каком-нибудь редком или ультрасовременном браузере?
Конечно, файлы HTML могут и должны хорошо работать в любом браузере, потому что браузер должен соответствовать стандартам HTML. Если разработчики решили не поддерживать некоторые функции стандарта, это остаётся на их совести.
Как вы думаете гиперссылка может быть только текстовой?
Нет, гиперссылка может быть не только текстовой, но и, например, графической. Это означает, что мы можем преобразовать изображение в ссылку, которая направит пользователя на другую страницу. Гиперссылка вообще не зависит от типа контента, который лежит «под ней».
Что из себя представляют атрибуты тега < li>?
Их два:
type устанавливает вид маркера нумерованного или маркированного списка;
value — число, с которого будет начинаться нумерованный список.
Для чего нужны таблицы стилей (CSS)?
Таблицы стилей позволяют задать чёткие правила, которые определяют внешний вид контента, тех или иных HTML-элементов и всей страницы в целом. Более того, одни и те же правила можно применять сразу к нескольким веб-страницам, что упрощает сохранение и, при необходимости, изменение единого стиля сайта.
Какие типы нумерации в списках вы знаете?
В качестве нумерующих элементов могут выступать следующие значения:
арабские числа (1, 2, 3, …);
прописные латинские буквы (A, B, C, …);
строчные латинские буквы (a, b, c, …);
прописные римские числа (I, II, III, …);
строчные римские числа (i, ii, iii, …).
Как задать разные цвета для фрагментов текста веб-страницы?
Чтобы задать разные цвета для фрагментов текста, нужно поместить каждый из фрагментов внутрь парного тега font:
Тег: font Атрибут: color
Где хранятся числовые коды символов в HTML?
В таблице ASCII. При отображении веб-страницы браузер берет числовые коды символов из HTML-документа и заменяет их на соответствующий символ из таблицы.
Каковы преимущества группировки нескольких флажков (элементов checkbox)?
Есть несколько преимуществ группировки флажков:
это помогает лучше организовать, структурировать их;
это позволяет обращаться к конкретным флажкам из группы, используя id;
это позволяет создать другую группу флажков на этой же веб-странице, не боясь перепутать названия или идентификаторы флажков.
Как перекрытие тегов влияет на отображение контента?
Перекрытие тегов в HTML приводит к распознаванию только первого тега. Но такие проблемы возникают только тогда, браузер пытается распознать теги без текста.
