Шпаргалка по HTML для начинающих!
VolSu
16 Июля 2021
Структура HTML достаточно проста, необходимо лишь минимальные знания, чтобы создавать свои HTML страницы.
Структура HTML
Это базовый шаблон или базовая структура HTML.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример веб-страницы</title>
</head>
<body>
<h1>Заголовок</h1>
<!-- Комментарий -->
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</body>
</html>Заголовки
В HTML доступно шесть заголовков, H1 — самый крупный из всех, а H6 — самый маленький.
h1 Тег
<h1>Heading 1</h1>h2 Тег
<h2>Heading 2</h2>h3 Тег
<h3>Heading 3</h3>h4 Тег
<h4>Heading 4</h4>h5 Тег
<h5>Heading 5</h5>h6 Тег
<h6>Heading 6</h6>Контейнер
Теги-контейнеры — это теги, которые содержат некоторые данные, такие как текст, изображение и т.д. В HTML есть несколько тегов-контейнеров.
div тег
Тег div или тег деления используется для создания блоков или разделов в документе.
<div> Это блок div </div>span тег
span — это контейнер для встроенного контента
<span> Это блок span </span>p тег
<p> This is a paragraph </p>pre тег
тег pre представляет предварительно отформатированный текст
<pre> Hello World </pre><##bc_30##>##bc_30## тег
тег кода используется для представления исходных кодов
<code>
import python
</code>Форматирование текста
Теги форматирования текста используются для форматирования текста или данных HTML-документов. Вы можете делать определенные вещи, например, выделять курсивом, полужирным, четким текстом, чтобы ваш документ выглядел более привлекательным и понятным.
b тег
<b>I'm bold text</b>strong тег
<strong>I'm important text</strong>i тег
<i>I'm italic text</i>em тег
<em>Emphasized text</em>sub тег
<sub>Subscript</sub>sup тег
<sup>Superscript</sup>Списки
Списки могут быть числовыми, буквенными, маркированными или другими символами. Вы можете указать тип списка и элементы списка в HTML для чистого документа.
ol тег
Упорядоченный список начинается с <ol>тега, а каждый элемент списка начинается с <li>тега
<ol>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ol>ul тег
<ul>
<li>Your Data</li>
<li>Your Data</li>
</ul>Медиа — это все, что присутствует в цифровой форме, например изображение, видео, аудио и т. Д.
audio тег
Он используется для встраивания звукового содержимого в документ.
<audio controls="">
<source src="demo.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудиоэлемент.
</audio>img тег
Он используется для встраивания или импорта изображения на веб-страницу.
<img src="Source_of_image" alt="Alternate text">video тег
Он используется для встраивания видео на веб-страницу.
<video width="480" height="320" controls="">
<source src="demo_move.mp4" type="video/mp4">
Ваш браузер не поддерживает тег видео.
</video>Таблица
Таблица — это набор строк и столбцов. Он используется для представления данных в табличной форме.
Структура таблицы
<table>
<caption>Демонстрация таблицы</caption>
<thead>
<tr>
<th>Column1</th>
<th colspan="2">Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data2</td>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td>Data</td>
<td>Data</td>
</tr>
</tfoot>
</table>Ссылки
Ссылки представляют собой интерактивный текст, который может перенаправить вас на другую страницу.
a тег
<a> или тег привязки определяет гиперссылку.
</a><a href="https://loriup.ru/">Посетите сайт!</a>Это все на сегодня!
Проверка форматирования многих кусков.
Чего это проверять, работает. ) Другой вопрос, вы видели наверное разметку в редакторе, этого же текста, он куда более занятный. Будет время, обязательно необходимо сделать это дело и во внешнем интерфейсе.
Тем более при добавление поста выходит мы видим одно, а получается в итоге другое форматирование, это не дело, т.к. нарушает некоторые принципы.
Я опубликовал, чтобы это и проверить. Текст в предпросмотре значительно краше.