Kaip naudoti Span ir Div HTML elementus

Skirtingos žymos skirtingiems tikslams

Hamza TArkkol / Getty Images

Du ir apima nėra keičiami kuriant tinklalapius. Kiekvienas iš jų yra skirtas skirtingiems tikslams, o žinodami, kada naudoti kiekvieną, galėsite sukurti švarias, lengvai tvarkomas svetaines.

Div elemento naudojimas

Du apibrėžkite loginius skirsnius savo tinklalapyje. A div – padalijimo trumpinys – iš esmės yra dėžutė, į kurią galite įdėti kitus HTML elementai kurie priklauso kartu. Skyriuje gali būti keli kiti elementai, pvz., pastraipos, antraštės, sąrašai, nuorodos, vaizdai ir tt Jame netgi gali būti kiti skyriai, kad būtų sukurta papildoma struktūra ir organizavimas.

Norėdami naudoti div elementas, padėkite atvirą žyma prieš puslapio sritį, kurią norite kaip atskirą skyrių, ir uždarymą žyma po jo:

|_+_|

Jei sukursite šios srities stilių naudodami CSS, galite pridėti ID pradinės div žymos parinkiklis:

|_+_|

Arba galite pridėti klasės parinkiklį:

|_+_|

Tada galite dirbti su šiais elementais CSS arba JavaScript.

Dabartinė geriausia praktika yra linkusi naudoti klasių parinkiklius, o ne ID, iš dalies dėl to, kaip konkretūs ID parinkikliai. Tačiau bet kuris iš jų yra priimtinas, ir jūs netgi galite duoti a div ir ID, ir klasės parinkiklis.

Divai ar skyriai?

The div elementas skiriasi nuoHTML5 skyrius elementas, nes jis nesuteikia uždaram turiniui jokios semantinės reikšmės. Jei nesate tikri, ar turinio blokas turėtų būti a div arba a skyrius , pagalvokite apie elemento paskirtį ir turinį.

• Jei elemento reikia tiesiog norint pridėti stilių į tą puslapio sritį, turėtumėte naudoti div elementas.
• Jei turinys turi aiškų akcentą ir gali stovėti atskirai, apsvarstykite galimybę naudoti skyrius vietoj elemento.

Galų gale, abu du ir skyriuose elgiasi panašiai, bet kuriam iš jų galite suteikti atributų ir stilizuoti naudodami CSS. Abu yra bloko lygio elementai.

Naudojant tarpatramius

Span pagal numatytuosius nustatymus yra įterptinis elementas, kitaip nei div ir skyrius elementai. The tarpas elementas paprastai naudojamas apvynioti konkrečią turinio dalį, pvz., tekstą, kad būtų suteiktas papildomas kabliukas, kurį galite naudoti stiliams pridėti. Tačiau be jokių stiliaus atributų span neturi jokios įtakos tekstui.

Kitas skirtumas tarp span ir div elementai yra tai, kad div elemente yra pastraipos lūžis, o span elementas tik nurodo naršyklei taikyti susijusias CSS stiliaus taisykles tam, kas yra uždengta žymos:

|_+_|

Galite pridėti

|_+_|

arba panašus į span elementas, skirtas tekstui stilizuoti naudojant CSS.

Elementas span neturi būtinų atributų, tačiau trys naudingiausi yra tokie patys kaip ir div elementas:

stilius klasė ID

Naudokite span kai norite pakeisti turinio stilių neapibrėždami to turinio kaip naujo bloko lygio elementas dokumente.

Pavyzdžiui, jei norite antrojo žodžio h3 Jei norite būti raudona, šį žodį galite apjuosti a span elementas, kuris pakeistų žodį kaip raudoną tekstą. Žodis vis dar išlieka dalimi h3 elementas, bet bus rodomas raudonai.