Методы вставки изображений в HTML с использованием Emmet с примерами кода

Чтобы вставить изображение с помощью Emmet в HTML, вы можете использовать аббревиатуру img, за которой следует атрибут источника (src), чтобы указать URL-адрес изображения. Вот несколько способов добиться этого:

Метод 1: базовая вставка изображения
Аббревиатура Эммета: img[src="image.jpg"]

<img src="image.jpg" alt="Image description">

Метод 2: изображение с заданной шириной и высотой
Аббревиатура Эммета: img[src="image.jpg"][width="200"][height="100"]

<img src="image.jpg" alt="Image description" width="200" height="100">

Метод 3: изображение с классом CSS
Аббревиатура Emmet: img.my-image[src="image.jpg"]

<img src="image.jpg" alt="Image description" class="my-image">

Метод 4: изображение с отложенной загрузкой
Аббревиатура Emmet: img[src="image.jpg"][loading="lazy"]

<img src="image.jpg" alt="Image description" loading="lazy">

Метод 5: изображение с подписью
Аббревиатура Эммета: figure>img[src="image.jpg"]+figcaption

<figure>
  <img src="image.jpg" alt="Image description">
  <figcaption>Caption goes here</figcaption>
</figure>