Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Текст в html

Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.

Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.

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

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

Строчные элементы обрамляются тегами <span>...</span>.

Для обрамления элементов блочного типа используется пара <div>...</div>.

Браузеры обрамляют div-блоки разрывами строки.

Блок <div> не может располагаться внутри блока <span>.

Пример
<!DOCTYPE html>
<html>
<head>
    <title>Блоки</title>
    <meta charset="utf-8">
</head>
<body>
    <div>Первый блок текста</div>
    <div>Второй блок текста</div>
</body>
</html>

Основные теги форматирования текста

<p>...</p> Абзац.
<h1>...</h1> Заголовок первого уровня.
<h2>...</h2> Заголовок второго уровня.
...
<h6>...</h6> Заголовок шестого уровня.
<br> Переход на новую строку.
<q>...</q> Браузер автоматически берет текст в кавычки. Изменить вид кавычек можно стилевым свойством quotes.
<hr> Горизонтальная разделительная линия.
<pre>...</pre> Текст фиксированной ширины с сохранением всех пробелов и переносов.
Пример
<!DOCTYPE html>
<html>
<head>
    <title>Заголовки и абзацы</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>Заголовок<br>первого уровня</h1>
    <h2>Заголовок второго уровня</h2>
    <h3>Заголовок третьего уровня</h3>
    <h4>Заголовок четвертого уровня</h4>
    <h5>Заголовок пятого уровня</h5>
    <h6>Заголовок шестого уровня</h6>
    <hr>
    <p>Тест абзаца</p>
</body>
</html>

Создайте текстовый файл, как в примере. Сохраните его с расширением html.

Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.

Для создания и редактирования html-страниц подойдёт даже Блокнот. Но я рекомендую использовать Notepad++ или PhpStorm.

Выделение в тексте

<b>...</b> Полужирный шрифт.
<i>...</i> Курсив.
<ins>...</ins> Подчеркнутый текст.
<del>...</del> Перечеркнутый текст.
<sup>...</sup> Надстрочный текст.
<sub>...</sub> Подстрочный текст.
Пример
<b>Текст может быть полужирным</b>. <i>Текст может быть курсивом.</i><br>
<ins>Текст можно подчеркнуть.</ins> <del>Текст можно зачеркнуть.</del><br>
Текст может быть <sup>надстрочным</sup>. Текст может быть <sub>подстрочным</sub>.

РЕЗУЛЬТАТ:

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

Цитаты, переменные, адреса

<address>...
</address>
Служит для предоставления автором документа контактной информации, чтобы желающие могли связаться с автором материала. Обычно отображается курсивом. Блочный элемент.
<blockquote>...
</blockquote>
Выделение цитат. Блочный элемент.
<cite>...</cite> Выделение цитат. Обычно отображается курсивом.
<code>...</code> Вывод текста шрифтом фиксированной ширины. Применяется, как правило, для вывода небольшого куска программного кода (для больших листингов используется тег <pre>).
<em>...</em> Выделение важных фрагментов текста. Обычно отображается курсивом.
<kbd>...</kbd> Вывод текста шрифтом фиксированной ширины.
<samp>...</samp> Вывод текста шрифтом фиксированной ширины.
<strong>...</strong> Сильное выделение важных фрагментов текста. Обычно отображается полужирным шрифтом.
<var>...</var> Используется для отметки имен переменных. Обычно отображается курсивом.

Читать дальше: HTML списки


.