1. Ленивая загрузка изображения
Другими словами, изображение загружается, когда пользователь скроллит страницу и изображение становится видимым, в противном случае оно не загружается.
Всё, что вам нужно сделать, – это добавить свойство loading=«lazy» у тега img.
После добавления свойства ваш элемент должен выглядеть примерно так:
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
2. Автокомплит
HTML также позволяет отображать набор предопределённых вариантов, используя тег <datalist>.
Помните, что атрибут ID этого тега должен совпадать с атрибутом list тега input.
<label for="country">Choose your country from the list:</label> <input list="countries" name="country" id="country"> <datalist id="countries"> <option value="UK"> <option value="Germany"> <option value="USA"> <option value="Japan"> <option value="India"> </datalist>
3. Picture
Вы когда-нибудь сталкивались с проблемой, когда изображения увеличивались не так, как вы ожидали?.
Обычно это происходит, когда вы пытаетесь создать сайт галереи или используете большое изображение и отображаете его в виде миниатюры.
При изменении ширины viewport’a вы можете заметить, что некоторые изображения не масштабируются вверх и вниз, как ожидалось.
используя тег <picture>, позволяющий добавлять несколько изображений, соответствующих разной ширине.
Ваш код будет выглядеть примерно так:
<picture> <source media="(min-width:768px)" srcset="med_flag.jpg"> <source media="(min-width:495px)" srcset="small_flower.jpg"> <img src="high_flag.jpg" alt="Flags" style="width:auto;"> </picture>
4. Базовый URL
Этот тег пригодится, когда у вас есть много ссылочных тегов, перенаправляющих на определённый URL-адрес, и все URL-адреса начинаются с одного и того же базового адреса.
Например, если я хочу указать URL-адрес на Twitter Илона Маска и Билла Гейтса, начало URL-адреса (домена) будет таким же, а то, что следует за ним, будет их соответствующими идентификаторами.
Обычно мне приходится дважды вставлять ссылку с одним и тем же доменным именем.
Однако в HTML есть тег <base>, который позволяет вам установить базовый URL-адрес, как показано ниже:
<head> <base href="https://www.twitter.com/" target="_blank"> </head> <body> <img src="elonmusk" alt="Elon Musk"> <a href="BillGates">Bill Gate</a> </body>
Приведённый выше код сгенерирует изображение с ссылкой на “https://www.twitter.com/elonmusk” и ссылочный тег, перенаправляющий на “https://www.twitter.com/billgates».
Тег <base> должен иметь либо “href”, либо “target”-атрибуты.
5. Обновление документа
Если вы хотите перенаправить пользователя на другую страницу после периода бездействия или даже сразу, вы можете легко это сделать, используя простой HTML.
Это поведение встроено в HTML, и вы можете использовать его с помощью тега <meta> и установки http-Equiv=«refresh» в него:
<meta http-Equiv="refresh" content="4; URL='https://google.com'/>
Здесь свойство content указывает время в секундах, после которого должно произойти перенаправление.
Стоит отметить, что, хотя Google утверждает, что относится к этой форме редиректа так же, как и к другим редиректам, использовать этот тип редиректов неразумно, если только это действительно не нужно.
Поэтому используйте его только в определённых случаях, например для редиректа после значительного бездействия.
