Введение
В HTML мы используем тег <blockquote> для отображения цитирования на веб-странице с именем автора или источником. Тег используется как элемент уровня блока и отображается как отдельный абзац. В этом практическом занятии вы узнаете, как создать блокцитирование с использованием HTML-тега <blockquote>.
Примечание: Вы можете практиковать программирование в
index.htmlи изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Добавьте 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 вы можете легко отображать цитаты на своей веб-странице!
