Ha valaha is megnézted a HTML-elemek listáját, előfordulhat, hogy ön megkérdezte, hogy "mi az a blokkvita?" A blockquote elem egy HTML tagpár, amelyet hosszú idézetek meghatározására használnak. Itt van az elem definíciója a W3C HTML5 specifikációnak megfelelően:
A blockquote elem egy olyan szakaszt képvisel, amely egy másik forrásból származik.
A Blockquote használata a weboldalain
Amikor szöveget írt egy weboldalon és létrehozta az oldal elrendezését, néha egy szövegblokkot szeretne idézni.
Ez lehet idézet valahol máshol, mint például az ügyfelek beszámolója, amely egy esettanulmányt vagy projekt sikertörténetet tartalmaz. Ez egy olyan tervezési eljárás is lehet, amely megismétli a cikkből vagy a tartalomból származó fontos szöveget. A kiadványban ezt néha pull-quotenek nevezik. A webes tervezésben az egyik módja annak, hogy ezt elérjük (és ahogyan ezt a cikket lefedjük) blokkvótának nevezzük.
Tehát nézzük meg, hogyan használja a blockquote címkét hosszú idézetek meghatározásához, mint például a Lewis Carroll "The Jabberwocky" című részéből.
"Vörösek és a hülyék
Gyertya és gimble a wabe-ban:
Minden mimsy a borogók,
És az én kanyarom kijön.
(Lewis Carroll)
Példa a Blockquote címke használatára
A blockquote címke olyan szemantikai címke, amely megmondja a böngészőnek vagy a felhasználói ügynöknek, hogy a tartalom hosszú idézet. Mint ilyen, ne csatoljon olyan szöveget, amely nem egy idézet a blokkvázas címkén belül. Emlékezzen arra, hogy az "idézet" gyakran a valódi szó, amit valaki mondott vagy egy külső forrásból származó szöveget (például Lewis Carroll szövegét ebben a cikkben), de ez az is lehet, hogy korábban lefedtük a pullquote koncepciót.
Ha ezt gondolod, az a pullquote szöveges idézet, csak egy cikkből származik, hogy maga az idézet jelenik meg.
A legtöbb internetes böngésző hozzáadásával (kb. 5 szóköz) hozzáadja a blokkvota mindkét oldalát, hogy kiemelje a környező szövegből. Néhány rendkívül régi böngésző még az idézett szöveget dőlt betűvel is megjelenítheti.
Ne feledje, hogy ez egyszerűen a blockquote elem alapértelmezett stílusa. A CSS segítségével teljes mértékben ellenőrizheti a blokkvita megjelenítésének módját. Növelheti vagy akár eltávolíthatja a behúzást, hozzáadhat háttérszíneket vagy növelheti a szöveg méretét, hogy tovább hívja ki az ajánlatot. Ezt az idézetet az oldal egyik oldalára úszhatod, és a másik szöveg befedi azt, ami általában a vizuális stílus, amelyet a nyomtatott folyóiratokban használt pullquotokhoz használnak. Ön kontrollálhatja a blockquote megjelenését a CSS-en, amit egy kicsit hamarabb tárgyalunk. Most nézzük tovább, hogyan kell hozzáadni az idézetet a HTML-jelöléshez.
Ha hozzáadod a blokkvázas címkét a szöveghez, egyszerűen csak a következő címkepárra hivatkozó szöveget rajzolja körül -
Például:
"Vörösek és a hülyék
Gyertya és gimble a wabe-ban:
Minden mimsy a borogók,
És az én kanyarom kijön.
Amint láthatja, egyszerűen hozzá kell adnia a blokkcímkék párját az ajánlat magában. Ebben a példában használtunk néhány törési címkét (
), ha adott esetben a szöveg belsejében egyetlen sortörést ad hozzá. Ez azért van, mert egy versből újrateremtünk egy verset, ahol az adott szünetek fontosak. Ha ügyfélszolgálati ajánlatot készítettél, és a vonalaknak nem kellett megtörniük bizonyos részeket, akkor nem szeretné hozzáadni ezeket a törési címkéket, és lehetővé tenné, hogy a böngésző maga is elférjen és szüneteljen a képernyőméret alapján.
Ne használd a Blockquote-t a behúzott szöveghez
Évek óta az emberek használják a blokkvázas címkét, ha szöveget akartak beilleszteni a weboldalukra, még akkor is, ha ez a szöveg nem volt pihentető. Ez rossz gyakorlat! A blockquote szemantikáját nem csak vizuális okokból kívánja használni. Ha be szeretné illeszteni a szöveget, akkor használjon stíluslapokat, nem pedig a blokkvázas címkéket (hacsak természetesen nem próbáld meg behúzni az ajánlatot!). Próbáld meg elhelyezni ezt a kódot a weboldaladon, ha egyszerűen hozzá kívánsz adni egy bejegyzést:
Ez lesz a szöveget, ami be van fejezve.
Ezután célozza meg ezt az osztályt CSS stílusban
.indented {
párnázottság: 0 10px;
}
Ez hozzáadja a 10 pixeles kitöltést a bekezdés mindkét oldalához.
Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard 18/5/17.