Калі вы калі-небудзь глядзелі на спіс HTML-элементах, вы можаце знайсці сабе пытанне: «што такая цытата?» Элемент BLOCKQUOTE з'яўляецца парай тэгаў HTML, які выкарыстоўваецца для вызначэння доўгіх вынятак. Вось вызначэнне гэтага элемента ў адпаведнасці са спецыфікацыяй W3C HTML5:
Элемент BLOCKQUOTE ўяўляе сабой участак, які працытаваў з іншай крыніцы.
Як выкарыстоўваць BLOCKQUOTE на сваіх вэб-старонак
Калі вы пішаце тэкст на вэб-старонцы і стварэнне макета гэтай старонкі, вы часам хочаце, каб выклікаць блок тэксту ў якасці цытаты.
Гэта можа быць цытатай з іншага месца, як водгук кліента, які суправаджае тэматычнае даследаванне праекта або гісторыю поспеху. Гэта таксама можа быць дызайн лячэнне, якое паўтарае некаторыя важныя тэкст з артыкула або сам змест. У публікацыі, гэта часам называюць высоўная цытатай , у вэб - дызайне, адзін са спосабаў дасягнення гэтага (і спосаб , якім мы якая ахоплівае ў гэтым артыкуле), называецца BLOCKQUOTE.
Такім чынам, давайце паглядзім на тое, як вы будзеце выкарыстоўваць тэг BLOCKQUOTE для вызначэння доўгіх цытат, такіх як гэты урывак з «Бармаглот» Люіса Кэрала:
Варкалось і slithey toves
Пырялись па Наве:
І хрюкотали зелюки,
Як мюмзики ў мове.
(Люіс Кэрролл)
Прыклад выкарыстання тэга BLOCKQUOTE
BLOCKQUOTE Тэг з'яўляецца семантычны тэг, які паказвае браўзэру або агента карыстальніка, што змесціва з'яўляецца доўгая цытата. Такім чынам, вы не павінны заключыць тэкст, які не з'яўляецца каціроўка ўнутры BLOCKQUOTE tag.Remember, «цытата» часта фактычныя словы, якія нехта сказаў або тэкст з вонкавай крыніцы (напрыклад, тэкст Люіса Кэрала ў гэтым артыкуле), але яна таксама можа быць паняцце pullquote , што мы разгледзелі раней.
Калі вы думаеце пра гэта, што pullquote цытата з тэксту, гэта як раз здараецца быць з тых жа артыкулаў, якая з'яўляецца сама цытата.
Большасць вэб-браўзэраў дадаць водступы (каля 5 прабелаў) да абодвум бакам BLOCKQUOTE, каб зрабіць яго з навакольнага тэксту. Некаторыя вельмі старыя браўзэры могуць нават зрабіць вытрымку курсівам.
Памятаеце, што гэта проста стыль па змаўчанні элемента BLOCKQUOTE. З дапамогай CSS, вы маеце поўны кантроль над тым, як ваша цытата будзе адлюстроўвацца. Вы можаце павялічыць або нават выдаліць водступ, дадаць колер фону або павялічыць памер тэксту для далейшага заклікаць цытаты. Вы можаце плаваць гэтую цытату на адным баку старонкі і маюць іншы тэкст абгарнуць вакол яго, які з'яўляецца звычайна візуальны стыль, які выкарыстоўваецца для pullquotes ў друкаваных выданнях. У вас ёсць кантроль над з'яўленнем у BLOCKQUOTE з CSS, то мы абмяркуем ледзь карацей. На дадзены момант, давайце працягнем, гледзячы на тое, як дадаць саму цытату вашай HTML разметкі.
Каб дадаць тэг BLOCKQUOTE да тэксту, проста атачаюць тэкст, цытата з наступнага парай тэгаў -
Напрыклад:
Варкалось і slithey toves
Пырялись па Наве:
І хрюкотали зелюки,
Як мюмзики ў мове.
Як вы можаце бачыць, вы проста дадаць пару BLOCKQUOTE тэгаў вакол зместу самой цытаты. У гэтым прыкладзе мы таксама выкарыстоўвалі некаторыя тэг разрыву (
), Каб дадаць адзінкавыя парывы радкоў, дзе адпаведныя ўнутры тэксту. Гэта адбываецца таму, што мы аднаўленне тэксту з верша, дзе гэтыя канкрэтныя парывы маюць важныя значэнне. Калі ваша тварылі кліент падзячнай цытаты, а лініі не павінны парушаць у пэўных частках, вы не хацелі б, каб дадаць гэтыя тэг перапынку і дазволіць самому браўзэру, каб абгарнуць і зламаць па меры неабходнасці ў залежнасці ад памеру экрана.
Не выкарыстоўвайце BLOCKQUOTE для задання водступаў
На працягу многіх гадоў людзі выкарыстоўвалі BLOCKQUOTE тэг, калі яны хочуць, каб водступы на іх вэб-старонцы, нават калі гэты тэкст ня быў pullquote. Гэта дрэнная практыка! Вы не хочаце выкарыстоўваць семантыку BLOCKQUOTE выключна для візуальных прычын. Калі вам трэба зрабіць водступ, вы павінны выкарыстоўваць табліцы стыляў, а не BLOCKQUOTE тэгаў (калі, вядома, што вы спрабуеце зрабіць водступ не цытата!). Паспрабуйце змясціць гэты код у вэб-старонкі, калі вы спрабуеце проста дадаць водступ:
Гэта будзе тэкст, які водступ.
Далей, вы б прызначацца гэты клас са стылем CSS
.indented {
абіўка: 0 10px;
}
Гэта дадае 10 пікселяў дапаўненні ў абодва бакі ад пункта.
Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard на 5/8/17.