Span және Div HTML элементтерін қалай пайдалануға болады

Үлкен мәнер мен орналасуды басқару үшін CSS-мен кеңістікті және div пайдалану.

Веб-дизайн және HTML / CSS үшін жаңа болып табылатын көптеген адамдар веб-парақтарды құрастырған кезде және

элементтерін өзара алмастырады. Алайда, осы HTML элементтерінің әрқайсысы әртүрлі мақсаттарға қызмет етеді. Әрбір мақсатты пайдалануды үйрену жалпы кодты оңай басқаруға болатын таза веб-беттерді әзірлеуге көмектеседі.

элементін пайдалану

Div элементі сіздің веб-бетте логикалық бөлімдерді анықтайды.

Бұл негізінен логикалық түрде бірге жүретін басқа HTML элементтерін орналастыруға болатын қорап. Бөлімде параграфтар, тақырыптар, тізімдер, сілтемелер, суреттер және т.б. сияқты бірнеше басқа элементтер болуы мүмкін. Ол тіпті HTML құжатына қосымша құрылымды және ұйымдастыруды қамтамасыз ету үшін ішіндегі басқа бөлімшелерге ие болуы мүмкін.

Div элементін пайдалану үшін

тегін бөлек бөлім ретінде өзіңіздің бетіңізге дейін және жақыннан кейін тегіне қойыңыз:

мазмұны div

Егер сіздің бетіңіздің аумағы кейінірек CSS арқылы стильде қолданатын кейбір қосымша ақпаратты қажет етсе, сіз ID селекторын (мысалы,

id = «myDiv»>) немесе сынып селекторы (мысалы, class = «bigDiv»>). Содан кейін осы екі атрибуттар CSS көмегімен немесе JavaScript арқылы өзгертілген болуы мүмкін. Қазіргі заманғы озық тәжірибелер ID идентификаторларының орнына класс селекторларын қолдана отырып, белгілі бір ID селекторларының болуына байланысты. Дегенмен, шын мәнінде, сіз біреуін пайдалана аласыз және тіпті идентификаторды және сыныпты селекторды бөлуге бола аласыз.

Versus
пайдалану кезінде

Div элементі HTML5 бөлім элементінен ерекшеленеді, себебі ол мазмұнды мазмұнды семантикалық мән бермейді. Мазмұн блогы div немесе бөлім болуы керек екеніне күмәнданатын болсаңыз, онда элемент пен мазмұнның мақсаттары қайсысын пайдалануға шешім қабылдауға көмектесетінін ойластырыңыз:

  • Егер сізге элементті сол беттің аумағына стиль қосу үшін жай керек болса, div элементін пайдалану керек.
  • Егер мазмұнның мазмұны әртүрлі болса және оның орнына тұра берсе, оның орнына бөлім элементін қолданғыңыз келуі мүмкін.

Сайып келгенде, екі бөлім мен секциялар өте ұқсас әрекет етеді және сіз олардың кез-келгенін өзіңізге қажетті сайттың көрінісін алу үшін құндылықтарымен белгілеп, оларды CSS-да стильде бере аласыз. Бұлардың екеуі де блоктық деңгейдегі элементтер.

Элементті қолдану

Ұзартқыш элементі әдепкі бойынша кірістірілген элемент болып табылады. Бұл бөлімді және бөлім элементтерінен ажыратады. Жиынтық элемент жиі белгілі бір контенттің орнын, әдетте мәтінді, оны кейінірек салуға болатын қосымша «ілмекпен» беру үшін қолданылады. CSS-мен қолданылған, ол ол қамтитын мәтіннің мәнерін өзгерте алады; алайда, кез-келген стиль атрибуттарынсыз, аралық элемент тек мәтінге әсер етпейді.

Бұл спан мен div элементтерінің арасындағы негізгі айырмашылық. Жоғарыда айтылғандай, div элементі параграфтың үзілуін қамтиды, ал span элементі тек браузерге сәйкес CSS стилі ережелерін тегтері арқылы қамтылғанға нұсқайды:


Бөлектелген мәтін және бөлінбейтін мәтін.

Мәтінді CSS (мысалы, class = «highlight»>) көмегімен стиль жасау үшін class = «highlight» немесе басқа сыныпты кеңейтілген элементіне қосыңыз.

Ұзартқыш элементінде қажетті атрибуттар жоқ, бірақ ең пайдалы үшеуі div элементіне ұқсас:

  • стиль
  • сынып
  • id

Мазмұнды құжатта жаңа блоктық деңгей элементі ретінде анықтамастан мазмұн мәнерін өзгерткіңіз келген кезде аралықты пайдаланыңыз.

Мысалы, h3 тақырыбының екінші сөзі қызыл болғысы келсе, сол сөзді қызыл мәтін ретінде көрсететін кеңейтілген элементпен қоршаңыз. Бұл сөз h3 элементінің бөлігі болып қала береді, бірақ енді қызыл түспен көрсетіледі:

Бұл менің Awesome Headline

Jeremy Girard 2/2/17 жылы редакцияланған