Что такое blockquote в html
Перейти к содержимому

Что такое blockquote в html

  • автор:

HTML тег

Тег используется для выделения длинных цитат внутри документа. Браузеры выделяют содержимое тега, отображая его с отступами с левой и правой стороны, а также с отбивкой сверху и снизу.

Тег является блочным элементом и может включать в себя теги для форматирования текста.

Синтаксис

Содержимое тега пишется между открывающим (

) и закрывающим (

) тегами.

Примечание: Для коротких цитат в документе используется тег .

Пример

html> html> head> title>Заголовок документа title> head> body> Цитата из Чеширского Кота, популярной детской книги «Алиса в стране чудес», написанная Льюисом Кэрроллом. blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland"> Я не сумасшедший, моя реальность просто отличается от вашей. blockquote> body> html>

Результат

«Алиса в стране чудес»

Атрибуты

Атрибут Значение Описание
cite URL Используется для указания источника цитат. В качестве значения может быть указан как относительный, так и абсолютный URL-адрес.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега :

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Тег blockquote, отдельная цитата

Мы дополнили запись и процитировали целое стихотворение. И это не какая-то короткая цитата внутри абзаца, поэтому тег не поможет.

Для выделения длинных цитат, которые могут состоять из нескольких абзацев, предназначен тег . Он выделяет цитату не как фрагмент текста в предложении, а как отдельный блок текста с отступами.

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

 

Ум ценится дорого, когда дешевеет сила.

Джейсон Стэтхэм

В браузере тегу обычно добавляются горизонтальные отступы.

Мы добавили немного стилей (отступы, рамку и цвет текста), чтобы содержимое смотрелось красивее. Вы можете изучить стили во вкладке style.css .

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

Сайт начинающего верстальщика

Блог

Всё ещё день седьмой. Кекс выдал мне задание

Сегодня пришёл Кекс и дал мне немного необычное задание. По соседству с ним поселилась одна кошечка, а Кекс совсем не умеет сочинять песни. Поэтому он попросил меня найти какое-нибудь великое произведение, чтобы он смог исполнить его ей.

Как говорится, для хорошего кота и в феврале март (народная мудрость).

Нашёл лирическое произведение для Кекса:

Мяу мяу мяу мррр мяу мяяяу мяу мяу мяу Собрание произведений М. Котидзе.

Подвал сайта

Что такое blockquote в html

Тег (от англ. block quotation — блок цитата) указывает на то, что заключенный в нем текст является развернутой цитатой. URI на источник цитаты можно указать в атрибуте cite , тогда как текстовое представление источника может быть задано элементом .

Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселей), а также с отбивкой сверху и снизу.

Демо¶

Текстовые блоки

Синтаксис¶

blockquote>Цитатаblockquote> 

Закрывающий тег обязателен.

Атрибуты¶

Адрес, который указывает на источник цитаты.

Для этого элемента также доступны универсальные атрибуты.

cite¶

Задаёт адрес страницы, который указывает на источник цитаты внутри . Значение атрибута на странице не отображается и предназначено для поисковых систем.

Синтаксис

blockquote cite="источник цитаты">Цитатаblockquote> 

Значения

Значение по умолчанию

Спецификации¶

  • WHATWG HTML Living Standard
  • HTML5
  • HTML 4.01 Specification

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
 html> head> meta charset="utf-8" /> title>citetitle> head> body> p>Цитата из «Двенадцати стульев»:p> blockquote cite="https://ru.wikiquote.org/wiki/Двенадцать_стульев" > Неделю тому назад состоялся вечер «Общества спасания на водах», о чём свидетельствовал также лозунг на стене: Дело помощи утопающим — дело рук самих утопающих. blockquote> body> html> 

Что такое blockquote в html

Элемент (от англ. block quote — блок с цитатой) предназначен для выделения длинных цитат внутри документа. Текст внутри отображается как выровненный блок с отступами слева и справа (по 40 пикселей), а также с отбивкой сверху и снизу.

Синтаксис

Цитата

Атрибуты

cite Адрес, который указывает на источник цитаты.

Для этого элемента также доступны универсальные атрибуты и события.

Пример

blockquote

Возможно, Ленин использовал фразу А. П. Чехова из произведения «Моя жизнь (рассказ провинциала)» гл. VI, первая публикация которого была в приложении к «Ниве» в 1896 г.

Учиться нам нужно, учиться и учиться, а с глубокими общественными течениями погодим: мы ещё не доросли до них и, по совести, ничего в них не понимаем.

Результат данного примера показан на рис. 1.

Применение blockquote

Рис. 1. Применение

Спецификация

Спецификация Статус
HTML Living Standard Живой стандарт
HTML 4.01 Specification Заменённая рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

3 12 1 15 4 1
4.4 4 14 3.2

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • Псевдоэлементы ::after и ::before
  • Работа с типографикой
  • Синтаксис CSS
  • Текст в HTML

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *