5 HTML трюков, о которых ты не знал!

1. Сегодня на рассмотрении 5 относительно новых фишек! К примеру у нас есть условная картинка, обычная. Но что делать, если нужно базовый URL. Подобное метатэг встречался в ModX. Пишется базовый URL, и к нему присоединяется этот src. Тем самым если мы сохраним, то картинка пропадёт. 

<base href="http://example.com" target="_blank" />

2. Далее у нас идёт переадресация с помощью html. Пишем meta, Refresh, Content 4-это 4 секунды, через которые будет переадресация. 

<meta http-equiv="refresh" content="3; https://example.com" />

3. Следующий момент tag picture. Мы можем прописывать медиазапросы. К примеру-изменение размера картинки. Картинку можно изменить с помощью "Large", "Medium" и "Small". Если ни под один из размеров не подходит, то в таком случае мы делаем через image

<picture>
	<source media="(max-width:768px)" srcset="/img/medium.jpg" />
	<source media="(max-width:495px)" srcset="/img/small.jpg" />
	<img src="/img/large.jpg" alt="" />
</picture>

4. Одним из трюков является подсказка. Это может пригодиться тогда-когда нужно помочь найти свой город, или свою страну. Это обычно встроено в html.

<datalist id="cities">
	<option value="Moscow"></option>
	<option value="New York"></option>
	<option value="Tokyo"></option>
</datalist>

5. Lazy loading. Сайт будет грузиться быстрее, если мы будем делать ленивую загрузку.

<img 
	src="/img/medium.jpg"
	alt=""
	loading="lazy"
/>

Чтобы более подробно разобраться в данной теме "5 HTML трюков, о которых ты не знал!" советую посмотреть наше видео на эту тему:

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!