Paano Gamitin ang Mga Sangkap ng Span at Div HTML

Gamitin ang span at div na may CSS para sa higit na estilo at kontrol sa layout.

Maraming tao na bago sa disenyo ng web at HTML / CSS ang gumagamit ng at

mga elemento nang magkakasabay habang nagtatayo sila ng mga webpage. Ang katotohanan, gayunpaman, ay ang bawat isa sa mga elemento ng HTML na ito ay nagsisilbing iba't ibang layunin. Ang pag-aaral na gamitin ang bawat isa para sa layunin nito ay tutulong sa iyo na bumuo ng mas malinis na mga web page na mas madaling pamahalaan ang code.

Gamit ang
Element

Ang elemento ng div ay tumutukoy sa lohikal na dibisyon sa iyong web page.

Ito ay karaniwang isang kahon kung saan maaari kang maglagay ng iba pang mga elemento ng HTML na lohikal na magkakasama. Ang isang dibisyon ay maaaring magkaroon ng maraming iba pang mga sangkap sa loob nito, tulad ng mga talata, mga pamagat, mga listahan, mga link, mga imahe, atbp. Maaari pa ring magkaroon ng iba pang mga dibisyon sa loob nito upang magbigay ng karagdagang istraktura at organisasyon sa iyong HTML na dokumento.

Upang gamitin ang div element, ilagay ang isang bukas na

tag bago ang lugar ng iyong pahina na gusto mo bilang isang hiwalay na dibisyon, at isang close tag pagkatapos nito:

mga nilalaman ng div

Kung ang lugar ng iyong pahina ay nangangailangan ng ilang karagdagang impormasyon na gagamitin mo sa estilo sa CSS sa ibang pagkakataon, maaari kang magdagdag ng isang tagapili ng id (halimbawa,

id = "myDiv">), o isang tagapili ng klase (halimbawa, class = "bigDiv">). Ang parehong mga katangiang ito ay maaaring mapili gamit ang CSS o mabago gamit ang JavaScript. Ang kasalukuyang mga pinakamahuhusay na gawi ay nakatuon sa paggamit ng mga tagapili ng klase sa halip ng mga ID, sa bahagi dahil sa kung paano ang mga tiyak na tagapili ng ID. Sa katunayan, gayunpaman, maaari mong gamitin ang alinman sa isa at maaari pa ring magbigay ng isang dibisyon parehong ID at isang tagapili ng klase.

Kailan Gamitin ang

Kumpara sa

Ang div element ay naiiba sa elemento ng seksyon ng HTML5 dahil hindi ito nagbibigay ng nakapaloob na nilalaman sa anumang kahulugan ng semantiko. Kung hindi ka sigurado kung ang bloke ng nilalaman ay dapat na isang div o isang seksyon, mag-isip tungkol sa kung ano ang layunin ng elemento at ng nilalaman upang tulungan kang magpasya kung anong gagamitin:

  • Kung kailangan mo ang elemento lamang upang magdagdag ng mga estilo sa lugar na iyon ng pahina, dapat mong gamitin ang div element.
  • Kung ang nilalaman na nilalaman ay may isang natatanging focus at maaaring tumayo sa sarili nitong, maaaring gusto mong gamitin ang elemento ng seksyon sa halip.

Sa huli, ang parehong mga div at mga seksyon ay kumikilos nang katulad din at maaari kang magbigay ng alinman sa mga ito sa mga halaga ng katangian at estilo ng mga ito sa CSS upang makuha ang hitsura ng iyong site na kailangan mo. Ang dalawa sa mga ito ay mga elemento ng antas ng block.

Gamit ang Element

Ang span na elemento ay isang inline elemento sa pamamagitan ng default. Ito ay nagtatakda nito mula sa mga elemento ng div at seksyon. Ang span na elemento ay kadalasang ginagamit upang balutin ang isang tiyak na piraso ng nilalaman, karaniwang teksto, upang bigyan ito ng karagdagang "kawit" na maaaring istilo mamaya. Ginagamit gamit ang CSS, maaari itong baguhin ang estilo ng teksto na nakapaloob nito; gayunpaman, nang walang anumang mga katangian ng estilo, ang span na elemento lamang ay walang epekto sa teksto sa lahat.

Ito ang pangunahing pagkakaiba sa pagitan ng span at ng mga elemento ng div. Tulad ng nabanggit sa itaas, ang elemento ng div ay nagsasama ng break na talata, samantalang ang span elemento ay nagsasabi lamang sa browser na ilapat ang nauugnay na mga panuntunan sa estilo ng CSS sa kung ano ang nakapaloob sa mga tag na :


Mga naka- highlight na teksto at di-naka-highlight na teksto.

Idagdag ang class = "highlight" o iba pang klase sa span element upang estilo ang teksto sa CSS (hal., Class = "highlight">).

Ang span na elemento ay walang kinakailangang mga katangian, ngunit ang tatlong pinaka-kapaki-pakinabang ay kapareho ng mga elemento ng div:

  • estilo
  • klase
  • id

Gamitin ang span kung gusto mong baguhin ang estilo ng nilalaman nang hindi tinutukoy ang nilalaman na bilang isang bagong elemento ng antas ng block sa dokumento.

Halimbawa, kung gusto mo ang ikalawang salita ng isang heading na h3 ay mapula, maaari mong palibutan ang salitang iyon sa isang elemento ng span na mag-style na salita bilang pulang teksto. Ang salita ay nananatiling bahagi ng h3 elemento, ngunit ngayon ay nagpapakita din ng pula:

Ito ang Aking Galing Headline

Na-edit ni Jeremy Girard noong 2/2/17