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

Введение

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/quotes("Quotations") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70714{{"HTML-блок с цитированным текстом"}} html/text_head -.-> lab-70714{{"HTML-блок с цитированным текстом"}} html/quotes -.-> lab-70714{{"HTML-блок с цитированным текстом"}} html/doc_flow -.-> lab-70714{{"HTML-блок с цитированным текстом"}} html/inter_elems -.-> lab-70714{{"HTML-блок с цитированным текстом"}} end

Добавьте 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 вы можете легко отображать цитаты на своей веб-странице!