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

<picture>

Структура похожа на тег видео, но используется для изображений. Кто-то может сказать: «Подождите, разве у нас уже нет <img> ?», Почему я бы использовал это… бесполезно ». Хорошо, это не похоже на тот и лучше чем <img>

Как вы справляетесь, когда у вас есть изображение с двумя или более качествами? Возможно, вы попытаетесь использовать серверный рендеринг для обнаружения пользовательского агента, и тогда вы подадите качество устройству и AAAHH !. Почему мы не просто используем элемент Picture? Правильно, с элементом Picture вы можете использовать медиазапросы, чтобы сообщить браузеру, какое изображение должно отображаться, а другие источники будут игнорироваться, чтобы изображения могли загружаться быстрее. Если вы комбинируете Picture с CSS-адаптивными классическими свойствами, вы можете получить настоящие адаптивные изображения. Посмотрите пример и измените размер, чтобы проанализировать изменения.

<picture>
  <source media="(max-width: 500px)" srcset="alt/image.img">
  <img src="path/to/image.img">
</picture>

<fieldset>

Правильно, HTML поставляется с нативной «группой форм». На мой взгляд, иногда лучше использовать этот тег, чтобы сэкономить время на создание макета и на самом деле лучше для SEO. Я не собираюсь лгать, это так ужасно, но это еще одно хорошее новшество, потому что вы не беспокоитесь о позиционировании элементов, а только о том, чтобы их составить.

<fieldset>
  <legend>Login:</legend>
  User: <input type="text"><br>
  password: <input type="password"><br>
  <button>Login</button>
</fieldset>

<progress>

Есть так много библиотек, которые поставляются со сложными прогресбаром, но я не понимаю, почему этот тег используется недостаточно. Очень легко применять CSS, и если вы не возражаете установить минимальное и максимальное значения, это не имеет значения, потому что оно будет отображаться как неопределенная прогресбаром.

<progress max=100 value=13></progress>

<base>

Этот тег является одним из моих любимых, он помогает больше, чем вы думаете. Это поможет лучше обрабатывать относительные ссылки <a>, потому что вам нужно только объявить корневой URL-адрес в заголовке с помощью <base>, и все ссылки с относительными путями не будут иметь значения по умолчанию, но базовый URL-адрес, который был объявлен, общий целевой атрибут тоже можно переписать. Я знаю, что по умолчанию относительные ссылки перенаправляются на фактический путь, но иногда с сгенерированным динамическим контентом это не хорошо. Для относительных путей к изображениям или файлам также будет использоваться <base> по умолчанию, если вы не укажете полный URL-адрес; если вы сделаете это, <base> будет проигнорирован без проблем.

<base href=”https://www.example.com/" target=”_blank”>
<a href="a-post.html">A post</a>

Input теги

Знаете ли вы, что есть больше input’ов, не только тип текста или тип пароля? Нет, я не говорю о вводе электронной почты. Чтобы вызвать их полномочия, измените только атрибут type, и браузер выполнит эту работу.

Date inputs

Возможно, наиболее известным из этого типа является [type = date], но у нас есть более конкретные входные данные для месяца, недели и даже часов.

<input type=”date” />
<input type=”datetime-local” />
<input type=”month” />
<input type=”week” />
<input type=”time” />

Эти входные данные будут возвращать допустимые и читаемые форматы для класса Date().

Color picker

Должен быть честным, стиль ввода [type = color] во многом зависит от вашего браузера, но это быстрое и чистое решение, позволяющее пользователю выбирать цвет.

<input type=”color” />

Этот input вернет шестнадцатеричное числовое значение.

Range

Range — это решение, когда вы хотите дать пользователю возможность выбрать число в диапазоне. Как только я использовал это для создания ползунка громкости в моем собственном видеоплеере, он добился цели, используя допустимые минимальные и максимальные значения. [type=range]
https://codepen.io/adrian-legaspi/pen/bGNqXdN

<input type=”range” />

<details>

Это так просто, переключаемый, нативный и настраиваемый скрытый раздел. Достаточно всего лишь нажать на тег внутри , чтобы отобразить весь скрытый контент. Кстати, JavaScript не нужен, да, вы можете сделать его красивее с помощью CSS.
https://codepen.io/NielsVoogt/pen/YbaNPd

Теги форматирования текста

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

<mark>

Тег <mark> помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.

<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. <mark>Dolores temporibus vitae praesentium quaerat</mark> quidem eaque dignissimos corporis dolorum explicabo? Alias? 
</p>

<abbr>

Если вам нужно использовать имя аббревиатуру в тексте, этот тег — плохой парень, который возьмет на себя работу.

<abbr title=”JavaScript”>JS</abbr>

Атрибут title может быть хорошим дополнением для получения подсказки о том, что означает аббревиатура.

<pre>

Предварительно отформатированный текст или <pre> используется для отображения текста в том виде, в котором он написан. Со всеми пробелами, табуляциями и поддерживаемыми символами текст будет отображаться точно так, как он отформатирован в блоке.

<pre>
Hello
      World
</pre>

About the Author

Ergashev Lazizbek

Добрый день, дорогие мои читатели, позвольте мне рассказать вам немного о себе. Я Лазизбек Эргашев, я веб-разработчик из Узбекистана. В основном я использую laravel/php для бэкэнда и vuejs/javascript для фронтэнда. Основная цель моего блога - поделиться с вами своим опытом и знаниями.

View All Articles