Blockquote гэж юу вэ?

Хэрэв та HTML элементүүдийн жагсаалтыг харсан бол "блоккут гэж юу вэ?" Гэж асууж магадгүй. Blockquote элемент нь урт хугацааны quotation-ийг тодорхойлоход ашиглагддаг HTML хосын хослол юм. Энэ элементийн тодорхойлолт нь W3C HTML5 тодорхойлолтод нийцсэн байна:

Blockquote элемент нь өөр эх сурвалжаас ишлэгдсэн хэсгийг илэрхийлнэ.

Таны веб хуудсанд Blockquote-г хэрхэн ашиглах талаар

Веб хуудсанд текст бичиж байхдаа тэр хуудсын загварыг үүсгэх үед заримдаа текстийг эшлэл болгон дуудах хүсэлтэй байдаг.

Энэ нь кейс судалгаа эсвэл төслийн амжилттай түүхтэй хамт хэрэглэгчийн тестийн адилаар хаа нэг газараас ирсэн ишлэл байж болно. Энэ нь мөн өгүүлэл эсвэл агуулгаас зарим чухал текстийг давтах дизайны эмчилгээ байж болно. Нийтлэгдэх үед энэ нь заримдаа татах гэсэн нэр томъёо юм. Вэб дизайн нь үүнийг хийх арга замуудын аль нэгийг (мөн энэ зүйлд хамаатай) нэгийг нь блоккут гэж нэрлэдэг.

Левис Карролын бичсэн "The Jabberwocky" гэх мэтийн урт ишлэлийг тодорхойлохын тулд блоккатотын тагийг хэрхэн ашиглахыг үзье.

'Бүүвэйр, жаахан чавхдас
Уучлаарай, зүүдэндээ:
Бүх mimez нь цоглог,
Мома чамайг эвгүй байдалд оруулдаг.

(Lewis Carroll)

Blockquote Tag ашиглан ашиглах жишээ

Блоккотын шошго гэдэг нь агуулгын хувьд урт ишлэл гэж браузер эсвэл хэрэглэгчийн төлөөлөгчдөд өгдөг семантик хаяг юм. Тиймээс та блоккотын шошгон дээрх эшлэл биш текстийг хавсаргах хэрэггүй. Эндээс "эшлэл" гэдэг нь хэн нэгний хэлсэн үг эсвэл гадны эх сурвалжаас (энэ зүйлд Lewis Carroll текст гэх мэт) бичсэн бодит үгс юм. Энэ нь бидний өмнө нь хамарсан хөтөч үзэл баримтлал байж болно .

Үүнийг бодоход энэ нь бичвэрийн иш таталт юм. Энэ нь зөвхөн иш татсан тэрхүү өгүүллээс л гардаг.

Ихэнх веб хөтөч нь блоккутын хоёр талыг (5 зайтай) нэмж өгдөг. Зарим маш хуучны хөтчүүд ч гэсэн үсгээр бичсэн текстийг налуугаар бичиж болно.

Энэ бол блоккотын элементийн анхдагч загварчлал гэдгийг санаарай. CSS-ээр та өөрийн блоккомоос яаж харагдахыг бүрэн хянах боломжтой. Та индекс нэмэх эсвэл бүр хасах боломжтой, арын өнгө нэмэх буюу текстийн хэмжээг нэмэгдүүлэх боломжтой. Та энэ эшлэлийг хуудсын нэг талд байршуулж, бусад текстийг буулгах боломжтой. Энэ нь хэвлэгддэг сэтгүүлүүдийн татах тэмдэглэгээнүүдэд хэрэглэдэг нийтлэг харааны загвар юм. Та Blockquote-ыг CSS-ийн төрлөөс хянах боломжтой болсон бөгөөд бид удахгүй удах болно. Одоогийн байдлаар, та HTML тэмдэглэгээгээ хэрхэн нэмэхийг үзье.

Блоккотын тагийг текстдээ нэмэхийн тулд дараах шошгоны нэрийг бичнэ үү.

Жишээлбэл:


'Бүүвэйр, жаахан чавхдас

Уучлаарай, зүүдэндээ:

Бүх mimez нь цоглог,

Мома чамайг эвгүй байдалд оруулдаг.

Та харж байгаагаар, та зүгээр л ишлэлийн агуулгын эргэн тойронд блоккот тэмдэгийн хослолыг нэмээрэй. Энэ жишээнд бид бас зарим таслалтын шошгыг ашигладаг (
) текстын дотор байрлах нэг мөрийн завсар нэмэх. Яагаад гэвэл бид шүлэг бичсэн текстийг нээж, эдгээр тусгай завсарлага чухал байдаг. Хэрэв та харилцагчийн тестийн саналын текстийг үүсгэсэн бөгөөд мөрүүд нь тодорхой хэсгүүдийг эвдэх шаардлагагүй бол та эдгээр эвдэрсэн хаягуудыг нэмэхийг хүсэхгүй бөгөөд дэлгэцийн хэмжээн дээр үндэслэн браузерыг боож, шаардлагатай эвдэж өгөхийг зөвшөөрөхгүй.

Blockquote-г Indent Text руу бүү ашигла

Хэдэн жилийн турш хүмүүс блоккатотын тагийг ашигласан бол энэ нь текст биш байсан ч вэбсайт дээрээ текстийг оруулахыг хүссэн. Энэ бол муу дасгал юм! Та харааны шалтгаанаар зөвхөн блоккотын семантикийг ашиглахыг хүсэхгүй байна. Хэрэв та текстээ индексжүүлэх хэрэгтэй бол та блоккомот хаягууд биш загварын хуудас ашиглах хэрэгтэй (мэдээжийн хэрэг, таниулах гэж оролдож байгаа зүйл бол quote юм!). Зөвхөн индекс нэмэхээр оролдож байгаа бол энэ кодыг вэб хуудсандаа хийж үзээрэй.

Энэ нь индексжүүлсэн текст байх болно.

Дараа нь та анги дээрээ CSS загвараар зорилт тавина

.indifiable {
padding: 0 10px;
}

Энэ нь догол мөрний хоёр талд байрлах 10 пикселийг нэмдэг.

Женнифер Кэрнин эх нийтлэл. 5/8/17 дээр Жереми Герард засварлав.