HTML-форматирование цитирования с использованием тега `<cite>`

Введение

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

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

Skills Graph

Включите элемент <cite>

Для использования элемента <cite> его необходимо включить в ваш HTML-документ. Синтаксис для этого приведен ниже:

<cite>... </cite>

Добавьте содержимое внутри элемента <cite>

Для отображения цитирования содержимое, которое необходимо цитировать, встраивается внутри тега <cite>.

<cite>The text to be cited</cite>

Используйте элементы <blockquote> и <cite> вместе

Для цитирования автора цитаты мы используем тег <blockquote> вместе с тегом <cite>.

<blockquote>
  "The text to be quoted."
  <cite>Author Name</cite>
</blockquote>

Примечание: Цитируемый текст заключается в кавычки, а имя автора заключается в тег <cite>.

Примените CSS к тегу <cite>

По умолчанию текст внутри тега <cite> наклонен. Мы также можем применить дополнительные стили CSS к тегу <cite>, чтобы изменить внешний вид цитирования. Вот пример:

<style>
  cite {
    color: blue;
    font-size: 1.2em;
  }
</style>

<blockquote>
  "The text to be quoted."
  <cite>Author Name</cite>
</blockquote>

Резюме

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