Блог


DIALOG (тег в HTML)

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

Отображает диалоговое окно или другой интерактивный компонент.

Атрибуты:

  1. open - указывает, что диалог виден и активен.

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

<dialog open>
  <h2>Пример модального диалога</h2>
  <p>Это модальное диалоговое окно.</p>
  <button>Закрыть</button>
</dialog>

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


Простое диалоговое окно:

<button id="show-dialog-btn">Показать диалог</button>

<dialog id="my-dialog">
  <p>Это простое диалоговое окно.</p>
  <button id="close-dialog-btn">Закрыть</button>
</dialog>

<script>
  const showDialogBtn = document.querySelector('#show-dialog-btn');
  const myDialog = document.querySelector('#my-dialog');
  const closeDialogBtn = document.querySelector('#close-dialog-btn');

  showDialogBtn.addEventListener('click', () => {
    myDialog.showModal();
  });

  closeDialogBtn.addEventListener('click', () => {
    myDialog.close();
  });
</script>

Диалоговое окно с формой:

<button id="show-dialog-btn">Показать диалог</button>

<dialog id="my-dialog">
  <form>
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" required>
    <button type="submit">Отправить</button>
  </form>
  <button id="close-dialog-btn">Закрыть</button>
</dialog>

<script>
  const showDialogBtn = document.querySelector('#show-dialog-btn');
  const myDialog = document.querySelector('#my-dialog');
  const closeDialogBtn = document.querySelector('#close-dialog-btn');

  showDialogBtn.addEventListener('click', () => {
    myDialog.showModal();
  });

  closeDialogBtn.addEventListener('click', () => {
    myDialog.close();
  });
</script>

XMP (тег в HTML)

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

Отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока тег <xmp> не закрыт, все теги внутри него отображаются как обычный текст.

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

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

WBR (тег в HTML)

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

Указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

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

Текст<wbr>текст

VAR (тег в HTML)

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

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

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

<p>Формула вычисления площади круга имеет вид: A = π<var>r</var><sup>2</sup></p>

VIDEO (тег в HTML)

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

Используется для вставки видео на веб-страницу. Он позволяет пользователю воспроизводить, ставить на паузу и управлять воспроизведением видео.

Атрибуты:

  1. src - путь к видеофайлу.
  2. controls - отображает элементы управления видеопроигрывателем.
  3. width - ширина видео.
  4. height - высота видео.
  5. poster - устанавливает изображение-обложку для видео.
  6. autoplay - включает автовоспроизведение видео.
  7. loop - зацикливает воспроизведение видео.
  8. muted - выключает звук в видео.

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

<video src="video.mp4" width="640" height="360" controls>.
  Ваш браузер не поддерживает тег <code>video</code>.
</video>

UL (тег в HTML)

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

Устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства.

Атрибуты:

  1. type - Устанавливает вид маркера списка.

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

<ul>
  <li>элемент маркированного списка</li>
</ul>

U (тег в HTML)

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

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

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

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

TT (тег в HTML)

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

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

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

<p>Для запуска программы используйте команду <tt>python app.py</tt>.</p>

TRACK (тег в HTML)

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

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

Атрибуты:

  1. kind - тип текстовой дорожки.
  2. src - URL-адрес файла с текстовой дорожкой.
  3. srclang - язык текстовой дорожки.
  4. label - подпись текстовой дорожки.
  5. default - является ли текстовая дорожка дорожкой по умолчанию.

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

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <track src="subtitles_ru.vtt" kind="subtitles" srclang="ru" label="Русские субтитры">

TR (тег в HTML)

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

Создаёт в таблице строку. Он содержит ячейки <td> или заголовки <th>.
Чтобы таблица отображалась корректно, все ячейки должны быть заполнены. Также ячейки можно объединять с помощью атрибута colspan.
Если необходимо создать таблицу без использования тега <tr>, можете воспользоваться другими тегами для создания разметки, например,<div>, <ul> или <dl>. Однако это может затруднить стилизацию таблицы с помощью CSS.

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

<table>
  <tr>
   <td>...</td>
  </tr>
</table>

TITLE (тег в HTML)

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

Задаёт заголовок страницы, который видно на вкладке браузера.
Этот тег — один из важнейших элементов SEO-оптимизации, потому что поисковые системы показывают его содержимое как заголовок страницы в результатах поиска.

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

<!DOCTYPE html>
<html lang='ru'>
<head>
  <meta charset='UTF-8'>
  <title>https://novocodo.ru/</title>

 </head>
</html>


TIME (тег в HTML)

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

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

Атрибуты:

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

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

<time>дата и время</time>
<time datetime="<дата и время>">текст</time>

THEAD (тег в HTML)

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

Создаёт шапку таблицы в HTML-документе. Он помогает структурировать контент на странице. Этот элемент может содержать только теги <tr> с заголовками таблицы <th>.

Атрибуты:

  1. align - Определяет выравнивание текста в строке.
  2. char - Выравнивание содержимого ячеек относительно заданного символа.
  3. charoff - Смещение содержимого ячеек относительно указанного символа.
  4. bgcolor - Цвет фона ячеек, которые расположены внутри контейнера <thead>.
  5. valign - Выравнивание содержимого ячеек по вертикали.

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

