Divs és átível nem cserélhetők fel a weboldalépítés során. Mindegyik más-más célt szolgál, és annak ismerete, hogy mikor kell használni, tiszta, könnyen kezelhető webhelyek fejlesztésében segít.
A Div elem használata
Divs definiáljon logikai felosztásokat a weboldalán. A div- rövid a megosztásra - alapvetően egy doboz, amelyben másokat is elhelyezhet HTML elemek amelyek összetartoznak. Egy részlegnek több más eleme lehet, például bekezdések, címsorok, listák, linkek, képek stb. Akár más részlegek is lehetnek benne, hogy további struktúrát és szervezettséget biztosítson.
A div elemet, tegyen nyitottat címke az oldal azon területe előtt, amelyet külön tagolásként szeretne használni, és egy zárás
div tartalma
Ha ezt a területet CSS-sel formázza, hozzáadhat egy ID választó a nyitó div taghez:
Vagy felvehet egy osztályválasztót:
Ezután CSS-ben vagy JavaScript-ben dolgozhat ezekkel az elemekkel.
A jelenlegi bevált gyakorlatok az osztályválasztók használata az azonosítók helyett, részben azért, mert mennyire specifikusak az azonosítóválasztók. Bármelyik is elfogadható, és még adhat is
div azonosító és osztályválasztó egyaránt.Divs vagy szakaszok?
A div elem különbözik a HTML5szakasz elem, mert nem ad szemantikai jelentést a mellékelt tartalomnak. Ha nem biztos abban, hogy a tartalomtömbnek a div vagy a szakasz, gondoljon az elem céljára és a tartalomra.
- Ha az elemre egyszerűen szüksége van, hogy stílusokat adjon hozzá az oldal adott területéhez, akkor használja a div elem.
- Ha a tartalom külön fókuszban van, és önállóan állhat, fontolja meg a szakasz elem helyett.
Végül mindkettő divs és szakaszok viselkedjen hasonlóan, és bármelyik attribútumot megadhatja és CSS-sel stílusozhatja. Mindkettő blokkszintű elem.
Spans használata
Span alapértelmezés szerint inline elem, ellentétben div és szakasz elemek. A span Az elemet általában egy adott tartalom, például szöveg tekercselésére használják, hogy további horgot kapjon, amellyel stílusokat adhat hozzá. Stílusattribútumok nélkül azonban span egyáltalán nincs hatása a szövegre.
Egy másik különbség a span és div elemek, hogy a div elem tartalmaz egy bekezdéstörést, míg a span elem csak arra utasítja a böngészőt, hogy a társított CSS stílusszabályokat alkalmazza a címkék:
Kiemelt szöveg és nem kiemelt szöveg.
Hozzáadhatja.
class = "kiemelés"
vagy hasonló a span elem a szöveg CSS-sel történő stílusához.
A span elemnek nincsenek kötelező attribútumai, de a három leghasznosabb megegyezik az div elem:
- stílus
- osztály
- ID
Használat span amikor meg akarja változtatni a tartalom stílusát anélkül, hogy a tartalmat újként definiálná blokk szintű elem a dokumentumban.
Például, ha az an második szavát szeretné h3 ha pirosnak akarsz lenni, akkor ezt a szót körülveheted egy span elem, amely ezt a szót vörös szövegként formázná. A szó továbbra is a h3 elem, de piros színnel jelenik meg.