Indlela yokusebenzisa i-Span ne-Div HTML Elements

Sebenzisa u-span kunye ne-div kunye ne-CSS kwisitayela esikhulu kunye nolawulo lwesakhiwo.

Abantu abaninzi abatsha kwi-web design kunye ne-HTML / CSS basebenzise kunye

izinto ngokungafaniyo njengoko zakha iiwebhu. Okwenyani, nangona kunjalo, kukuba nganye yalezi zixhobo ze-HTML zisebenzela iinjongo ezahlukeneyo. Ukufunda ukusebenzisa nganye ngenjongo yayo ekujoliswe kuyo kuya kukunceda ukuba uhlakulele amaphepha ewebhu ahlambulukileyo okulula ukulawula jikelele.

Ukusebenzisa
Element

Inxalenye ye-div ichaza ukwahlula okucacileyo kwiphepha lakho lewebhu.

Ngokuyinqobo ibhokisi apho unokubeka khona ezinye izinto ze-HTML ezihamba ngokufanelekileyo. Ulwahlulo lunokuba nolunye uhlobo lwezinto, njengemihlathi, izihloko, izintlu, izixhumanisi, imifanekiso, njl. Kunokuba nezinye izigaba ngaphakathi kuyo ukubonelela ngesakhiwo esongezelelweyo kunye nentlangano kwixwebhu lakho le-HTML.

Ukusebenzisa i-div element, faka ithebhu evulekileyo

phambi kommandla wekhasi lakho ofuna ukuyisebenzisa njengecandelo elihlukileyo, kunye netafu elifutshane emva kwayo:

qulatho ye div

Ukuba ummandla wekhasi lakho udinga ulwazi olongezelelweyo oluza kulusebenzisa kwisitayela ngeCSS kamva, unokongeza umkhethi we-id (umzekelo,

id = "myDiv">), okanye umkhethi weklasi (umzekelo, iklasi = "bigDiv">). Zomibini zezi zixhobo zingakhethwa ngokusetyenziswa kweCSS okanye ziguqulwe usebenzisa iJavaScript. Iindlela ezisetyenziswayo zangoku zixhomekeke ekusebenziseni abakhethi beeklasi endaweni yee-ID, ngokwengxenye ngenxa yeendlela abakhethi be-ID abathile. Inyaniso, nangona kunjalo, ungasebenzisa enye kwaye unokwenza ulwahlulo kunye ne-ID kunye nomkhetha weklasi.

Ixesha lokusebenzisa

Versus

Isigaba se-div sihluke kwinqanaba lecandelo le-HTML5 ngenxa yokuba linganiki umxholo odibeneyo naluphi na intsingiselo ye-semantic. Ukuba awuqinisekanga ukuba ibhloko lomxholo kufuneka libe yi-div okanye icandelo, cingisisa malunga nenjongo yento kunye nomxholo kukukunceda ukuba wenze isigqibo sokuba yiyiphi into:

  • Ukuba udinga i-element ukuba nje ukongeza izitayela kuloo ndawo kwiphepha, kufuneka usebenzise i-div element.
  • Ukuba umxholo uqulethwe ngokugqithiseleyo kwaye unokuma uqobo, ungafuna ukusebenzisa indawo yecandelo endaweni yoko.

Ekugqibeleni, zombini ii-divs kunye nezigaba ziziphatha ngokufanayo kwaye unako ukunika ezinye zazo ukuba zixabise ixabiso kunye nesitayela kunye ne-CSS ukuze ukhangele indawo yakho oyifunayo. Zomibini zezi zinto zithintela amanqanaba.

Ukusebenzisa Element

I-element span yinto engqambileyo ngokungagqibekanga. Oku kukwahlula kwi-div nakwizinto zecandelo. Isiqwenga sesithuba sisoloko sisetyenziselwa ukugoba isiqulatho esithile somxholo, ngokuqhelekileyo sibhaliweyo, ukuba sinike "ikhonkco" eyongezelelweyo engachazwa kamva. Isetyenziswe ngeCSS, inokutshintsha isitayela sesicatshulwa esibhaliweyo; nangona kunjalo, ngaphandle kweempawu zobomi, isici esicacileyo sodwa asinasiphumo kulo mbhalo.

Lo ngumphambili omkhulu phakathi kwe-span kunye neengxenye ze-div. Njengoko kuchaziwe ngasentla, iqela le-div liquka ukuphulwa komhlathi, kanti i-span element iyatshela i-browser ukuba isebenzise imigaqo yesitayela yeCSS ehambelana nento ehlanganiswe yi- tags:


Umbhalo ogqityiweyo kunye nesicatshulwa esingakhankanyiweyo.

Yongeza iklasi = "ukugqamisa" okanye enye iklasi kwisiqendu se-span ukwenza isicatshulwa nge CSS (umzekelo, iklasi = "qinisa">).

I-element span ayikho impawu ezifunekayo, kodwa ezo zintathu ezona ziluncedo zifana nezo zixhobo ze-div:

  • isitayela
  • kwiklasi
  • id

Sebenzisa ixesha xa ufuna ukutshintsha isitayela somxholo ngaphandle kokuchaza loo mxholo njengento entsha ye-block-level in document.

Umzekelo, ukuba ufuna igama lesibili le-h3 elibhekisele ebomvu, unokulujikeleza loo gama ngento ebhaliweyo engayifaka igama elo njengombhalo obomvu. Igama lihlala liyingxenye ye-h3 element, kodwa ngoku iyakubonisa ngokubomvu:

Eli yiNtloko yam Engummangaliso

Ehlelwe nguJeremy Girard ngomhla wesi-2/2/7