Articles
Введение в HTML
Теги, связанные с отображением кода, цитатами и списками

Теги, связанные с отображением кода, цитатами и списками

Эта статья объясняет теги, связанные с отображением кода, цитатами и списками.

Здесь объясняется, как писать исходный код, цитаты, аннотации и списки в HTML.

YouTube Video

Теги, связанные с отображением кода

Тег <code>

Inline code example: let x = 10; 
1Inline code example: <code>let x = 10;</code>
  • Тег <code> является встроенным элементом, используемым для указания кода или фрагментов программ в HTML-документе.
  • По умолчанию он отображается шрифтом с фиксированной шириной, улучшая читаемость кода.

Тег <pre> 

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>
  • Тег <pre> используется для отображения текста в его исходном формате в HTML-документе. Использование этого тега сохраняет пробелы и разрывы строк в тексте, поддерживая его оригинальный формат. Он в основном используется для отображения контента, который должен сохранять форматирование, например, программный код, поэзию или текстовые рисунки.
    function hello() {
        console.log("Hello, world!");
    }
    
1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>
  • В теге <pre> пробелы сохраняются, поэтому если перед закрывающим тегом есть пробел, в конце появится пустая строка, как в этом примере.

Тег <samp>

Sample system output: Error: Invalid input. 
1Sample system output: <samp>Error: Invalid input.</samp>
  • Тег <samp> — это HTML-тег, используемый для представления вывода компьютерной программы. Он используется для обозначения выходных данных или сообщений от программы или системы.

Тег <kbd>

Keyboard input example: Ctrl + C 
1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>
  • Тег <kbd> — это HTML-тег, используемый для представления пользовательского ввода. Он используется для обозначения ввода с клавиатуры или командного ввода, например, сочетаний клавиш.

Тег <var>

Variable example: x = 5; 
1Variable example: <var>x</var> = 5;
  • Тег <var> используется для представления переменных в программе или уравнении. Он используется для выделения имен переменных или переменных в математических формулах.

Теги, используемые для цитирования и т.д.

Тег <blockquote>

This is a blockquote for longer quotations. 
1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>
  • Тег <blockquote> используется для представления длинных цитат или текстов из других источников и обычно отображается как блочный элемент.

Тег <q>

This is a short quote: Short quote example. 
1This is a short quote: <q>Short quote example.</q>
  • Тег <q> — это встроенный элемент, используемый для представления коротких цитат. Этот тег может быть использован для обозначения части текста или предложения как цитаты. Текст, заключенный в тег <q>, обычно отображается в кавычках. Тег <q> также может быть вложенным. В этом случае для вложенных цитат обычно используются разные типы кавычек.

Тег <cite>

Reference to a book: The Great Gatsby 
1Reference to a book: <cite>The Great Gatsby</cite>
  • Тег <cite> является встроенным элементом, используемым для указания источника цитаты или ссылки. Он главным образом используется для указания источника произведения, таких как названия произведений, статьи, документы, веб-страницы или книги.

Тег <address>

123 Main Street, Springfield, USA
1<address>123 Main Street, Springfield, USA</address>
  • Тег <address> используется для представления контактной информации, связанной с автором или владельцем документа или раздела. Этот тег обычно содержит адреса электронной почты, номера телефонов, физические адреса и подобную информацию.

Тег <time> 

1<time datetime="2024-12-04">December 4, 2024</time>
  • Тег <time> используется для представления конкретного момента времени, длительности или повторяющегося времени. Этот тег может включать даты и время, чтобы добавить семантический смысл документу.

Тег <data>

Current Year 
1<data value="2024">Current Year</data>
  • Тег <data> используется для связывания удобного для человека содержимого с машиночитаемыми значениями. Этот тег полезен для разметки данных таким образом, чтобы их можно было легко обрабатывать программами.

Теги <details> и <summary>

More information

Here is some additional content.

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>
  • Тег <details> создает сворачиваемый и разворачиваемый виджет. Используя его вместе с тегом <summary>, вы можете создать кликабельный раздел, чтобы раскрыть больше деталей, часто используемый для интерактивных элементов, таких как 'Читать далее'.

Теги, используемые для отображения списков

Тег <ul>

  • Item 1
  • Item 2
  • Item 3
1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>
  • Это тег, используемый для создания неупорядоченных списков. Каждый элемент списка определяется с помощью тега <li>. По умолчанию перед каждым элементом списка отображается черная точка.

Тег <ol>

  1. Step 1
  2. Step 2
  3. Step 3
1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>
  • Этот тег используется для создания упорядоченного списка. Каждый элемент списка определяется с помощью тега <li>. По умолчанию для обозначения порядка элементов отображаются номера.

Тег <dl>

Term 1
Definition of Term 1
Term 2
Definition of Term 2
1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>
  • Этот тег используется для создания списка пар, состоящих из терминов и определений или имен и деталей. Элементы списка определяются с помощью тегов <dt> и <dd>. Термин или название пишется в теге <dt>, а определение или объяснение — в теге <dd>.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Теги, связанные с текстомТеги, связанные с таблицами