0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p><strong>В этом посте я хотел бы поведать вам о нескольких HTML-тегах, которые позволят добавить несколько полезных (или не очень 😁) нативных функций без использования JavaScript или фреймворка Bootstrap.</strong></p>
1
<p><strong>В этом посте я хотел бы поведать вам о нескольких HTML-тегах, которые позволят добавить несколько полезных (или не очень 😁) нативных функций без использования JavaScript или фреймворка Bootstrap.</strong></p>
2
<h2>Содержание</h2>
2
<h2>Содержание</h2>
3
<ul><li><a>Полоса прогресса</a></li>
3
<ul><li><a>Полоса прогресса</a></li>
4
<li><a>Бегущая строка</a></li>
4
<li><a>Бегущая строка</a></li>
5
<li><a>Автокомплит</a></li>
5
<li><a>Автокомплит</a></li>
6
</ul><h2>Полоса прогресса</h2>
6
</ul><h2>Полоса прогресса</h2>
7
<p>Довольно полезный компонент, который мы часто видим при вводе нового пароля. В Bootstrap она реализуется<a>так</a>. А что там в HTML? Тег progress - вот ответ на вопрос.</p>
7
<p>Довольно полезный компонент, который мы часто видим при вводе нового пароля. В Bootstrap она реализуется<a>так</a>. А что там в HTML? Тег progress - вот ответ на вопрос.</p>
8
<p>Тег progress легко настраивается и имеет<a>хорошую поддержку</a>во всех современных браузерах.</p>
8
<p>Тег progress легко настраивается и имеет<a>хорошую поддержку</a>во всех современных браузерах.</p>
9
<p>Кстати, если в данный тег не добавлять никаких атрибутов, то мы получим бесконечно двигающуюся полоску, которую можно использовать как статус загрузки.</p>
9
<p>Кстати, если в данный тег не добавлять никаких атрибутов, то мы получим бесконечно двигающуюся полоску, которую можно использовать как статус загрузки.</p>
10
<p>Выше я писал про пароли, но для них всё же лучше использовать не progress, а meter, так как с точки зрения семантики это более верный вариант, ведь тег meter показывает уровень заполнения, а не степень прогресса.</p>
10
<p>Выше я писал про пароли, но для них всё же лучше использовать не progress, а meter, так как с точки зрения семантики это более верный вариант, ведь тег meter показывает уровень заполнения, а не степень прогресса.</p>
11
<p>Имеет несколько полезных атрибутов для настройки его отображения и поддерживается всеми<a>браузерами</a>, кроме Internet Explorer.</p>
11
<p>Имеет несколько полезных атрибутов для настройки его отображения и поддерживается всеми<a>браузерами</a>, кроме Internet Explorer.</p>
12
<h2>Бегущая строка</h2>
12
<h2>Бегущая строка</h2>
13
<p>Постоянно смотрите новости и мечтаете о добавлении на свой сайт бегущей строки как в телевизоре? Тег marquee позволит вам осуществить свою мечту.</p>
13
<p>Постоянно смотрите новости и мечтаете о добавлении на свой сайт бегущей строки как в телевизоре? Тег marquee позволит вам осуществить свою мечту.</p>
14
<p>Поддерживает его, правда, не все<a>браузеры</a>, но ведь когда-нибудь это изменится?</p>
14
<p>Поддерживает его, правда, не все<a>браузеры</a>, но ведь когда-нибудь это изменится?</p>
15
<h2>Автокомплит</h2>
15
<h2>Автокомплит</h2>
16
<p>В HTML автокомплит реализуется при помощи тега datalist, который привязывается к input путем добавления атрибута id в datalist и дальнейшей привязки его к input через атрибут list.</p>
16
<p>В HTML автокомплит реализуется при помощи тега datalist, который привязывается к input путем добавления атрибута id в datalist и дальнейшей привязки его к input через атрибут list.</p>
17
<p>Довольно полезный тег, имеющий несколько серьезных минусов:</p>
17
<p>Довольно полезный тег, имеющий несколько серьезных минусов:</p>
18
<ul><li>Его сложно стилизовать при помощи CSS</li>
18
<ul><li>Его сложно стилизовать при помощи CSS</li>
19
<li>Средняя поддержка<a>браузерами</a></li>
19
<li>Средняя поддержка<a>браузерами</a></li>
20
</ul><p>На этом у меня всё, спасибо за внимание!</p>
20
</ul><p>На этом у меня всё, спасибо за внимание!</p>