HTML ru Flashcards
(109 cards)
Что такое 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 имеет чётко определённые границы, поэтому текст или изображения не могут выходить за них. Тем не менее, в очень редких случаях текст всё же может выйти за их пределы. Чаще всего это случается из-за того, что текст был помещён в таблицу с неправильно указанными параметрами (особенно длины).
- ).
Unordered list (маркированный список —
- ).
datalist
Создает список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.
Список, создаваемый тегом , связывается с текстовым полем посредством атрибута id. Его значение должно совпадать со значением атрибута list тега .
- Definition list (список определений —
- ).
- входит в тройку элементов
- ,
- , предназначенных для создания списка определений. Каждый такой список начинается с контейнера
- , куда входит тег
- создающий термин и тег
- задающий определение этого термина.
- Термин 1
- Определение термина 1
- Термин 2
- Определение термина 2
- ,
Здесь много-много текста. Прокручивай его вниз.
?
состоит в том, чтобы отделять фрагменты текста друг от друга
?
или тег
.