Справочник HTML на I

Тег <i>

Тег <i> выделяет фрагмент текста, чтобы показать его отличие от обычного текста. Это может быть официальное название, идиома, иностранный термин или ремарка.

Браузеры выделяют содержимое <i> курсивом, как и у тега <em>, но который, в отличие от <i>, придаёт фразе или слову особый смысл.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p>Денег у бабушки Дуни осталось <i>кот наплакал</i>.</p>

Результат

Тег <iframe>

Тег <iframe> — это контейнер или окно, его называют фреймом, в которое можно загрузить другой независимый документ, часто это карта, видео или пост из соцсети.

Положение фрейма и его внешний вид на странице задают с помощью CSS.

Атрибуты

Для элемента доступны глобальные атрибуты.

Синтаксис

<iframe allowfullscreen title="Сурикаты" src="https://ru.wikipedia.org/wiki/Сурикат"></iframe>

Тег <img>

Тег <img> используют для вставки изображений на страницу. Это одиночный тег, у него нет закрывающей пары.

Чтобы сделать картинку ссылкой, оберните <img> в <a>.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример 1

В примере указаны несколько изображений под различные экраны:

<img src="pic-large.webp"
    srcset="
      pic-small.webp 320w,
      pic-medium.webp 480w,
      pic-large.webp 768w"
    sizes="
      (min-width: 320px) 320px,
      (min-width: 480px) 480px,
      (min-width: 768px) 768px"
    alt="..">

Пример 2

В примере изображение служит ссылкой:

<a href="spravochnik-html.html" target="_blank" title="Справочник HTML. Оглавление">
    <img src="images/spravochnik-html.png" alt="Справочник HTML" width="200" height="120">
</a>

Результат

Тег <input>

Тег <input> позволяет создавать поля ввода формы: кнопки, переключатели, поля для ввода текста, логина и пароля, почты и др. За тип элемента отвечает атрибут type.

Чтобы данные пользователя отправились на сервер, нужно поместить этот элемент в <form>, или связать <input> с формой через атрибут id.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<form action="" method="get">
  <label>
    Текстовое поле:<br>
    <input type="text" size="40">
  </label>
  <fieldset>
    Переключатели:
    <label><input type="radio" name="example">Вариант 1</label>
    <label><input type="radio" name="example">Вариант 2</label>
    <label><input type="radio" name="example">Вариант 3</label>
  </fieldset>
  <label>
    Многострочное текстовое поле:
    <textarea name="comment" cols="40" rows="2"></textarea>
  </label>
  <button type="reset">Очистить</button>
  <button type="submit">Отправить</button>
</form>

Результат

Тег <ins>

Тег <ins> помечают текст, который был добавлен в новой версии документа. Это позволяет отслеживать изменения в документе. Браузеры помечают текст в теге <ins> как подчёркнутый.

<ins> противоположен по значению тегу <del>, которым помечают удалённый текст.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<ul>
    <li><del>Покрасить балкон.</del></li>
    <li>Полить кактусы.</li>
    <li><ins>Заказать пиццу.</ins></li>
</ul>

Результат