7 полезных атрибутов HTML, о которых вы, возможно, не знаете

7 полезных атрибутов HTML, о которых вы, возможно, не знаете

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

В этой статье мы предоставим список некоторых полезных атрибутов HTML, о которых вы, вероятно, еще не слышали. Итак, приступим.

1. Accept

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вы можете проверить это в Codepen ниже:

2. Multiple

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

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

3. Contenteditable

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

Пример выше позволяет нам редактировать список сотрудников на веб-странице.

4. Download

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вам просто нужно указать имя файла в атрибуте download и путь к файлу href.

5. Translate

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

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

6. Poster

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

Изображение будет отображаться в виде эскиза видео, пока вы не нажмете кнопку воспроизведения.

7. Pattern

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

Заключение

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

Автор: Mehdi Aoussiad

Источник: javascript.plainenglish.io

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

HTML5: основы

Изучите HTML5 с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.