Kas ir Blockquote?

Ja esat kādreiz apskatījis HTML elementu sarakstu, iespējams, esat atradis sev jautājumu: "Kas ir blokkūts?" Bloku motīvu elements ir HTML taga pāram, ko izmanto, lai definētu garās kotācijas. Šeit ir definēts šis elements saskaņā ar W3C HTML5 specifikāciju:

Blockquote elements ir sadaļa, kas tiek citēta no cita avota.

Kā izmantot savu tīmekļa vietņu blokketojumu

Kad rakstāt tekstu tīmekļa lapā un izveidojot šīs lapas izkārtojumu, dažreiz vēlaties izsaukt teksta bloku kā citātu.

Tas varētu būt cenas citur, piemēram, klientu atsauksme, kas pievienota lietas izpētei vai projekta veiksmes stāstam. Tas varētu būt arī dizaina režīms, kas atkārto kādu svarīgu raksta vai satura tekstu. Publikācijā tas dažreiz tiek saukts par " pull-quote ". Web dizains ir viens no veidiem, kā to panākt (un to, kā mēs to aplūkojam šajā rakstā), sauc par blokkūdu.

Tātad, skatīsimies, kā jūs izmantotu blokkūts tagu, lai noteiktu garus citātus, piemēram, šo fragmentu no Lewis Carroll "The Jabberwocky":

"Twas brillig un slithey toves
Vai gyre un gimble ar wabe:
Visi mimsi bija burgovīši,
Un mome raths outgrabe.

(Lewis Carroll)

Blockquote tag lietošanas piemērs

Blockquote tags ir semantisks tags, kas informē pārlūku vai lietotāja aģentu, ka saturs ir garš citāts. Tādēļ jums nevajadzētu pievienot tekstu, kas nav citāts blokquote tagā. Atcerieties, ka "citāts" bieži ir faktiski vārdi, kurus kāds ir teicis, vai teksts no ārpuses (piemēram, Lewis Carroll teksts šajā rakstā), bet tā var būt arī "pullquote" jēdziens, ko mēs iepriekš aplūkojām.

Kad jūs domājat par to, šis pullquote ir teksta citāts, tas vienkārši notiek no tā paša raksta, kurā citāts pats parādās.

Lielākā daļa tīmekļa pārlūkprogrammu pievieno dažus taustiņus (apmēram 5 atstarpes) abās blokkaites pusēs, lai to izceltu no apkārtējā teksta. Dažas ļoti vecās pārlūkprogrammas var pat izcelt citēto tekstu kursīvā.

Atcerieties, ka tas ir vienkārši noklusējuma stilizācijas elements blokkautājumā. Izmantojot CSS, jums ir pilnīga kontrole par to, kā parādīsies jūsu blokkūts. Jūs varat palielināt vai pat noņemt ievilkumu, pievienot fona krāsas vai palielināt teksta izmēru, lai izsauktu citātu. Jūs varat peldēt šo citātu uz vienas lapas pusi un pārējo tekstu aplaupīt, kas parasti ir vizuāls stils, ko izmanto pulksteņu drukāšanai drukātajos žurnālos. Jums ir kontrole par blokteksta izskatu, izmantojot CSS, par ko mēs diskutēsim mazliet drīz. Tagad turpināsim skatīties, kā tieši pievienot citātu jūsu HTML marķējumam.

Lai tekstu pievienotu bloka koda tagam, vienkārši ieskauj tekstu, kas ir citāts ar šādu taga pāri -

Piemēram:


"Twas brillig un slithey toves

Vai gyre un gimble ar wabe:

Visi mimsi bija burgovīši,

Un mome raths outgrabe.

Kā jūs varat redzēt, jūs vienkārši pievienojiet pietru bloku tagus ap saturu pati citātu. Šajā piemērā mēs arī izmantojām dažus pārtraukuma tagus (
), ja vajadzīgs, ievietot teksta fragmentus vienā rindiņā. Tas ir tādēļ, ka mēs atkopojam tekstu no dzejolis, kur šie īpašie pārtraukumi ir svarīgi. Ja jūs izveidojāt klienta atsauksmju cenu, un līnijām nebija nepieciešams izlauzties īpašās daļās, jūs nevēlaties pievienot šos pārtraukuma tagus un ļautu pārlūkprogrammai sevi pēc nepieciešamības ietīt un pārtraukt, pamatojoties uz ekrāna izmēru.

Neizmantojiet blokkvotni uz atkāpi tekstu

Daudzus gadus cilvēki izmanto bloku tagu tagu, ja viņi vēlas ievietot tekstu savās tīmekļa lapās, pat ja šis teksts nebija vienkāršs. Tā ir slikta prakse! Jūs nevēlaties izmantot Blockquote semantiku tikai vizuālu iemeslu dēļ. Ja jums ir nepieciešams ievilkt savu tekstu, jums vajadzētu izmantot stilu lapas, nevis bloka tagus (ja vien, protams, tas, ko jūs mēģināt ievilkt, ir citāts!). Mēģiniet ievietot šo kodu savā tīmekļa lapā, ja mēģināt vienkārši pievienot ievilkumu:

Tas būs teksts ar ievilkumu.

Pēc tam jūs mērķētu uz šo klasi ar CSS stilu

.indented {
polsterējums: 0 10px;
}

Tas pievieno 10 pikseļu polsterējumu abās abās puses pusēs.

Jennifera Krīnina oriģinālais raksts. Rediģējis Džeremijs Girards no 5/8/17.