<table>
 <thead>
  <tr>
   <td> ... </td>
  </tr>
 </thead>
 <tfoot> ... </tfoot>
 <tbody> ... </tbody>
</table>

TH (тег в HTML)

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

Создаёт в таблице ячейки с заголовками. Обычно он располагается в первой строке таблицы, но может использоваться и в других строках, если это необходимо. Тег может содержать текст, изображения, ссылки и другие элементы HTML. Например, вот таблица с тремя столбцами, содержащими имена, фамилии и возраст людей.

Атрибуты:

  1. colspan - количество объединяемых ячеек по горизонтали.
  2. rowspan - количество объединяемых ячеек по вертикали.
  3. headers - определяет связанные ячейки. Значение атрибута должно соответствовать значению атрибута id элемента <th> связанной ячейки.
  4. scope - область ячейки для тегов <th>.
  5. abbr - аббревиатура или сокращение для содержимого ячейки.

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

<table>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Иванов</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Пётр</td>
    <td>Петров</td>
    <td>25</td>
  </tr>
</table>

TFOOT (тег в HTML)

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

Создаёт нижнюю часть таблицы — с результатами или другой информацией. Он используется вместе с тегами <table> и <tbody> для структурирования содержимого HTML-таблицы.

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

<table width="600">
   <tfoot align="center" style="background: #ffc">
    <tr>
     <td>Ячейка 1, расположенная в TFOOT</td>
     <td>Ячейка 2, расположенная в TFOOT</td>
    </tr>
   </tfoot>
   <tbody align="right" style="background: silver">
    <tr>
     <td>Ячейка 3, расположенная в TBODY</td>
     <td>Ячейка 4, расположенная в TBODY</td>
    </tr>
   </tbody>
  </table>

TEXTAREA (тег в HTML)

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

Создаёт многострочное поле для ввода текста. Его можно использовать в формах обратной связи для ввода комментариев.

Атрибуты:

  1. name - уникальное имя элемента.
  2. cols - ширина поля в символах.
  3. rows - высота поля в строках.
  4. disabled - блокирует доступ и изменение элемента пользователем.
  5. readonly - запретить ввод новых данных, но разрешить отправку на сервер.
  6. required - поле обязательно для заполнения.
  7. wrap - как обрабатывать переносы строк.
  8. autocomplete - включает или выключает автозаполнение.
  9. maxlength - максимальная длина текста.
  10. minlength - минимальная длина текста.
  11. placeholder - текст-подсказка для пользователей.

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

<textarea id='feedback' name='feedback' rows='4' cols='50'>
Замечательный сайт,
обязательно приду к вам ещё.
</textarea>

TD (тег в HTML)

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

Используется для создания ячеек таблицы, он всегда вкладывается в элемент <tr>.

Атрибуты:

  1. colspan - количество объединяемых ячеек по горизонтали.
  2. rowspan - количество объединяемых ячеек по вертикали.
  3. headers - список id элементов, которые связаны с ячейкой.

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

<table>
  <tr>
    <td>Имя</td>
    <td>Фамилия</td>
    <td>Возраст</td>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Иванов</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Пётр</td>
    <td>Петров</td>
    <td>30</td>
  </tr>
</table>

TBODY (тег в HTML)

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

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

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

<table>
 <thead> .... </thead>
 <tfoot> ... </tfoot>
 <tbody>
  <tr>
   <td> ... </td>
  </tr>
 </tbody>
</table>

TABLE (тег в HTML)

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

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

Основные теги, используемые при создании таблицы:

  1. <table> - определяет начало и конец таблицы. Всё содержимое таблицы должно находиться между <table></table>.
  2. <thead> - определяет заголовок таблицы. Заголовок может содержать одну или несколько строк, в которых могут использоваться теги <th> для определения заголовков столбцов.
  3. <tbody> - определяет тело таблицы. Тело содержит одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
  4. <tfoot> - определяет нижний колонтитул таблицы. Колонтитул может содержать одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
  5. <tr> - определяет строку таблицы. Каждая строка должна находиться между тегами <tbody>, <thead> или <tfoot>.
  6. <th> - определяет заголовок столбца или строки таблицы. Используется внутри тегов <thead> и <tr>.
  7. <td> - определяет содержимое ячейки таблицы. Используется внутри тегов <tbody>, <tfoot> и <tr>.
  8. <caption> - определяет заголовок таблицы, который будет размещен над таблицей. Используется внутри тега <table>.

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

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ячейка 1,1</td>
      <td>Ячейка 1,2</td>
    </tr>
    <tr>
      <td>Ячейка 2,1</td>
      <td>Ячейка 2,2</td>
    </tr>
  </tbody>
</table>

SUP (тег в HTML)

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

Тег <sup> (сокращение от «superscript») отображает текст в виде верхнего индекса, а тег <sub> (сокращение от «subscript») в виде нижнего индекса.
Эти теги чаще используются для выделения отдельных символов, а не слов. Их используют для указания единиц измерения или написания простых формул.

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

20м<sup>2</sup>
H<sub>2</sub>O
X<sup>3</sup>+X<sup>2</sup>=1


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