HTML-тег blockquote: усовершенствование цитирований на веб-странице

Введение

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

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

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

Добавьте HTML-структуру

Создайте HTML-файл с именем index.html и откройте его в текстовом редакторе.

Добавьте HTML-структуру, как показано ниже:

<!doctype html>
<html>
  <head>
    <title>HTML Blockquote Tag</title>
  </head>
  <body>
    <h1>HTML Blockquote Tag</h1>

    <!-- Добавьте блокцитирование -->
  </body>
</html>

Добавьте тег Blockquote

Добавьте тег blockquote в свой HTML-код с использованием следующего синтаксиса:

<blockquote>
  Ваш цитат здесь...
  <cite>- Имя автора</cite>
</blockquote>

Примечание: Тег cite добавляется внутри тега blockquote, чтобы указать имя автора или источник цитирования.

Добавьте стилизацию CSS

Добавьте стилизацию CSS к тегу blockquote с использованием следующего фрагмента кода:

<style>
  blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
    font-style: italic;
    color: #555;
    padding: 5px 20px;
    border-left: 5px solid #ccc;
  }
</style>

Примечание: Этот код назначает некоторые базовые стили для тега blockquote. Свойство border-left добавляет левую границу к тегу blockquote.

Добавьте цитату, которую вы хотите отобразить на веб-странице, заменив Your quote comes here....

Сохраните HTML-файл и откройте его в веб-браузере, чтобы увидеть отображенную на веб-странице блокцитирование.

Резюме

В этом практическом занятии вы узнали о теге <blockquote>, который используется для отображения цитаты в отдельном блоке на веб-странице. Вы также узнали о атрибутах, которые можно использовать с тегом, и о том, как стилизовать его с использованием CSS. С помощью тега blockquote вы можете легко отображать цитаты на своей веб-странице!

HTML-блок с цитированным текстом

Введение

Добавьте HTML-структуру

Добавьте тег Blockquote

Добавьте стилизацию CSS

Резюме