Форма входа с плавающим заполнителем и световой кнопкой

#html #css

Accept

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

Например, мы можем принять загрузку на наш сервер только jpg и png.

#HTML

Multiple

Атрибут multiple в HTML можно прикрепить к тегам input и select. Это в основном позволяет пользователю вводить несколько значений.

Например, мы также можем использовать атрибут multiple во входных данных для загрузки HTML, чтобы пользователь мог загружать несколько файлов. Вот пример кода:
<input type="file" multiple />

#html

Contenteditable

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

#html

Download

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

<div>
<a href="index.html" download="fileName">Download this</a>
</div>

#html

Translate

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

<p translate="no">Mehdi</p>

#html

Poster

Атрибут poster используется для отображения изображения во время загрузки HTML-видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения.

<video poster="picture.jpeg" controls>
   <source src="file.mp4" type="file/mp4">
   <source src="file.ogg" type="file/ogg">
</video>

#html

Pattern

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

<form >
  <label for="input">Country Code:</label>
  <input type="text" id="input" pattern="[A-Za-z]{3}" title="Three letters country code.">
  <input type="submit">
</form>

#html

<template> — это элемент HTML, который позволяет нам создать, шаблон — структуру HTML для веб-компонента. Шаблон не обязательно должен быть огромным фрагментом кода. Он может быть очень простой:
<template>
  <p>The Zombies are coming!</p>
</template>
Элемент <template> имеет важное значение, потому что он связывает все вместе. Это как фундамент здания; это база, на которой построено все остальное.

#html

Выделение текста с помощью HTML-тега mark

<p>
  <mark>Highlight</mark>
  text with HTML &lt;mark&gt; tag
</p>

Цвет фона mark по умолчанию — желтый.

#html

WebP — изображения

Преимущества
• Изображения без потерь WebP на 26% меньше по размеру по сравнению с PNG.
• Изображения WebP с потерями на 25–34% меньше сопоставимых изображений JPEG при эквивалентном индексе качества SSIM.
• WebP с потерями также поддерживает прозрачность изображений.

Недостатки
Единственная причина, по которой Интернет не был обновлен полностью WebP — это совместимость.

• Браузеры Safari на данный момент еще не поддерживают его. Но появились новости о том, что в ближайшем будущем в Safari появится поддержка WebP.
• Системы управления контентом (CMS) в настоящее время не поддерживают WebP по умолчанию. Но вы можете установить плагин или расширение.

#html

blockquote

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

#html

q

Теги q предназначены для встроенных цитат или, как сказал бы мой учитель в десятом классе, тех, что имеют меньше четырех строк. Многие современные браузеры автоматически добавляют кавычки для цитат в качестве псевдо-элементов, но для старых браузеров может потребоваться резервное решение.

#html

Атрибут cite

И <q>, и blockquotes могут использовать атрибут цитирования (cite). Этот атрибут содержит URL, который предоставляет контекст и / или ссылку на цитируемый материал. Спецификация подразумевает, что URL может быть окружен пробелами.

Атрибут cite не виден пользователю по умолчанию. Вы можете добавить его с помощью магии CSS, как показано в следующей демонстрации.👇

#html #css

Один из способов разметки цитаты — и таким образом, чтобы угодить божествам семантического кода — это поместить блочную цитату в элемент figure. Затем поместите элемент cite и любую другую информацию об авторе или цитировании в figcaption

#html

Атрибут loading элемента <img>  (или  loading атрибут для <iframe>) могут быть использованы, чтобы указать браузеру на необходимость отложить загрузку изображений / iframe до тех пор, пока пользователь не доскроллит до них.

<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

Событие load запускается, когда все другие необходимые ресурсы были загружены. В это время, возможно (или даже наиболее вероятно), что изображения не будут загружены, даже если пользователь доскроллит до изображений и они будут в visual viewpoint.

#html #полезно

Порядок скриптов

В любом приложении сначала необходимо загрузить основной контент. Затем мы можем сосредоточиться на сторонних вставках, поскольку они в основном занимают небольшую область на веб-странице.
Например, текстовое содержание статьи должно быть загружено перед встраиванием любых изображений или видео.
Но иногда сторонние вставки могут мешать загрузке основного контента из-за парсера блокировки JavaScript. Следовательно, нам нужно быть очень осторожными с порядком их загрузки.
Мы можем использовать свойства async и defer в теге script, чтобы упорядочить выполнение сценариев.

#html #полезно

Большинство браузеров, поддерживающих Chromium, поддерживают атрибут loading со следующими значениями:

• Lazy — указывает, что iframe должен быть загружен позже. Когда браузер приближается к области просмотра, он загружает iframe.
• Eager — iframe будет загружен сразу после рендеринга страницы. Атрибут eager — это значение атрибута loading по умолчанию.
• Auto — браузер имеет право определять время загрузки iframe.

Ленивая загрузка iframe может быть эффективной, если вы работаете с картами или видео. Например, если вы используете API Google MapsEmbed, для отложенной загрузки карты.

#html#полезно