របៀបប្រើ Span និង Div ធាតុ HTML

ប្រើ span និង div ជាមួយនឹង CSS សម្រាប់រចនាប័ទ្មកាន់តែច្រើននិងការត្រួតពិនិត្យប្លង់។

មនុស្សជាច្រើនដែលថ្មីចំពោះការរចនាគេហទំព័រនិង HTML / CSS ប្រើធាតុ និង

ក្នុងការផ្លាស់ប្តូរគ្នាទៅវិញទៅមកនៅពេលដែលពួកវាបង្កើតទំព័រវិប។ ការពិតទោះជាយ៉ាងណាក៏ដោយធាតុនីមួយៗនៃធាតុ HTML ទាំងនេះបម្រើគោលបំណងខុសៗគ្នា។ ការរៀនសូត្រដើម្បីប្រើប្រាស់គ្នាសម្រាប់គោលបំណងដែលបានគ្រោងទុករបស់វានឹងជួយអ្នកអភិវឌ្ឍគេហទំព័រដែលស្អាតជាងមុនដែលកូដមានភាពងាយស្រួលក្នុងការគ្រប់គ្រង។

ដោយប្រើធាតុ
Element

ធាតុ div កំណត់និយមន័យតក្កវិជ្ជានៅលើទំព័របណ្តាញរបស់អ្នក។

វាជាមូលដ្ឋានដែលអ្នកអាចដាក់ធាតុ HTML ផ្សេងទៀតដែលសមហេតុផលទៅជាមួយគ្នា។ ផ្នែកអាចមានធាតុជាច្រើននៅក្នុងវាដូចជាកថាខណ្ឌប្រធានបទបញ្ជីតំណរូបភាពរូបភាព។ ល។ វាថែមទាំងអាចមានការបែកបាក់ផ្សេងៗទៀតនៅខាងក្នុងដើម្បីផ្តល់នូវរចនាសម្ព័ន្ធនិងការរៀបចំបន្ថែមទៅឯកសារ HTML របស់អ្នក។

ដើម្បីប្រើធាតុ div ដាក់ស្លាក

បើកមុនផ្នែកផ្ទៃនៃទំព័ររបស់អ្នកដែលអ្នកចង់បានជាផ្នែកដាច់ដោយឡែកហើយបិទស្លាក បន្ទាប់ពីវា:

មាតិការបស់ div

ប្រសិនបើតំបន់នៃទំព័ររបស់អ្នកត្រូវការព័ត៌មានបន្ថែមដែលអ្នកនឹងប្រើដើម្បីរចនាប័ទ្មជាមួយ CSS នៅពេលក្រោយអ្នកអាចបន្ថែមឧបករណ៍ជ្រើសរើសលេខសម្គាល់ (ឧ។

id = "myDiv">) ឬឧបករណ៍ជ្រើសរើសថ្នាក់មួយ (ឧ។ ថ្នាក់ = "bigDiv">) ។ គុណលក្ខណៈទាំងពីរនេះអាចត្រូវបានជ្រើសរើសដោយប្រើ CSS ឬកែប្រែដោយប្រើ JavaScript ។ ការអនុវត្តដ៏ល្អបំផុតបច្ចុប្បន្នគ្មានខ្លាញ់ឆ្ពោះទៅរកការប្រើឧបករណ៍ជ្រើសថ្នាក់ជំនួសឱ្យលេខសម្គាល់មួយផ្នែកដោយសារតែការជ្រើសលេខសម្គាល់ជាក់លាក់។ តាមពិតអ្នកអាចប្រើលេខមួយហើយថែមទាំងអាចចែកលេខសម្គាល់និងឧបករណ៍ជ្រើសរើសថ្នាក់ផងដែរ។

ពេលត្រូវប្រើ

ធៀបនឹង

ធាតុ div គឺខុសគ្នាពីធាតុផ្នែក HTML5 ព្រោះវាមិនផ្តល់នូវខ្លឹមសារព័ទ្ធជុំវិញអត្ថន័យ semantic ណាមួយឡើយ។ ប្រសិនបើអ្នកមិនប្រាកដថាប្លុកមាតិកាគួរតែជាផ្នែកមួយឬផ្នែកមួយទេសូមគិតអំពីអ្វីដែលគោលបំណងនៃធាតុនិងមាតិកាគឺដើម្បីជួយអ្នកសម្រេចចិត្តថាត្រូវប្រើ:

  • ប្រសិនបើអ្នកត្រូវការធាតុដើម្បីបន្ថែមរចនាប័ទ្មទៅតំបន់នោះនៃទំព័រអ្នកគួរតែប្រើធាតុ div ។
  • ប្រសិនបើមាតិកាដែលមានមានការផ្តោតខុសៗគ្នាហើយអាចឈរនៅលើខ្លួនវាអ្នកប្រហែលជាចង់ប្រើធាតុផ្នែកជំនួសវិញ។

