Материалы


DIV (тег в HTML)

Что такое div в html:

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

Атрибуты:

  1. align - Задает выравнивание содержимого тега <div>.
  2. title - Добавляет всплывающую подсказку к содержимому.

Как прописать div в html:

<div class="section">
  <h2>Заголовок секции</h2>
  <p>Какое-нибудь содержимое секции</p>
</div>

DT (тег в HTML)

Что такое dt в html:

Входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. Закрывающий тег </dt> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.

Как прописать dt в html:

<dl>
  <dt>Термин 1</dt>
   <dd>Определение термина 1</dd>
  <dt>Термин 2</dt>
   <dd>Определение термина 2</dd>
</dl>

DL (тег в HTML)

Что такое dl в html:

Входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина.

Как прописать dl в html:

<dl>
  <dt>Термин 1</dt>
   <dd>Определение термина 1</dd>
  <dt>Термин 2</dt>
   <dd>Определение термина 2</dd>
</dl>

DIR (тег в HTML)

Что такое dir в html:

Тег <dir> создает список, содержащий названия директорий (системные папки). Аналогично тегам <ol> и <ul> внутри контейнера <dir> список формируется с помощью тегов <li>.
Тег <dir> вышел из употребления, вместо него рекомендуется использовать тег <ul>.

Как прописать dir в html:

<dir>
  <li>имя директории</li>
  <li>имя директории</li>
</dir>

DFN (тег в HTML)

Что такое dfn в html:

Используется для обозначения термина, который впервые встречается (определяется) в тексте документа. Может использоваться в сочетании с тегом <dt>.

Атрибуты:

  1. title - дополнительная информация об элементе.

Как прописать dfn в html:

<dfn>Термин</dfn>

DETAILS (тег в HTML)

Что такое details в html:

Используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое тега не отображается, для изменения статуса применяется атрибут open.

Атрибуты:

  1. open - Показывает информацию внутри тега.

Как прописать details в html:

<details open="open">Текст</details>

DEL (тег в HTML)

Что такое del в html:

Для описания изменений предназначены теги <del> (сокращение от «delete») и <ins> (сокращение от «insert»).

Тег <del> выделяет текст, который был удалён в новой версии документа. В браузере этот текст перечёркивается.

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

Атрибуты:

  1. cite - Указывает ссылку на документ, где приведена причина редактирования текста и другие подробности.
  2. datetime - Дата и время редактирования текста.

Как прописать del в html:

<ul>
  <li>Почистить посудомоечную машину</li>
  <li><del datetime="2024-10-11T01:25-07:00">Погулять</del></li>
  <li><del datetime="2024-10-10T23:38-07:00">Поспать</del></li>
  <li><ins>Купить принтер</ins></li>
</ul>

DD (тег в HTML)

Что такое dd в html:

Тег <dd> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений.
Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина.
Закрывающий тег </dd> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента.
Тем не менее, хорошим стилем является закрывать все теги.

Как прописать dd в html:

<dl>
  <dt>Термин 1</dt>
   <dd>Определение термина 1</dd>
  <dt>Термин 2</dt>
   <dd>Определение термина 2</dd>
</dl>

DATALIST (тег в HTML)

Что такое datalist в html:

Используется для создания списка опций для элемента ввода. Пользователь может выбрать опцию из списка вместо того, чтобы вводить её вручную.

Как прописать datalist в html:

<input list="<идентификатор>">
<datalist id="<идентификатор>">
 <option value="Текст1">
 <option value="Текст2">
</datalist>

COMMENT (тег в HTML)

Что такое comment в html:

Добавляет комментарий в код документа. Тег <comment> допустимо использовать только в <body>.

Как прописать comment в html:

<comment> текст </comment>

COMMAND (тег в HTML)

Что такое command в html:

Создает команду в виде переключателя, флажка или обычной кнопки. Тег <command> должен располагаться внутри <menu>, в противном случае он не будет показан.

