Jos olet koskaan tarkastellut HTML-elementtien luetteloa, olet ehkä löytänyt itsellesi kysymyksen "Mikä on blockquote?" Blockquote-elementti on HTML-tunnistepari, jota käytetään määrittämään pitkiä lainauksia. Tässä määritellään tämä elementti W3C HTML5 -määrityksen mukaan:
Blockquote-elementti edustaa osaa, joka on lainattu toisesta lähteestä.
Kuinka käyttää Blockquotea Web-sivuillasi
Kun kirjoitat tekstiä Web-sivulle ja luodaan kyseisen sivun asettelua, haluat joskus kutsua tekstiä lohkoksi.
Tämä voisi olla lainaus muualta, kuten asiakaskertomus, joka liittyy tapaustutkimukseen tai hankkeen menestystarinaan. Tämä voisi olla myös suunnittelukäsittely, joka toistaa tärkeän tekstin artikkelista tai sisällöstä. Julkaisemisessa tätä kutsutaan joskus pull-quote -luokaksi . Web-suunnittelussa yksi tapa saavuttaa tämä (ja tapa, jolla olemme tässä artikkelissa) kutsutaan blockquote-nimeksi.
Katsotaan siis, kuinka käytät blockquote -tunnistetta määritelläksesi pitkiä lainauksia, kuten Lewis Carrollin "The Jabberwocky" -erittelystä:
"Twas brillig ja slithey toves
Oliko juhla ja kyyhkyset wabessa:
Kaikki mimsy olivat borogoves,
Ja mäni ratsat outgrabe.
(esittäjä: Lewis Carroll)
Esimerkki Blockquote-tunnisteen käyttämisestä
Blockquote -tunniste on semanttinen tagi, joka kertoo selaimelle tai käyttäjäagentille, että sisältö on pitkä tarjous. Sinun ei pitäisi sisällyttää tekstiä, joka ei ole hintatarjous blockquote -tunnisteen sisällä. Muista, että "hintatarjous" on usein todellinen sanoja, jotka joku on sanonut tai teksti ulkopuolisesta lähteestä (kuten Lewis Carrollin teksti tässä artikkelissa), mutta se voi olla myös pullquote-käsite, jota aiemmin käsiteltiin.
Kun ajattelet, että pullquote on lainaus tekstiä, se vain sattuu olemaan samasta artikkelista, että lainaus itsessään näkyy.
Useimmat selaimet lisäävät sisennystä (noin 5 välilyöntiä) lohkon molemmille puolille, jotta se erottuu ympäröivästä tekstistä. Jotkut äärimmäisen vanhat selaimet voivat jopa tehdä quoted tekstin kursiivilla.
Muista, että tämä on yksinkertaisesti elementtielementin oletusmuoto. CSS: llä on täysi määräysvaltaa siitä, miten korttikuvasi näkyy. Voit lisätä tai jopa poistaa sisennyksen, lisätä taustavärejä tai lisätä tekstin kokoa. Voit lainaa tämän lainauksen sivun toiselle puolelle ja muuta tekstiä ympäröi se, joka on yleisesti visuaalinen tyyli, jota käytetään lehtikuukausina lehdissä. Sinulla on hallussa blockquoten ulkoasua CSS: llä, josta keskustelemme hieman pian. Jatketaan nyt vielä, miten lisätään laina itsellesi HTML-merkintään.
Lisääksesi blockquote-tunnisteen tekstiisi ympäröivä tekstiä, joka on lainaus seuraavalla tagiparilla -
Esimerkiksi:
"Twas brillig ja slithey toves
Oliko juhla ja kyyhkyset wabessa:
Kaikki mimsy olivat borogoves,
Ja mäni ratsat outgrabe.
Kuten näet, lisäät vain pari blockquote-tunnistetta lainattavan sisällön ympärille. Tässä esimerkissä käytimme myös joitain taukotunnisteita (
) lisäämällä tarvittaessa yhden rivin katkokset tekstin sisälle. Tämä johtuu siitä, että luomme tekstiä runosta, jossa kyseiset tauot ovat tärkeitä. Jos luot asiakasasiakokyselyn, eikä rivejä tarvinnut rikkoa tietyissä osissa, et halua lisätä näitä taukotunnisteita ja sallia selaimen käärimisen ja murtamisen tarpeen mukaan näytön koon mukaan.
Älä käytä lokikirjaa sisennystekstiin
Monien vuosien ajan ihmiset käyttivät korttikooditunnistetta, jos he halusivat lisätä tekstiä verkkosivustollaan, vaikka kyseinen teksti ei ollut pullquote. Tämä on huono käytäntö! Et halua käyttää blockquotin semanttia pelkästään visuaalisista syistä. Jos haluat sijoita tekstiasi, käytä tyylitiedostoja, ei blockquote-tunnisteita (ellei tietysti yritä laukaista lainaa!). Yritä laittaa koodi verkkosivustasi, jos yrität vain lisätä viereen:
Tämä on tekstiä, joka on sisennetty.
Seuraavaksi kohdistat kyseisen luokan CSS-tyyliin
.indented {
pehmuste: 0 10px;
}
Tämä lisää pehmusteiden 10 pikseliä kappaleen kummallekin puolelle.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 5/8/17.