Перейти к содержанию
Опубликовано
comment_786

В данной теме я расскажу вам про основные теги в языке HTML

Теги заголовка html-документа

 

 

Любой документ начинается с заголовка, который может быть разного размера. Существует шесть уровней заголовков в HTML: <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. При отображении любого заголовка, браузер добавляет одну строку до и одну строку после этого заголовка.

<!DOCTYPE html>
<html>
  <head>
    <title>Пример заголовков в HTML</title>
  </head>
  <body>
    <h1>Заголовок H1</h1>
    <h2>Заголовок H2</h2>
    <h3>Заголовок H3</h3>
    <h4>Заголовок H4</h4>
    <h5>Заголовок H5</h5>
    <h6>Заголовок H6</h6>
  </body>
</html>

 

 

 

Тег абзаца (параграфа)

 

 

HTML предлагает способ структурирования вашего текста в разные абзацы с помощью тега <p>. Каждый абзац текста должен находиться между открывающим <p> и закрывающим тегом </p>, как показано ниже в примере:

<!DOCTYPE html>
<html>
  <head>
    <title>Пример абзацев в HTML</title>
  </head>
  <body>
    <p>Первый абзац текста</p>
    <p>Второй абзац текста</p>
    <p>Третий абзац текста</p>
  </body>
</html>

 

 

 

Тег разрыва строки

 

 

Всякий раз, когда Вы используете тег <br />, все последующее за ним элементы начинаются со следующей строки. Этот тег является примером пустого элемента, в котором Вам не нужны открывающие и закрывающие теги, так как между ним нет ничего.

<!DOCTYPE html>
<html>
  <head>
    <title>Пример разрыва строки в HTML</title>
  </head>
  <body>
    <p>Привет<br />
    Вы выполнили свое задание вовремя.<br />
    Спасибо</p>
  </body>
</html>

 

 

 

Центрирование содержимого

 

 

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

<!DOCTYPE html>
<html>
  <head>
    <title>Пример центрирования содержимого в HTML</title>
  </head>
  <body>
    <p>Текст не по центру.</p>
    <center>
      <p>Текст по центру.</p>
    </center>
  </body>
</html> 

 

 

 

Тег горизонтальной линии в HTML

 

 

Горизонтальные линии используются для визуального разбиения разделов документа. Тег <hr> создает, из текущей позиции в документе, строку (горизонтальную линию) на правое поле и соответственно разбивает строку.

<!DOCTYPE html>
<html>
  <head>
    <title>Пример горизонтальной линии в HTML</title>
  </head>
  <body>
    <p>Первый абзац и он должен быть вверху.</p>
    <hr />
    <p>Второй абзац и он должен быть внизу.</p>
  </body>
</html>

2a3fdddb5c46782bb691f71ff5e2c878.png

 

 

 

Сохранение форматирования

 

 

Иногда Вы хотите, чтобы ваш текст соответствовал точному формату того, как он написан в html-документе. В этих случаях Вы можете использовать тег <pre>.

Любой текст между открывающим тегом <pre> и закрывающим тегом </pre> сохранит форматирование исходного документа.

<!DOCTYPE html>
<html>
  <head>
    <title>Пример сохранения форматирования в HTML</title>
  </head>
  <body>
    <pre>
      function testFunction( strText ){
        alert (strText)
      }
    </pre>
  </body>
</html>

 

 

 

Неразрывный пробел в HTML

 

 

Предположим, Вы хотите использовать фразу «Пираты Карибского моря: Мертвецы не рассказывают сказки». Здесь Вы не хотите, чтобы браузер разделил «Пираты», «Карибского», «моря:», «Мертвецы», «не», «рассказывают» и «сказки» на две строки:

<!DOCTYPE html>
<html>
  <head>
    <title>Пример неразрывного пробела в HTML</title>
  </head>
  <body>
    <p>Самый популярный кинофильм этой весны: «Пираты Карибского моря: Мертвецы не рассказывают сказки»</p>
  </body>
</html>

8b20fd9a9f74b716949d3ec86a4f7217.png

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

 

 

Лорд всея c#

Рекомендуемые сообщения

Нет сообщений для отображения
Гость
Эта тема закрыта для публикации ответов.