Атрибуты:

  1. checked - Активирует команду. Доступно только если type установлен как radio или checkbox.
  2. disabled - Задает, доступна команда или нет.
  3. icon - Адрес картинки, которая показывается как команда.
  4. label - Название команды.
  5. radiogroup - Задает имя группы переключателей. Доступно только если type установлен как radio.
  6. type - Определяет тип команды (checkbox, command, radio). По умолчанию command.

Как прописать command в html:

<menu>
 <command параметры>
</menu>

COLGROUP (тег в HTML)

Что такое colgroup в html:

Cоздан для группировки одного или нескольких столбцов в таблице, чтобы их можно было стилизовать. Обычно он используется в сочетании с тегами <table> и <col>.

Атрибуты:

  1. align - Устанавливает выравнивание содержимого колонки по краю.
  2. char - Выравнивает содержимое колонки по заданному символу.
  3. charoff - Сдвигает содержимое ячейки относительно заданного символа.
  4. span - Количество колонок, к которым следует применять атрибуты.
  5. valign - Задает вертикальное выравнивание содержимого колонки.
  6. width - Ширина колонок.

Как прописать colgroup в html:

<colgroup>
  <col>
  <col>
  ...
</colgroup>

Примеры использования

Группировка нескольких столбцов вместе:

<table>
  <colgroup>
    <col style="background-color: yellow;">
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Месяц/th>
    <th>Отложили</th>
    <th>Потратили</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>1000 ₽.</td>
    <td>5000 ₽</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>8000 ₽</td>
    <td>7000 ₽</td>
  </tr>
</table>

Применение стиля к нескольким столбцам:

<table>
  <colgroup>
    <col class="highlighted">
    <col>
    <col class="highlighted">
  </colgroup>
  <tr>
    <th>Месяц</th>
    <th>Отложили</th>
    <th>Потратили</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>1000 ₽</td>
    <td>5000 ₽</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>8000 ₽</td>
    <td>7000 ₽</td>
  </tr>
</table>

<style>
  .highlighted {
    background-color: yellow;
  }
</style>

COL (тег в HTML)

Что такое col в html:

Cоздаёт столбец таблицы. Этот тег можно использовать внутри <colgroup>, который группирует столбцы.

Атрибуты:

  1. align - Устанавливает выравнивание содержимого колонки по краю.
  2. char - Выравнивает содержимое колонки по заданному символу.
  3. charoff - Сдвигает содержимое ячейки относительно заданного символа.
  4. span - Количество колонок, к которым следует применять параметры.
  5. valign - Задает вертикальное выравнивание содержимого колонки.
  6. width - Ширина колонок.

Как прописать col в html:

<col span="2">

Примеры использования

Задать классы для столбцов:

<table>
  <colgroup>
    <col class="first-class">
    <col class="first-class">
  </colgroup>
  <tr>
    <td>Столбец 1</td>
    <td>Столбец 2</td>
  </tr>
</table>

Установить span для столбца:

<table>
  <colgroup>
    <col span="2">
  </colgroup>
  <tr>
    <td>Столбец 1 и 2</td>
  </tr>
</table>

CODE (тег в HTML)

Что такое code в html:

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

Как прописать code в html:

<code>Текст</code>

CITE (тег в HTML)

Что такое cite в html:

Используется для указания цитаты или ссылки на источник информации. Обычно элемент содержит название цитируемого произведения и имя автора или издателя.

Как прописать cite в html:

<cite>Война и мир</cite>

CENTER (тег в HTML)

Что такое center в html:

Использовался для выравнивания текста или других HTML-элементов по центру блочного элемента. Тег считается устаревшим и больше не рекомендуется к использованию.

Как прописать center в html:

<center>Текст</center>

CAPTION (тег в HTML)

Что такое caption в html:

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

Атрибуты:

  1. align - Определяет выравнивание заголовка по горизонтали.
  2. valign - Устанавливает расположение заголовка до или после таблицы.

Как прописать caption в html:

