DevGang
Авторизоваться

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

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

Готовы, поехали!

1-Download

Атрибут download указывает, что цель (файл, указанный в href будет загружен), когда пользователь нажимает на гиперссылку.

Пример:

<a href="/images/program.jpg" download>

2-ContentEditable

В HTML можно редактировать любой элемент. С помощью некоторых обработчиков событий JavaScript вы можете превратить свою веб-страницу в полноценный и быстрый редактор форматированного текста. Когда для HTML элемента установлен атрибут contenteditable со значением true, становится доступным метод document.execCommand(). Это позволяет запускать команды для управления содержимым редактируемой области.

Пример:

<div contenteditable="true">
  This text can be edited by the user.
</div>

3-Multiple

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

Пример:

<label for="tech">Choose a technology:</label>

<select name="tech" id="tech" multiple>
  <option value="angular">Angular</option>
  <option value="react">React</option>
  <option value="vue">vue</option>
</select>

<!-- or -->
<input type="file" multiple>

4-Poster

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

Пример:

<video  poster="/gif/poster.gif">
  <source src="trailer.mp4" type="video/mp4">
</video>

5-Hidden

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

Пример:

<p hidden>You won't see me on the browser, only developers can!</p>

6-Accept

Атрибут accept определяет фильтр для каких типов файлов пользователь может выбрать из диалогового окна ввода файла. Атрибут accept может быть использован только с <input type="file">.

Пример:

<form action="/...">
  <label for="img">Select image:</label>
  <input type="file" id="img" name="img" accept="image/*">
  <input type="submit">
</form>

<!-- or -->

<input type="file" accept=".jpg, .png" >
#HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить