Kas yra "Blockquote"?

Jei kada nors pažvelgėte į HTML elementų sąrašą, galbūt radote klausimą "kas yra blokquote?" "Blockquote" elementas yra HTML žymos pora, kuri naudojama norint nustatyti ilgas citatas. Čia pateikiamas šio elemento apibrėžimas pagal W3C HTML5 specifikaciją:

"Blockquote" elementas yra skyrius, kuris cituojamas iš kito šaltinio.

Kaip naudotis "Blockquote" savo tinklalapiuose

Kai rašote tekstą tinklalapyje ir sukuriate šio puslapio maketą, kartais norite paskambinti teksto bloku kaip citata.

Tai galėtų būti kažkur kitur pateiktas citatas, kaip klientų atsiliepimai, kurie pridedami prie atvejo tyrimo ar projekto sėkmės istorijos. Tai taip pat gali būti dizaino procedūra, kuri pakartoja svarbų straipsnio ar paties turinio tekstą. Leidinyje tai kartais vadinama " pull-quote" , "Web dizainas", vienas iš būdų tai pasiekti (ir tai, kaip mes šiame straipsnyje aptariame) yra vadinamas blokuotu tekstu.

Taigi, pažvelkime, kaip naudoti "blockquote" žymą, kad apibrėžtumėte ilgas citatas, pavyzdžiui, šį ištrauką iš "The Jabberwocky" iš Lewis Carroll:

"Twas brillig ir slithey toves
Ar gyre ir gimble bjaurus:
Visi mimsy buvo borogoves,
Ir monom raths outgrabe.

(pagal Lewis Carroll)

Blockquote tago naudojimo pavyzdys

"Blockquote" žyma yra semantinė žyma, nurodanti naršyklę ar naudotojo agentą, kad turinys yra ilgas citatas. Tokiu atveju neturėtumėte įterpti teksto, kuris nėra citata "blokkutės" žyme. Prisiminkite, kad "citata" dažnai yra faktiniai žodžiai, kuriuos kažkas pasakė, arba tekstas iš išorinio šaltinio (pvz., Šio straipsnio Lewis Carroll tekstas), tačiau tai taip pat gali būti ir "pullquote" sąvoka, kurią anksčiau apėmėme.

Kai tu galvoji apie tai, kad "pullquote" yra teksto citata, tai tiesiog būna iš to paties straipsnio, į kurį atsiranda pati citata.

Daugelyje interneto naršyklių abiejų blokavimo pusių eilutėje pateikiama keletas įrašų (apie 5 tarpus), kad būtų galima išsiskirti iš supančio teksto. Kai kurios itin senos naršyklės gali netgi nukreipti cituojamą tekstą kursyvu.

Nepamirškite, kad tai yra paprasčiausias blokavimo elemento stilius. Naudodamiesi CSS, galite visiškai kontroliuoti, kaip bus rodoma jūsų blokavimo versija. Galite padidinti ar net pašalinti įtrauką, pridėti fono spalvų arba padidinti teksto dydį, kad paskambintumėte citatą. Galite plaukioti tą citatą į vieną puslapio pusę ir jį apvynioti kitokiu tekstu, kuris paprastai yra vizualus stilius, naudojamas spausdintuose žurnaluose. Galite kontroliuoti "Blockquote" išvaizdą naudodami CSS, apie ką trumpiau aptarsime. Dabar mes ir toliau ieškosime, kaip pridėti citatą prie savo HTML žymėjimo.

Norėdami pridėti žymės blokuotę į savo tekstą, tiesiog supa tekstą, kuris yra citata su šia žymų pora -

Pavyzdžiui:


"Twas brillig ir slithey toves

Ar gyre ir gimble bjaurus:

Visi mimsy buvo borogoves,

Ir monom raths outgrabe.

Kaip matote, jūs tiesiog pridedate porą žymių blokelę aplink paties citatos turinį. Šiame pavyzdyje mes taip pat naudojome keletą pertraukų žymelių (
) prireikus pridėti vienos eilutės pertraukas teksto viduje. Taip yra todėl, kad mes atkuriame tekstą iš poemos, kur šios konkrečios pertraukos yra svarbios. Jei jūs sukūrėte klientų atsiliepimų pasiūlymą ir linijas nereikėjo sugadinti konkrečiose dalyse, nenorėtumėte pridėti tokių pertraukų žymų ir leisti pačiam naršiui apvynioti ir sulaužyti, atsižvelgiant į ekrano dydį.

Nenaudokite "Blockquote" į įtraukimo tekstą

Daugelį metų žmonės naudojo blokavimo žymą, jei norėjo įterpti tekstą į savo tinklalapį, net jei šis tekstas nebuvo išbrauktas. Tai bloga praktika! Jūs nenorite naudoti "blockquote" semantikos tik dėl vizualių priežasčių. Jei norite įrašyti savo tekstą, turėtumėte naudoti stilių lapus, o ne žymėjimo žymes (išskyrus atvejus, kai, žinoma, tai, ką jūs bandote atkreipti, yra citata!). Pabandykite įdėti šį kodą į savo tinklalapį, jei bandote paprasčiausiai pridėti įtrauką:

Tai bus nufilmuotas tekstas.

Tada jūs taikysite šią klasę CSS stiliumi

.indented {
padding: 0 10px;
}

Tai papildo 10 pikselių užpildą abiejose pastraipos pusėse.

Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard 5/8/17.