Unsaon Paggamit sa Span ug Div Elements sa HTML

Gamita ang span ug div uban sa CSS alang sa dugang nga estilo ug pagkontrol sa layout.

Daghang mga tawo nga bag-o sa web design ug HTML / CSS ang naggamit sa ug

nga mga elemento sa baylo samtang sila nagtukod sa mga webpage. Ang tinuod, hinoon, mao nga ang matag usa niining mga elemento sa HTML nag-alagad sa nagkalainlain nga mga katuyoan. Ang pagkat-on sa paggamit sa matag usa alang sa katuyoan niini nga katuyoan makatabang kanimo sa pag-ugmad sa limpyo nga mga pahina sa web nga mas sayon ​​nga pagdumala ang tanan.

Paggamit sa
Element

Ang div nga elemento naghubit sa lohikal nga pagbahin sa imong web page.

Kini usa ka kahon nga mahimo nimong ibutang ang ubang mga elemento sa HTML nga makatarunganon nga magkauban. Ang usa ka dibisyon adunay daghang lain nga mga elemento niini, sama sa mga parapo, mga ulohan, mga lista, mga sumpay, mga hulagway, ug uban pa. Mahimo pa gani kini adunay lain nga mga dibisyon sa sulod niini aron sa paghatag og dugang nga estraktura ug organisasyon sa imong HTML nga dokumento.

Aron sa paggamit sa elemento sa div, ibutang ang bukas nga tag

sa dili pa ang lugar sa imong panid nga gusto nimo isip usa ka tagsa-tagsa nga dibisyon, ug usa ka suod nga tag sunod niini:

mga sulod sa div

Kon ang bahin sa imong pahina nagkinahanglan og dugang nga kasayuran nga imong gamiton sa istilo sa CSS sa ulahi, mahimo nimong idugang ang usa ka selector sa id (pananglitan,

id = "myDiv">), o usa ka klase nga tigpili (eg, class = "bigDiv">). Ang duha niini nga mga hiyas mahimo nga mapili gamit ang CSS o gi-usab gamit ang JavaScript. Ang pinakamaayo nga mga praktikal nga pamaagi nagsandig sa paggamit sa mga tigpili sa mga klase imbes sa mga ID, sa usa ka bahin tungod sa unsa ka piho nga mga tigpili sa ID. Sa kamatuoran, bisan pa niana, mahimo nimong gamiton ang bisan usa ug mahimo pa gani nga maghatag sa usa ka dibisyon sa usa ka ID ug usa ka selector sa klase.

Kanus nga Paggamit

Versus

Ang div nga elemento lahi gikan sa elemento sa seksyon sa HTML5 tungod kay wala kini naghatag sa sulod sa sulod sa bisan unsang kahulugan sa semantiko. Kon dili ka sigurado kung ang block sa sulod kinahanglan nga usa ka div o usa ka seksyon, hunahunaa kon unsa ang katuyoan sa elemento ug ang sulod mao ang pagtabang kanimo sa paghukom kon unsa ang gamiton:

  • Kon gikinahanglan nimo ang elemento aron lamang idugang ang mga estilo sa kana nga dapit sa panid, kinahanglang gamiton mo ang div element.
  • Kung ang sulod nga sulod adunay usa ka piho nga tumong ug makabarug sa iyang kaugalingon, mahimo nimo nga gamiton ang elemento nga seksyon sa baylo.

Sa katapusan, ang duha nga mga div ug mga seksyon managsama nga managsama ug mahimo nimong hatagan ang mga hiyas sa mga hiyas ug estilo kini sa CSS aron makuha ang hitsura sa imong site nga imong gikinahanglan. Ang duha niini mao ang block elemento sa lebel.

Paggamit sa Element

Ang span nga elemento usa ka inline nga elemento pinaagi sa default. Kini nagpalahi niini gikan sa mga elemento sa div ug seksyon. Ang span nga elemento sagad gigamit sa pagputos sa usa ka espesipikong piraso sa sulod, kasagaran teksto, aron hatagan kini og usa ka dugang nga "kaw-it" nga mahimong istilo sa ulahi. Gigamit uban sa CSS, kini makausab sa estilo sa teksto nga gisakop niini; Apan, nga walay bisan unsang mga hiyas sa estilo, ang span nga elemento lamang walay epekto sa teksto.

Kini ang pangunang kalainan tali sa span ug sa mga elemento sa div. Sama sa gihisgutan sa ibabaw, ang elemento sa div naglakip sa usa ka pahayag sa parapo, samtang ang espasyo nga elemento lamang nagsulti sa browser sa paggamit sa may kalabutan nga mga lagda sa estilo sa CSS sa butang nga gilimitahan sa mga tags:


Gipasiugdahan nga teksto ug dili gipasiugda nga teksto.

Idugang ang class = "highlight" o ubang klase sa span element aron estilo ang teksto sa CSS (eg, class = "highlight">).

Ang span nga elemento walay gikinahanglan nga mga hiyas, apan ang tulo nga labing mapuslanon susama sa mga elemento sa div:

  • estilo
  • klase
  • id

Gamita ang gitas-on kung gusto nimo nga usbon ang estilo sa sulod nga wala paghubad nga ang sulod isip bag -ong elemento sa block-level sa dokumento.

Pananglitan, kung gusto nimo ang ikaduhang pulong sa usa ka h3 nga ulohan nga mapula, mahimo nimong palibutan ang maong pulong nga may usa ka span element nga mag-istilo nianang pulong nga pula nga teksto. Ang pulong nagpabilin gihapon nga bahin sa h3 nga elemento, apan karon nagpakita usab nga pula:

Kini ang Akong Makalingaw nga Ulohan

Gipamod ni Jeremy Girard sa 2/2/17