ទីបំផុតទាំងវិវរណៈនិងផ្នែកមានលក្ខណៈស្រដៀងគ្នាហើយអ្នកអាចផ្តល់ឱ្យពួកគេនូវគុណលក្ខណៈនិងរចនាប័ទ្មពួកគេជាមួយ CSS ដើម្បីទទួលបានរូបរាងនៃគេហទំព័ររបស់អ្នកដែលអ្នកត្រូវការ។ ធាតុទាំងពីរនេះគឺជាធាតុកម្រិតប្លុក។

ប្រើ ធាតុ

ធាតុ span គឺជាធាតុក្នុងបន្ទាត់តាមលំនាំដើម។ នេះកំណត់វាដាច់ពីធាតុ div និងផ្នែក។ ធាតុជំពូកត្រូវបានប្រើជាញឹកញាប់ដើម្បីរុំបំណែកជាក់លាក់មួយនៃមាតិកាជាអត្ថបទជាធម្មតាដើម្បីផ្តល់ឱ្យវាបន្ថែម "hook" ដែលអាចត្រូវបានតែងនៅពេលក្រោយ។ ប្រើជាមួយ CSS វាអាចផ្លាស់ប្តូររចនាប័ទ្មនៃអត្ថបទដែលវាព័ទ្ធជុំវិញ។ ទោះជាយ៉ាងណាដោយគ្មានរចនាប័ទ្មរចនាប័ទ្មណាមួយធាតុយ៉ោលតែឯងមិនមានឥទ្ធិពលលើអត្ថបទទាល់តែសោះ។

នេះគឺជាភាពខុសគ្នាសំខាន់រវាងវិសាលភាពនិងធាតុ div ។ ដូចដែលបានរៀបរាប់ខាងលើធាតុ div រួមបញ្ចូលការបំបែកកថាខណ្ឌចំណែកធាតុ span ប្រាប់តែកម្មវិធីរុករកប៉ុណ្ណោះដើម្បីអនុវត្តច្បាប់រចនាប័ទ្ម CSS ភ្ជាប់ទៅអ្វីដែលត្រូវបានភ្ជាប់ដោយ tags:


អត្ថបទគូសបញ្ជាក់ និងអត្ថបទដែលមិនបានបន្លិច។

បន្ថែមថ្នាក់ = "បន្លិច" ឬថ្នាក់ផ្សេងទៀតទៅធាតុ span ដើម្បីធ្វើរចនាប័ទ្មអត្ថបទដោយប្រើ CSS (ឧទាហរណ៍ class = "highlight">) ។

ធាតុ span មិនមានគុណសម្បត្តិទេប៉ុន្តែបីដែលមានប្រយោជន៍បំផុតគឺដូចគ្នានឹងធាតុរបស់ div:

  • រចនាប័ទ្ម
  • ថ្នាក់
  • លេខសម្គាល់

ប្រើវិសាលភាពនៅពេលអ្នកចង់ផ្លាស់ប្តូររចនាប័ទ្មនៃមាតិកាដោយមិនកំណត់ថាមាតិកាជា ធាតុ កម្រិតប្លុក ថ្មីនៅក្នុងឯកសារ។

ឧទាហរណ៍ប្រសិនបើអ្នកចង់ឱ្យពាក្យទី 2 នៃក្បាលរបស់ h3 ក្លាយទៅជាពណ៌ក្រហមនោះអ្នកអាចព័ទ្ធជុំវិញពាក្យនោះជាមួយធាតុ span ដែលអាចសរសេរពាក្យថាជាអត្ថបទពណ៌ក្រហម។ ពាក្យនេះនៅតែជាផ្នែកមួយនៃធាតុ h3 ប៉ុន្តែឥឡូវនេះក៏បង្ហាញជាពណ៌ក្រហមផងដែរ:

នេះគឺជាចំណងជើងដ៏អស្ចារ្យរបស់ខ្ញុំ

បានកែសម្រួលដោយលោក Jeremy Girard នៅថ្ងៃទី 2/2/17