<table>
  <caption>Заголовок таблицы</caption>
  <tr>
    <td>Строка 1, колонка 1</td>
    <td>Строка 1, колонка 2</td>
  </tr>
  <tr>
    <td>Строка 2, колонка 1</td>
    <td>Строка 2, колонка 2</td>
  </tr>
</table>

CANVAS (тег в HTML)

Что такое canvas в html:

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

Атрибуты:

  1. width - ширина элемента в пикселях.
  2. height - высота элемента в пикселях.

Как прописать canvas в html:

<canvas id="myCanvas" width="300" height="200"></canvas>
Примеры использования
Рисование линии:
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.moveTo(0, 0);
  ctx.lineTo(300, 200);
  ctx.stroke();
</script>

Рисование прямоугольника:

<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillRect(50, 50, 100, 100);
</script>

Рисование изображения:

canvas id="myCanvas" width="300" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };
  img.src = "image.png";
</script>

Анимация объекта:

<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var x = 0;
  function animate() {
    x++;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, 50, 50, 50);
    requestAnimationFrame(animate);
  }
  animate();
</script>

Создание графика:

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var data = [10, 20, 30, 40, 50];
  var colors = ["red", "orange", "yellow", "green", "blue"];
  var total = data.reduce(function(sum, value) { return sum + value; }, 0);
  var startAngle = 0;
  for (var i = 0; i < data.length; i++) {
    var sliceAngle = 2 * Math.PI * data[i] / total;
    ctx.fillStyle = colors[i];
    ctx.beginPath();
    ctx.moveTo(canvas.width/2, canvas.height/2);
    ctx.arc(canvas.width/2, canvas.height/2, canvas.height/2, startAngle, startAngle+sliceAngle);
    ctx.closePath();
    ctx.fill();
    startAngle += sliceAngle;
  }
</script>

Для чего использовать тег <canvas>

  1. Для игр с анимацией, графикой и интерактивностью.
  2. Для визуализации данных: диаграмм, графиков и схем.
  3. Для интерактивных карт, которые можно увеличивать или уменьшать, а также с интерактивными элементами — всплывающими окнами и маркерами.
  4. Для фильтров изображений. Например, можно менять яркость, контраст и оттенок.
  5. Для создания цифрового искусства.
  6. Для анимации, которая запускается при взаимодействии с пользователем или зависит от времени.
  7. Для образовательных ресурсов: симуляторов, интерактивных викторин и учебников.


BUTTON (тег в HTML)

Что такое button в html:

Для создания кнопок используется тег <button>. Внутри него размещается текст или изображение, которые будут отображаться на кнопке.

Атрибуты:

  1. accesskey - Доступ к элементам формы с помощью горячих клавиш.
  2. autofocus - Устанавливает, что кнопка получает фокус после загрузки страницы.
  3. disabled - Блокирует доступ и изменение элемента.
  4. form - Связывает между собой форму и кнопку.
  5. formaction - Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
  6. formenctype - Способ кодирования данных формы.
  7. formmethod - Указывает метод пересылки данных формы.
  8. formnovalidate - Отменяет проверку формы на корректность.
  9. formtarget - Открывает результат отправки формы в новом окне или фрейме.
  10. name - Определяет уникальное имя кнопки.
  11. type - Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы.
  12. value - Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Как прописать button в html:

<button type="button">Я кнопка</button>

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name, disabled и type:

<button type="button" name="popup-button">Я кнопка</button>

Создать кнопку можно и с помощью тега <input>, если указать ему тип button:

<input tupe="button" value="Я тоже кнопка">

Способ подойдёт для контентных изображений:

<button type="button">
  <img src="icon.svg" alt="Иконка" width="20" height="20">
</button>

BR (тег в HTML)

Что такое br в html:

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

Как прописать br в html:

<p>Здесь есть немного текста.<br>
Здесь есть еще немного текста.</p>


Материалы 1 - 20 из 60
Начало | Пред. | 1 2 3 | След. | Конец