A HTML5-jelölés gyakori hibáinak elkerülése. Blokk div elrendezés – alapok Mit jelent a div?
Bármely weboldal a rajta elhelyezkedő elemekből áll, és ezek elhelyezéséért szinte mindig a div blokk elrendezése a felelős. Természetesen létezik címkéket használó táblázatelrendezés is
,
,
, és még arról is vita folyik, hogy melyik rendszert érdemesebb használni - blokk vagy táblázat alapú. A valóságban azonban jelenleg egyetlen olyan modern, népszerű és kényelmes webhelyet sem talál, amely csak táblázatos elrendezést használna. Legjobb esetben csak arra használjuk, amire szánták - vagyis táblák létrehozására, de nem magának a webhelyszerkezetnek a kialakítására.
A helyzet az, hogy a webhely div elrendezése lehetővé teszi számos olyan CSS-tulajdonság beállítását, amelyek nem állnak rendelkezésre a táblázatokhoz. Ezenkívül a táblázatrendszer legnagyobb hátránya, hogy a táblázat nem jelenik meg a képernyőn, amíg a böngésző teljesen be nem töltötte. Ha a teljes oldal egy táblázatban készült, akkor az csak az oldal teljes html kódjának teljes betöltése után jelenik meg a kijelzőn.
DIV címke és float tulajdonság
A blokkrendszer alapja a címke
, amely a tartalom tárolója. Más tartályokat is tartalmazhat benne .
A DIV címke használata nem bonyolultabb, mint a . A szabványos webhelyszerkezet általában a következőképpen alakul: van egy fő tároló
(gyakran egy wrapper, container, main stb. nevű osztályt rendelnek hozzá). Ebben a tárolóban a menü, a tartalom rész és az oldalsáv blokkjai találhatók.
Alapértelmezés szerint minden új blokk egy új sorba kerül. Ahhoz, hogy egy blokkot egy másiktól balra vagy jobbra helyezzünk el (például egy oldalsáv jobb oldali elhelyezéséhez), a float tulajdonságot használjuk. Alapértelmezés szerint a „nincs” értéke van, de beállíthatja a „bal” és „jobb” értékeket is.
Nézzük meg ezt a tulajdonságot egy két blokkos példán keresztül.
Tartalom blokk
Oldalsáv blokk
Ez a kód a következő eredményt adja:
tiszta tulajdon
Fontos figyelembe venni, hogy a float tulajdonság nem csak magára a blokkra vonatkozik, amelyben regisztrálva van, hanem a következő elemre is, amely ezt a blokkot követi. Vagyis ha a fent leírt két blokkhoz hozzáadunk egy újabb blokkot anélkül, hogy tulajdonságot adnánk meg, akkor az nem egy új sorban fog elhelyezkedni, hanem a második blokktól jobbra indul.
Ennek elkerülése érdekében a block div elrendezés a clear tulajdonságot használja, amelyet az új sorban elhelyezni kívánt blokkhoz kell beállítani. Leggyakrabban erre a „mindkettőre” van állítva, de beállíthatjuk „balra” vagy „jobbra” is, ha nem csak a blokkot akarjuk új sorra helyezni, hanem az igazítását is beállítjuk.
Adjunk hozzá egy új elemet a fenti példához:
Tartalom blokk
Oldalsáv blokk
Új blokk alul található
Eredmény:
Behúzás blokk elrendezésben
A blokkok elhelyezkedése mellett fontos a behúzás a blokkok között és azokon belül is. Ehhez a margó, illetve a padding tulajdonságokat használják.
A behúzások külön vannak beállítva az elem felső, jobb, alsó és bal oldali részére. Egy sorban adhatók meg négy érték felsorolásával:
Margó: 20 képpont 10 képpont 0 40 képpont
Az ezekkel a paraméterekkel rendelkező blokk 20 képponttal a szülőelem alatt, a jobb oldali elemtől tíz pixelre helyezkedik el, alul nulla, a bal oldalon pedig 40 pixeles kitöltés lesz.
Ha a kitöltés tulajdonságban ugyanazok a jelzők vannak megadva, akkor ezek lesznek a tartalom belső kitöltése annak a blokknak a határaihoz képest, amelyben az található.
Az egyes élekhez egyedi tulajdonságokat is beállíthat a margó felső, alsó margó, bal margó, jobb margó (és hasonlóképpen a kitöltés) használatával. Ebben az esetben, ha valamelyik él nincs megadva, akkor az oldalán lévő behúzás nulla lesz, vagy az oldalon lévő blokkokhoz megadott általános css tulajdonságok határozzák meg.
Elem
egy blokk elem, és célja a dokumentum egy töredékének kiemelése a tartalom megjelenésének megváltoztatása érdekében. A blokkok megjelenését általában stílusok segítségével szabályozzák. Annak érdekében, hogy ne írja le minden alkalommal a stílust a címkén belül, szétválaszthatja a stílust egy külső stíluslapra, és hozzáadhat egy osztály vagy azonosító paramétert a címkéhez a választó nevével.
A többi blokkelemhez hasonlóan a címke tartalma
mindig új sorban kezdődik. Utána sortörés is bekerül.
Szintaxis
...
Lehetőségek
align Beállítja a címke tartalmának igazítását
. title Elemleírást ad a tartalomhoz.
Záró címke
Kívánt.
1. példa: Címke használata
DIV címke
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
A DIV címke paramétereinek leírása
ALIGN paraméter
HTML:
3.2
4
XHTML:
1.0
1.1
Leírás
A tartály tartalmának igazítása
határán.
Szintaxis
...
Érvek
center A szöveget középre igazítja. A szöveg vízszintesen kerül elhelyezésre abban a böngészőablakban vagy tárolóban, ahol a szövegblokk található. Úgy tűnik, hogy a szövegsorok egy láthatatlan tengelyre vannak felfűzve, amely a weboldal közepén fut. Ezt az igazítási módszert aktívan használják a címsorokban és a különféle aláírásokban, például a feliratokban, amely hivatalos és szilárd megjelenést kölcsönöz a szövegnek. Minden más esetben ritkán alkalmazzák a középre igazítást, amiatt, hogy kényelmetlen nagy mennyiségű ilyen szöveg elolvasása. balra A szöveget balra igazítja. Ebben az esetben a szövegsorok balra, a jobb széle pedig létraként rendeződik. Ez az igazítási módszer a legnépszerűbb a weboldalakon, mivel segítségével a felhasználó könnyedén kereshet új sort, és kényelmesen olvashat nagy szöveget. jobbra A szöveget jobbra igazítja. Ez az igazítási módszer az előző típus antagonistájaként működik. Ugyanis a szövegsorok a jobb szélhez igazodnak, de a bal oldal „szakadt” marad. Mivel a bal szél nincs igazítva, ami az új sorok beolvasása, ez a szöveg nehezebben olvasható, mintha balra igazítva lenne. Ezért általában a jobbra igazítást használják rövid, legfeljebb három soros címsorokhoz. Nem vesszük figyelembe azokat a konkrét oldalakat, ahol a szöveget jobbról balra kell olvasni, ahol talán egy hasonló igazítási módszer hasznos lesz. De hol látott hazánkban ilyen oldalakat? justify Justified, ami azt jelenti, hogy egyszerre balra és jobbra igazítva. A művelet végrehajtásához a böngésző ebben az esetben szóközt ad a szavak közé.
Alapértelmezett érték
Hasonló a CSS-hez
2. példa: Szöveg igazítás
DIV címke, igazítási paraméter
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
TITLE paraméter
HTML:
3.2
4
XHTML:
1.0
1.1
Leírás
Magyarázó szöveget ad a tárolóhoz
eszköztipp formájában, amely akkor jelenik meg, amikor az egérmutatót a tartalom fölé viszi.
Szintaxis
...
Érvek
Bármilyen szöveges karakterlánc. A karakterláncot dupla vagy szimpla idézőjelek közé kell tenni.
Alapértelmezett érték
3. példa Szöveges tipp
DIV címke, cím paraméter
title="Kanonikus hal"
!}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ma nehéz olyan oldalt találni, ahol nem használnak ilyen szükséges és fontos címkét
. Nézze meg az interneten talált webhelyek kódját, és látni fogja, hogy a címke
gyakrabban fordul elő, mint más címkék HTML dokumentum. Ennek a népszerűségnek az oka a blokk elrendezés. Más szóval, blokkcímke használatával
weboldalak készülnek.
Ennek a címkének köszönhetően minden HTML A dokumentum kódja világos és logikusan érthető szerkezetű. Nem csak az elrendezéstervező, hanem más, egy projekten együtt dolgozó szakemberek számára is könnyen érthető. Azonban a címke
a „műholdak” – szelektorok nélkül idÉs osztályértéktelen.
Osztályok és azonosítók
osztályok (osztály)és azonosítók (azonosító) ugyanazokat a feladatokat végezze el. Különböző stílusokat állítanak be a címkéhez
, mint a külsőben CSS fájlban, a dokumentumon belül pedig a címkén keresztül stílus. Itt tisztázni kell, hogy nem csak a címkével együtt működnek
, hanem sok más címkével is.
Tekintsük a következő HTML jelölőkódot példaként:
Soha nem késő tanulni!
Az ismétlés a tanítás anyja
Állítsuk be a megjelenést HTML dokumentum használatával CSS stílusfájl:
Nevek idÉs osztály maga a fejlesztő állítja be tetszőlegesen, a szemantikai terhelés alapján. Egyszerűen elneveztük őket tartalom. A neveket nem lehet orosz betűkkel megadni, használhatunk számokat és kötőjelet (-)
és aláhúzásokkal (_)
.
Két teljesen egyforma blokkot látunk. A felső blokkra egy választó kerül alkalmazásra id, és a választó az alsó blokkra kerül alkalmazásra osztály. Megkérdezheti, hogy hol a különbség divs azonosító és osztály? Tisztán külsőleg, még nincs különbség, amíg egyenként alkalmazzuk idÉs osztály egy oldalon.
Akkor mi a különbség osztályÉs id?
A különbség magában a névben rejlik id, azonosítót jelent, azaz egyedit. A fő különbség az osztályokhoz képest az, hogy a választó id egy oldalon csak egyszer használható. Választó osztály, éppen ellenkezőleg, egy oldalon végtelen számú alkalommal használható.
Például:
A tartalom /* bármilyen címkére alkalmazható */ A div.content /* csak a .content osztályú div címkékre vonatkozik */ div#content /* az id-nél egy ilyen bejegyzésnek nincs értelme, egyedi */
Azt is érdemes megjegyezni id A tulajdonságok prioritása magasabb, mint az osztálytulajdonságok.
piros szöveg
Ez a példa egyértelműen bizonyítja, hogy annak ellenére osztály alul kék szöveggel, a szöveg továbbra is piros. Ha id nem kapott elsőbbséget, a szöveg kék színű lesz.
Ezenkívül több osztályt is hozzárendelhet egy adott címkéhez, szóközzel elválasztva. Ez a rendszer lehetővé teszi, hogy ne hozzon létre felesleges osztályokat, hanem hatékonyabban használja azokat. U id Természetesen erre nincs választó.
Van még egy fontos különbség, ez a programozókra vonatkozik. Ha egy elemhez szeretne hozzáférni HTML nyelven keresztül dokumentálni JavaScript, akkor feltétlenül használnia kell id, ennek megvalósítása osztályokon keresztül sokkal nehezebb.
Mikor a legjobb használni id, és mikor osztály?
Ha az oldal bármely elemét, például a webhely fejlécét, menüjét, gombját csak egyszer használjuk, akkor a id. Választó osztály egy címkére vagy különböző címkékre vonatkozik, ahányszor megjelennek az oldalon. Például képek, pontozott listák, bekezdések.
Befejezésül szeretnék baráti tanácsokat adni mindazoknak, akik szeretnének megtanulni önállóan weboldalakat készíteni. Nagyon időigényes és nem hatékony, ha cikkekből, leckékből ismereteket szerezünk a honlapkészítésről. Kérjük, figyeljen erre a témára. Ez az egyik legjobb tanfolyam kezdőknek.
). Létrejött egy nagy táblázat, amelyet több területre osztottak fel: fejléc, bal blokk, jobb oldali blokk, közép és alsó. A címke megjelenésével
minden webmester használni kezdte a jövőbeli webhely „csontvázának” létrehozásához. Például így nézhet ki a webhely oldalszerkezete:
Címke szintaxisa
...
HTML tag
egy blokk elem. Legfontosabb tulajdonsága az osztály. Használatával blokkokat hozhat létre a kívánt CSS stílusokkal.
Példa. Div blokk használata
Példa div blokk használatára
Példa div blokk használatára
Ez egy alapvető példa a címke használatára
. Képességei messze túlmutatnak a példa keretein. Ezzel a címkével például gyönyörű menüket hozhat létre (lásd, hogyan lehet legördülő menüt létrehozni css-ben ")
Most nézzük meg közelebbről a div címke összes attribútumait.
Címke attribútumok és tulajdonságok
align="parameter" - beállítja az igazítást. A következő értékeket veheti fel:
középre – igazítsa a szöveget középre
balra – igazítsa a szöveget balra
jobbra – igazítsa a szöveget jobbra
indokolás - balra és jobbra igazítás
title="text"
- всплывающая подсказка к тегу. Почти никогда не используется.!}
Nézzünk meg néhány gyakorlati példát a címkével kapcsolatban
.
Példa. Tartalom központosítása div használatával
Ez a szöveg középre kerül
Átalakítja a következőre az oldalon:
Ez a szöveg középre kerül
Most a címke helyett
tudsz írni és a szöveg középre kerül. Ez megfelel a HTML szabvány követelményeinek (webhelyellenőrzés).
Példa. Gyönyörű keret div
Szöveg megjelenítése gyönyörű blokkban
Átalakítja a következőre az oldalon:
Szöveg megjelenítése gyönyörű blokkban
Példa. Teaserek megvalósítása a weboldalon
A div tag kényelme abban rejlik, hogy blokkosan egymáshoz képest kerül elhelyezésre. Gyakorlati példa az egymást követő blokkok kimenete, amelyek a vég elérésekor automatikusan új sorba kerülnek.
Sok ilyen elemet lehet készíteni. Ennek eredményeként valami ehhez hasonlót kap.
Alig tíz évvel ezelőtt a RuNetben leggyakrabban az úgynevezett táblázatelrendezést használták. Tekintettel arra, hogy egyes böngészők szabványai jelentősen eltértek egymástól, olyan megoldást kellett keresni, amely lehetővé teszi az internetes dokumentum helyes megjelenítését minden alkalmazásban. De telt az idő, kialakultak a szabványok, és a meglehetősen merev és rugalmatlan táblázatos helyett egy jól változtatható és érzékeny Az ilyen technológia élén az elemek használatának elve áll
. A HTML dokumentumokat többnyire egyedi blokkok alapján kezdték felépíteni, amelyek a táblaelrendezéssel ellentétben függetlenek lehetnek egymástól.
Felbukkanás
A weboldalak egyre bonyolultabbá válása és a számítástechnika fejlődése oda vezetett, hogy a webdokumentum két részre oszlott - a keretrendszerre (HTML kód) és a tervezésre (stíluslapok). Ennek köszönhetően eddig soha nem látott webfejlesztést lehetett elérni, melynek eredményeit ma már a legtöbb modern oldalon láthatjuk. A fejlesztési folyamat javítása mellett
A HTML lehetővé tette saját tervezési szabályok meghatározását minden egyes elemhez. Ez segített javítani a weboldal kódjának olvashatóságát és csökkenteni a dokumentumbetöltési időt. Manapság a keresőmotorok sokkal gyorsabban és jobban feldolgozzák az oldalon elérhető információkat.
Szabványok és tesztelés
Címke
A HTML-t szigorúan a W3C (World Wide Web Consortium) szabványoknak megfelelően használják. Az oldal kódját egy speciális eszköz - egy érvényesítő - ellenőrzi, amely elemzi (beolvassa és megkeresi) az oldalon található mindenféle hibát. Az érvényes oldal azt jelenti, hogy minden címkét megfelelően használtak, és teljes mértékben megfelel a szabvány követelményeinek.
Címkék
lehetővé teszi blokkok vagy – ahogyan más néven – konténerek létrehozását. Ebben az esetben az egyes elemek egymásba ágyazhatók, így a kívánt konfigurációjú és összetettségű struktúrák hozhatók létre. Címke használata
szinte soha nem fordul elő osztály vagy azonosító nélkül. Ez az elem „arctalanságának” köszönhető. Ha nem rendel hozzá osztályt, akkor végül minden konténernek azonos konfigurációja lesz.
Ahhoz, hogy valóban helyes dokumentumot hozzon létre, a következő címkestruktúrát kell használnia
osztály = "valamilyen_név". Az osztálynévre hivatkozva a stíluslapok meghatározhatják a dokumentumban lévő egyes blokkok helyzetét, méretét, margóját és egyéb paramétereit.
Osztályok és azonosítók használata
Blokk
A HTML definiálható az azonosítóval vagy az azonosítóval. Az első és a második között az a különbség, hogy az azonosító csak egyszer kerül felhasználásra a dokumentumoldalon. Azaz egyedi elemek azonosítására szolgál, amelyek sehol máshol nem ismétlődnek az oldal kódjában. A class attribútum lehetővé teszi, hogy ugyanazt több elemre is alkalmazzuk. Ez a megközelítés nagyban leegyszerűsíti a kódfejlesztést és karbantartást. Ezenkívül egy objektumnak egyszerre több osztálya is lehet. A helyes felismerés érdekében egyszerűen szóközzel kell elválasztani őket.
Természetesen egy dokumentum blokkszerkezete nem jelenti önmagában a címkék használatát.
. Minden internetes oldal szerkezetében mindig lesznek más elemek is. Ezenkívül maga a blokkelem
teljesen más kijelzője lehet. Ez a display tulajdonság használatával történik. Egy elemnek lehet vonalas vagy akár táblázatos megjelenítése, ami lehetővé teszi a blokk használatának rugalmasságának jelentős növelését és bármilyen konfigurációjú webhely létrehozását.
Címke
. HTML tulajdonságok
Mint fentebb említettük, ez a címke nem változtatja meg az oldalrészletek kialakítását, hanem egy szemantikai struktúra létrehozására szolgál, majd stíluslapok segítségével. Ehhez az elemhez záró címkét kell használni.
Bár sok modern böngésző képes felismerni egy ilyen hibát, bizonyos esetekben a lezáratlan címke miatt a dokumentum szerkezete szétesik és helytelenül jelenhet meg.
Mivel ez az elem egy blokk elem, a benne lévő tartalom új sorban kezdődik. Ennek a viselkedésnek a megváltoztatásához meg kell változtatnia a blokk megjelenítési paramétereit a display tulajdonság segítségével. A beágyazott elemek csoportosítása mellett a címke
lehetővé teszi a benne lévő tartalom elrendezésének formázását. Ez az igazítás attribútum használatával történik, amely lehetővé teszi a szöveg vagy kép elhelyezését a szülőelem bal, jobb vagy közepén.
Blokkpozicionálás
A pozíció attribútum használatával módosíthatja a kiválasztott elem pozicionálási módját. Tehát háromféle pozicionálás létezik:
Statikus – alapértelmezés szerint használatos. Ebben az esetben az elem a HTML kódban elfoglalt helye szerint kerül elhelyezésre.
Relatív. Ebben az esetben az objektum pozíciójának kiszámítása ugyanúgy történik, mint a statikus pozicionálás esetén, de ez a tulajdonság lehetővé teszi a gyermekelemek pozíciójának megváltoztatását.
A helyzetét az elemhez viszonyítva relatív pozicionálással számítjuk ki.
Egyéb attribútumok
Az origóhoz viszonyított pozíció megváltoztatásához a felső és a bal oldali attribútumokat kell használni. Az értékek lehetnek pozitívak vagy negatívak. Egy blokk elem szélességét és magasságát a szélesség és magasság attribútumok határozzák meg. Ha ezeket nem adták meg a stíluslapokban, akkor a blokk a szülőelem teljes szélességét elfoglalja. Ha a blokk tartalma nem fér el a „szülő” teljes szélességében, akkor az elem viselkedését a túlcsordulás attribútum határozza meg.
Reméljük, hogy ez a cikk segített tisztázni azt a kérdést, hogy mi az
