Мастерство в использовании HTML-переводов строк

Введение

В этом лабораторном занятии вы научитесь использовать HTML-тег <br> для создания переносов строк на веб-странице.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Создайте HTML-файл

Создайте новый файл с именем index.html и добавьте базовую структуру HTML.

<!doctype html>
<html>
  <head>
    <title>Line Breaks with HTML</title>
  </head>
  <body></body>
</html>

Добавьте текст на веб-страницу

Добавьте некоторый текст в тело вашего HTML-документа.

<body>
  <h1>Добро пожаловать на мою веб-страницу!</h1>
  <p>
    Это некоторый текст на моей веб-странице. Я хочу создать здесь перенос
    строки:
  </p>
  <p>Но как мне это сделать?</p>
</body>

Используйте тег
для переносов строк

Чтобы добавить перенос строки между двумя параграфами текста, добавьте тег <br> после первого тега параграфа.

<body>
  <h1>Добро пожаловать на мою веб-страницу!</h1>
  <p>
    Это некоторый текст на моей веб-странице. Я хочу создать здесь перенос
    строки:
  </p>
  <br />
  <p>Но как мне это сделать?</p>
</body>

Настройте интервал между переносами строк с помощью CSS-отступа (margin)

Чтобы настроить количество пространства, которое создает перенос строки, вы можете использовать CSS margin. Добавьте следующий CSS-код в ваш HTML-файл, чтобы создать 30px пространства выше и ниже каждого переноса строки.

<head>
  <title>Line Breaks with HTML</title>
  <style>
    br {
      margin-top: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

Сохраните файл index.html и откройте его в веб-браузере, чтобы увидеть созданный вами перенос строки.

Резюме

HTML-тег <br> - простой способ создать переносы строк на вашей веб-странице. Используйте его, чтобы добавить пространство между параграфами текста или в любом другом месте, где вам нужно сделать перенос строки. Настройка количества пространства, создаваемого переносом строки, легко с помощью CSS margin.

HTML Перевод строки