Kako uporabljati elemente Span in Div HTML

Uporabite span in div s CSS za večji nadzor nad slogom in postavitvijo.

Mnogi ljudje, ki so novi v spletnem oblikovanju in HTML / CSS, uporabljajo elemente in

medsebojno izmenično, saj gradijo spletne strani. Resničnost pa je, da vsak od teh HTML elementov služi različnim namenom. Učenje uporabe vsake za svoj namen vam bo pomagal razviti čistejše spletne strani, ki jih je koda lažje upravljati na splošno.

Uporaba elementa

Element div opredeljuje logične delitve na vaši spletni strani.

To je v bistvu polje, v katerem lahko postavite druge elemente HTML, ki se logično združi. Delitev lahko vsebuje več drugih elementov v njej, kot so odstavki, naslovi, seznami, povezave, slike itd. V njej lahko tudi druge razlike, da zagotovijo dodatno strukturo in organizacijo v svoj HTML dokument.

Če želite uporabiti element div, postavite odprto

oznako pred območje vaše strani, ki jo želite ločeno, in za njo blizu oznako:

vsebina div

Če na območju vaše strani potrebujete dodatne informacije, ki jih boste kasneje slogovali s CSS, lahko dodate izbirnik id (npr.

id = "myDiv">) ali izbirnika razreda (npr. razred = "bigDiv">). Oba atributa lahko nato izberete s CSS ali spremenite z uporabo JavaScripta. Trenutne najboljše prakse se naslanjajo na uporabo selektorjev razredov namesto ID-jev, delno zaradi tega, kako so določeni izbirniki ID-jev. V resnici pa lahko uporabite enega ali celo razdelite ID in izbirnik razreda.

Kdaj uporabiti

Versus

Element div se razlikuje od elementa elementa HTML5, ker ne daje zaprte vsebine nobenega semantičnega pomena. Če niste prepričani, ali je vsebinski blok del ali del, razmislite o tem, kaj je namen elementa in vsebine, da vam pomagajo pri odločitvi, katero uporabljati:

  • Če potrebujete element preprosto, da dodate sloge na to območje strani, uporabite element div.
  • Če vsebina, ki jo želite vsebovati, ima poseben poudarek in bi lahko stala samostojno, boste morda želeli uporabiti element razdelka namesto tega.

Navsezadnje se obe različici in oddelki obnašajo podobno, lahko pa jim dodate vrednosti ene od atributov in jih oblikujete s CSS-om, da si zagotovite videz svoje strani, ki jo potrebujete. Oba sta elementi bloka.

Uporaba elementa

Razpon elementa je privzeti element v vrstici. To ga ločuje od elementov div in elementov. Element razpona se pogosto uporablja za zavijanje določenega dela vsebine, običajno besedilo, ki mu doda dodaten "kavelj", ki ga je mogoče pozneje pozneje oblikovati. Uporablja se pri CSS, lahko spremeni slog besedila, ki ga obdaja; vendar brez atributov sloga samo element razpona ne vpliva na besedilo sploh.

To je glavna razlika med razponom in div elementi. Kot je bilo že omenjeno, element element div vsebuje prelom odstavka, medtem ko element elementa razkriva, da brskalnik uporablja pravila za slog CSS, ki jih je treba vključiti z oznakami :


Označeno besedilo in neobeleženo besedilo.

Dodajte razred = "highlight" ali drug razred v razpon elementa, da besedilo vnesete s CSS (npr. Razred = "označite">).

Element razpona nima nobenih zahtevanih atributov, vendar so tri najbolj uporabne, enake tistim elementa div:

  • slog
  • razred
  • id

Uporabite razpon, če želite spremeniti slog vsebine, ne da bi to vsebino določili kot nov element na ravni blokov v dokumentu.

Na primer, če želite, da je druga beseda naslova h3 rdeča, jo lahko obkrožite z elementom razpona, ki bi besedo označil kot rdeče besedilo. Beseda še vedno ostaja del h3 elementa, zdaj pa tudi rdeče:

To je moj Awesome Headline

Uredil Jeremy Girard dne 2/2/17