ប្រភេទ
ធាតុរបស់ HTML ចែកជា២ប្រភេទ
- ក្នុងបន្ទាត់ (Inline Elements)
- ជាដុំ (Block Elements) ។
ការយល់ដឹងពីភាពខុសគ្នារវាង block និង inline elements គឺមានសារៈសំខាន់ណាស់សម្រាប់ការរចនាគេហទំព័រ។
ជាដុំ (Block Elements)
ធាតុមួយមានប្រភេទជាដុំ នៅពេលប្រើប្រាស់វា វាផ្ដាច់ខ្លួនវាពីគេពីឯង ។ Block elements always start on a new line and take up the full width available.
លក្ខណៈសំខាន់នៃ Block Elements:
- ចាប់ផ្តើមលើបន្ទាត់ថ្មីជានិច្ច (Always starts on a new line)
- ទទួលបានទទឹងពេញលេញដែលមាន (Takes 100% width by default)
- អាចកំណត់កម្ពស់និងទទឹងបាន (Can set height and width)
- អាចមានធាតុផ្សេងទៀតនៅខាងក្នុង (Can contain both block and inline elements)
- អាចបន្ថែម margin និង padding ទាំងអស់ទិសបាន
ឧទាហរណ៍ធាតុ Block ទូទៅ:
<div>,
<p>,
<h1>-<h6>,
<ul>,
<ol>,
<li>,
<header>,
<footer>,
<section>,
<article>,
<form>,
<table>,
<nav>,
<main>,
<aside>
ឧទាហរណ៍ Basic:
ឧទាហរណ៍ប្រើប្រាស់ជាក់ស្តែង - រចនាអត្ថបទ:
ឧទាហរណ៍ការប្រើប្រាស់ Semantic HTML5 Block Elements:
ក្នុងបន្ទាត់ (Inline Elements)
ធាតុមួយមានប្រភេទក្នុងបន្ទាត់ នៅពេលប្រើប្រាស់វា វាមិនផ្ដាច់ខ្លួនវាពីគេពីឯងទេ ។ Inline elements do not start on a new line and only take up as much width as necessary.
លក្ខណៈសំខាន់នៃ Inline Elements:
- មិនចាប់ផ្តើមលើបន្ទាត់ថ្មីទេ (Does not start on a new line)
- ទទួលបានតែទទឹងតាមតម្រូវការប៉ុណ្ណោះ (Only takes necessary width)
- មិនអាចកំណត់កម្ពស់និងទទឹងបានទេ (Cannot set height and width)
- អាចមានតែធាតុ inline និងអត្ថបទប៉ុណ្ណោះនៅខាងក្នុង
- Margin និង padding កំពូលនិងបាតប្រហែលមិនដំណើរការ
ឧទាហរណ៍ធាតុ Inline ទូទៅ:
<span>,
<a>,
<strong>,
<em>,
<b>,
<i>,
<u>,
<img>,
<br>,
<code>,
<small>,
<sub>,
<sup>
ឧទាហរណ៍ Basic:
ឧទាហរណ៍ប្រើប្រាស់ច្រើនប្រភេទ:
ឧទាហរណ៍ការប្រើប្រាស់ជាមួយរូបភាពនិងតំណ:
ការប្រៀបធៀប Block vs Inline
| លក្ខណៈ | Block Elements | Inline Elements |
|---|---|---|
| បន្ទាត់ថ្មី | ចាប់ផ្តើមលើបន្ទាត់ថ្មី | មិនចាប់ផ្តើមលើបន្ទាត់ថ្មី |
| ទទឹង | 100% by default | តាមទំហំខ្លឹមសារ |
| កំណត់ width/height | អាចបាន | មិនអាចបាន |
| មានធាតុនៅក្នុង | Block និង Inline | តែ Inline ប៉ុណ្ណោះ |
ឧទាហរណ៍បង្ហាញភាពខុសគ្នា:
<div>
<div> ប្រើសំរាប់បង្កើតធាតុទទេ ប្រភេទជាដុំ ។ វាមិនផ្ដល់លក្ខណៈអ្វីដល់អត្ថបទដែលនៅក្នុងនោះឡើយ ។ វាត្រូវបានប្រើសំរាប់ផ្ដាច់ពីផ្នែកផ្សេងៗនៅក្នុងទំព័រ ។ <div> តែងប្រើច្រើន នៅពេលអ្នកចេះកូដ CSS ឬកូដដទៃទៀត ។
ឧទាហរណ៍ការប្រើប្រាស់ DIV ជាមួយ CSS:
ឧទាហរណ៍ការរចនាទំព័រប្រើ DIV:
យើងនឹងសិក្សាអំពីការប្រើប្រាស់ <div> នៅក្នុងកូដ CSS និងផ្សេងទៀត ។
<span>
<span> ប្រើសំរាប់បង្កើតធាតុទទេ ប្រភេទក្នុងបន្ទាត់ ។ វាមិនផ្ដល់លក្ខណៈអ្វីដល់អត្ថបទដែលនៅក្នុងនោះឡើយ ។ វាត្រូវបានប្រើសំរាប់សរសេរកូដ CSS នៅផ្នែកណាមួយនៃគេហទំព័រ ឬផ្សេងពីនេះទៀត ។ <span> តែងប្រើច្រើន នៅពេលអ្នកចេះកូដ CSS ឬកូដដទៃទៀត ។
ឧទាហរណ៍ Basic:
ឧទាហរណ៍ប្រើប្រាស់ច្រើន SPAN:
ឧទាហរណ៍ប្រើ Class ជាមួយ SPAN:
យើងនឹងសិក្សាអំពីការប្រើប្រាស់ <span> នៅក្នុងកូដ CSS និងផ្សេងទៀត ។
ការប្រើប្រាស់ជាមួយគ្នា (Nesting)
អ្នកអាចដាក់ inline elements នៅក្នុង block elements ហើយ block elements អាចមានក្នុង block elements ផ្សេងទៀត។
ឧទាហរណ៍ត្រឹមត្រូវ:
ឧទាហរណ៍មិនត្រឹមត្រូវ:
ចំណាំ: ធាតុ inline គួរតែមានតែ inline elements ឬអត្ថបទប៉ុណ្ណោះនៅខាងក្នុង មិនគួរមាន block elements ទេ។