Ако някога сте прегледали списък с HTML елементи, може би сте се озовали в "Какво е блок-дума?" Елементът blockquote е двойка HTML маркери, която се използва за дефиниране на дълги котировки. Ето определението за този елемент съгласно спецификацията на W3C HTML5:
Елементът blockquote представлява секция, която се цитира от друг източник.
Как да използвате Blockquote на вашите уеб страници
Когато пишете текст в уеб страница и създавате оформлението на тази страница, понякога искате да извикате блок от текстове като котировка.
Това може да е котировка от някъде другаде, като клиентска препоръка, която придружава казус или история на успеха на проекта. Това може да бъде и дизайн, който повтаря някои важни текстове от самата статия или съдържанието. При публикуването, това понякога се нарича " pull-quote" . В уеб дизайна един от начините да се постигне това (и начина, по който покриваме тази статия) се нарича blockquote.
Нека да разгледаме как бихте използвали маркера за блокиране, за да определите дълги котировки, като този откъс от "The Jabberwocky" на Луис Карол:
- Двамата са блестящи и скъпи
Държеше се и се запъваше в улицата:
Всички мими са боровете,
И момчетата надвишават.
(от Луис Карол)
Пример за използване на маркера за блокиране
Буквеният блок е семантичен маркер, който показва на браузъра или потребителския агент, че съдържанието е дълго цитат. Като такъв не бива да прикрепяте текст, който не е цитат в блок-маркера.Не забравяйте, че "цитат" често са действителни думи, които някой е казал или текст от външен източник (като текста на Луис Карол в тази статия), но това също може да бъде концепцията, която покрихме по-рано.
Когато мислите за това, този pullquote е цитат от текста, то просто се случва да бъде от същата статия, в която самата цитат се появява.
Повечето уеб браузъри добавят няколко вдлъбнатини (около 5 интервала) от двете страни на блок-квота, за да се разграничат от околния текст. Някои изключително стари браузъри дори могат да превърнат цитирания текст в курсив.
Не забравяйте, че това е просто стандартното оформяне на елемента блок-дума. С помощта на CSS имате пълен контрол върху това, как ще се показва блокировката ви. Можете да увеличите или дори да премахнете тирето, да добавите цветове на фона или да увеличите размера на текста, за да извикате цитата. Можете да отпечатате този цитат в едната страна на страницата и да завъртите другия текст около него, което обикновено е визуален стил, използван за отпечатване в печатни списания. Имате контрол над външния вид на блокада с CSS, нещо, което ще обсъдим малко по-скоро. Засега нека да продължим да разглеждаме как да добавите самата котировка към HTML кода си.
За да добавите маркера за блокиране към текста си, просто заобикаляйте текста, който е цитат, със следната двойка маркери -
Например:
- Двамата са блестящи и скъпи
Държеше се и се запъваше в улицата:
Всички мими са боровете,
И момчетата надвишават.
Както можете да видите, просто добавете двойката маркери за блокиране на блога около съдържанието на самата котировка. В този пример използвахме и някои маркери за прекъсване (
), за да добавите единични прекъсвания, където е подходящо, в текста. Това е така, защото пресъздаваме текст от стихотворение, където тези специфични прекъсвания са важни. Ако си създавате оферта за клиентски показания и линиите не е необходимо да се счупват в конкретни части, не бихте искали да добавите тези маркери за прекъсване и да разрешите на самия браузър да се завива и да се прекъсне според нуждите на базата на размера на екрана.
Не използвайте Blockquote за отстъпване на текст
В продължение на много години хората използват маркера за блокиране, ако искат да отрежат текста в уеб страницата си, дори ако този текст не е приказка. Това е лоша практика! Не искате да използвате семантиката на блокада само по визуални причини. Ако трябва да вмъкнете текста си, трябва да използвате стилови листа, а не маркерите за блокада (освен ако, разбира се, това, което се опитвате да отмените, е цитат!). Опитайте да поставите този код във вашата уеб страница, ако се опитвате просто да добавите indent:
Това ще бъде текст, който е отместен.
След това ще насочите този клас с CSS стил
.indented {
подложка: 0 10px;
}
Това добавя 10 пиксела на подложката към всяка от страните.
Оригинална статия на Дженифър Кринин. Редактиран от Jeremy Girard на 5/8/17.