HTML элемент бүр ямар төрлийн элемент гэдгээсээ хамааран анхдагч харагдах утгатай (display value) байдаг.
Хамгийн түгээмэл хоёр харагдах утга бол block болон inline юм.
Блок түвшний Элементүүд (Block-level Elements) #
Блок түвшний элемент нь үргэлж шинэ мөрөөс эхэлдэг бөгөөд хөтчүүд (browsers) элементийн өмнө болон хойно автоматаар тодорхой хэмжээний зай (margin) нэмдэг.
Блок түвшний элемент нь үргэлж боломжит бүх өргөнийг эзэлдэг (зүүн болон баруун тийш боломжит хэмжээгээрээ сунадаг).
Түгээмэл хэрэглэгддэг хоёр блок элемент бол: <p> ба <div> юм.
<p>элемент нь HTML баримт бичигт догол мөрийг тодорхойлдог.<div>элемент нь HTML баримт бичигт хуваалт эсвэл хэсгийг тодорхойлдог.
<p> элемент бол блок түвшний элемент юм.
<div> элемент бол блок түвшний элемент юм.
Жишээ
HTML
<p>Сайн байна уу дэлхий</p>
<div>Сайн байна уу дэлхий</div>
HTML дэх блок түвшний элементүүд энд байна:
<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-ээс<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>
Inline Элементүүд (Inline Elements) #
Inline элемент нь шинэ мөрөөс эхэлдэггүй.
Inline элемент нь зөвхөн шаардлагатай хэмжээний өргөнийг л эзэлдэг.
Энэ бол догол мөр доторх <span> элемент юм.
Жишээ
HTML
<span>Сайн байна уу дэлхий</span>
HTML дэх inline элементүүд энд байна:
<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>
Тэмдэглэл: Inline элемент нь блок түвшний элементийг агуулж болохгүй!
<div> Элемент #
<div> элементийг ихэвчлэн бусад HTML элементүүдийн сав (container) болгон ашигладаг.
<div> элементэд шаардлагатай атрибут байхгүй ч style, class болон id нь түгээмэл хэрэглэгддэг.
CSS-тэй хамт хэрэглэсэн үед <div> элементийг агуулгын блокуудыг загварчлахад ашиглаж болно:
Жишээ
HTML
<div style="background-color:black;color:white;padding:20px;">
<h2>Лондон</h2>
<p>Лондон бол Английн нийслэл хот юм. Энэ нь 13 сая гаруй хүн амтай метрополитан бүс нутаг бүхий Нэгдсэн Вант Улсын хамгийн олон хүн амтай хот юм.</p>
</div>
Та <div> элементийн талаар дараагийн бүлгээс дэлгэрэнгүй сурах болно.
<span> Элемент #
<span> элемент нь текстийн хэсэг эсвэл баримт бичгийн хэсгийг тэмдэглэхэд ашиглагддаг мөр доторх (inline) сав юм.
<span> элементэд шаардлагатай атрибут байхгүй ч style, class болон id нь түгээмэл хэрэглэгддэг.
CSS-тэй хамт хэрэглэсэн үед <span> элементийг текстийн хэсгүүдыг загварчлахад ашиглаж болно:
Жишээ
HTML
<p>Миний ээж <span style="color:blue;font-weight:bold;">цэнхэр</span> нүдтэй, харин миний аав <span style="color:darkolivegreen;font-weight:bold;">хар ногоон</span> нүдтэй.</p>
Бүлгийн Дүгнэлт #
- Блок түвшний элемент нь үргэлж шинэ мөрөөс эхэлдэг бөгөөд боломжит бүх өргөнийг эзэлдэг.
- Inline элемент нь шинэ мөрөөс эхэлдэггүй бөгөөд зөвхөн шаардлагатай хэмжээний өргөнийг эзэлдэг.
<div>элемент нь блок түвшний элемент бөгөөд ихэвчлэн бусад HTML элементүүдийн сав болгон ашиглагддаг.<span>элемент нь текстийн хэсэг эсвэл баримт бичгийн хэсгийг тэмдэглэхэд ашиглагддаг мөр доторх сав юм.
Дасгал? #
Ямар төрлийн элементүүд боломжит бүх өргөнийг эзэлдэг вэ?
- Блок элементүүд (Block elements)
- Inline элементүүд (Inline elements)
HTML Шошгууд #
| Шошго | Тайлбар |
<div> | Баримт бичгийн хэсгийг тодорхойлно (блок түвшин) |
<span> | Баримт бичгийн хэсгийг тодорхойлно (inline) |
Боломжит бүх HTML шошгуудын жагсаалтыг манай HTML Шошгын Лавлахаас үзнэ үү.
