Írásban jó kódot, webreference
Írására sok HTML és CSS fel kell tárni - .. Különböző elemek, attribútumok, tulajdonságok, értékek, stb A fő cél minden lecke eddig a pontig volt a magyarázata a különböző komponensek a HTML és CSS, abban a reményben, hogy segítsen megérteni az alapvető fundamentumai mindkét nyelven. Ez a lecke tesz egy lépést hátra, és úgy néz ki a több absztrakt kép HTML és CSS.
Pontosabban, ez a bemutató szentelt a legjobb gyakorlat kódot írni HTML és CSS. Az itt leírt technikák szolgálhat általános keretének írásban HTML és CSS. Hozzá vannak szokva, hogy minden órán, és ezeket mindig szem előtt kell tartani, ha a programozást.
Írásmódszereken HTML
Egy sor a legjobb gyakorlatok célja, hogy mentse a kód egyszerű és jól szervezett. Alapvető módszerek HTML nem különbözik, a cél az, hogy írjon jelölő, jól felépített, és a szabványoknak megfelelő. Ajánlások az itt leírt hez egy rövid bevezetés a írásmódszereken HTML és a lista korántsem az esetben nem korlátozódik rájuk.
Jelölés szabványok
HTML eredendően megbocsátó tárgya egy nyelv, amely lehetővé teszi a rossz kód futtatása, és megjeleníti a különböző fokú pontosság. Sikeres feltérképezése azonban nem jelenti azt, hogy a kód szemantikailag helyes, és biztosítja, hogy az kompatibilis-e az előírásoknak. Ezen túlmenően, a rossz kód kiszámíthatatlan, és akkor nem biztos, hogy kapsz a térkép alatt. Óvatosnak kell lennünk, ha írásban HTML - mellékletek valamennyi elemét a jogot, hogy azonosítók és osztályok rendesen, és mindig teszteljük a kódot.
A következő kód számos hibát tartalmaz, többek között az intro értéket használja az id attribútum többször, akkor kell lennie egy egyedi értéket elemek
és zárva a rossz sorrendben az első bekezdésben, és az elem <р> A második bekezdés nem zárja egyáltalán.
Segítségével szemantikai elemek
Könyvtár elemek HTML elég nagy, áll, több mint 100 tétel áll a használatra. Döntse el, melyik elemet kell használni, hogy leírja a különböző tartalmak is trükkös, de ezek az elemek képezik a szemantika. Meg kell vizsgálni, és újra ellenőrizze a kódot, és győződjön meg arról, hogy mi vagyunk a megfelelő szemantikai elemek. Az emberek hálásak, hogy hosszú távon a létesítmény egy hozzáférhetőbb oldalon, és a HTML sokkal könnyebb lesz a stílus. Ha bizonytalan a kód, meg egy barátom, aki segít, és elvégzi a rutin felülvizsgálata a kódot.
Az alábbi HTML nem használja a megfelelő címsor és a bekezdés elemeket, hanem használják értelmetlen elemei styling és csoportosítása tartalom.
Használja a megfelelő dokumentum szerkezete
Mint már említettük, a HTML nyelv megbocsátó ezért megjelenítendő oldal használata nélkül elemek vagy doctype .
és . Anélkül, hogy a doctype, és ezek a szerkezeti elemek, az oldalak nem jelennek meg helyesen bármilyen böngészőben.Mi mindig biztos, hogy mi a helyes a dokumentum struktúráját, beleértve a doctype és az elemek .
és . Lehetővé teszi, hogy az oldalak megfelelnek a szabványoknak, és teljes mértékben szemantikai és biztosítja, hogy azok meg fognak jelenni, amennyire szükségünk van.Tartsa szervezett szintaxis
A növekedést a HTML oldalak ellenőrzésére lesz a kihívás. Szerencsére van néhány egyszerű szabály, amely segít megőrizni a szintaxis, tiszta és rendezett. Ezek közé tartoznak a következők:
- Kisbetűs nevek, elemek, attribútumok és értékek; Behúzása részelemeket;
- A terméket szigorúan dupla idézőjelek helyett szimpla idézőjelek, vagy nincs;
- távolítsa el a perjel végén önzáró elemek; Az alacsonyabb értékek a logikai attribútumokat.
E szabályok betartása segít, hogy a kódunk tiszta és jól olvasható. Vessen egy pillantást a két alábbi HTML, jó kódot könnyebben érzékelhető és érthető.
A következő gyakorlati értéke azonosítók és osztályok
Értékteremtés azonosítók és osztályok lehetnek az egyik legnehezebb része az írás HTML. Ezek az értékek gyakorlati, kapcsolódó tartalom, ahelyett, hogy az ő stílusa. Az érték piros leírni a piros szöveg nem ideális, mivel ez írja le a megjelenése a tartalmat. Ha valaha is kell változtatni a stílusát, a szöveg kék, meg kell változtatni, nem csak a CSS, HTML, hanem minden esetben, amikor az osztály találkozik piros.
Az alábbiakban azt feltételezzük, HTML, ami egy piros figyelmeztetés. Azonban, ha a figyelmeztető stílus változik narancssárga, piros osztály nevét értelmetlen lesz, és valószínűleg zavart okozhatnak.
Használja alt szöveget képek
Képek minden esetben tartalmaznia kell egy alt attribútummal. Képernyőolvasók és egyéb szoftverek támaszkodnak az alt attribútumot. hogy egy kontextust a képeket.
Alt attribútum értéke, azt kell leírni, hogy tartalmaz egy képet. Ha a kép nem tartalmaz semmit a kortárs, alt attribútum az is engedélyezni kell, de az ár-érték kell, hogy legyen üres a képernyő olvasó figyelmen kívül hagyta, és nem olvassa el a nevét a képfájl.
Továbbá, ha a kép nem szerepel a fontos jelentése van, ez lehetséges, például a része a felhasználói felület, ha ez lehetséges, hogy tartalmazza a CSS a háttérképet, és nem mint egy elem .
Külön tartalmakat stílus
Soha, soha nem használja belső stílusok a HTML. Ez olyan oldalakat, amelyek túl sokáig betölteni, nehéz fenntartani, és okozhat fejfájást a tervezők és fejlesztők. Ehelyett használja a külső stíluslapok segítségével osztályokat target sejtek, és hogyan kell használni stílusokat.
Itt rossz kódot a kívánt változtatásokat a stílus kell végezni HTML. Következésképpen ezek a stílusok nem lehet újra felhasználni, és valószínű, hogy szenvednek a következetesség a stílus.
Kerülje a felesleges
HTML írásakor ez könnyen elragadtatva, hozzáadunk egy elemet
Itt elem ott, az építőipar minden szükséges stílusokat. Annak ellenére, hogy működik, és hozzáteszi, egy kicsit felfújni az oldalon, a végén nem vagyunk biztosak abban, hogy minden elem Ez nem.
Meg kell tenni mindent, hogy tartsa be a kódot a kis- és csökkenti a jelölés, amely összeköti több stílus egyik eleme, ha lehetséges. Ezen kívül, meg kell használni megfelelő szerkezeti elemek HTML5.
Folyamatosan átszervezi kód
Idővel, weboldalak és mögöttes kód folyamatosan fejlődik és növekszik, maga mögött hagyva egy kicsit a szemetet. Ne felejtsük el, hogy távolítsa el a régi kódot és stílusok, mint szükséges, ha az oldal szerkesztésekor. Szintén időt arra, hogy értékelje és átszervezi a kód után ez volt írva, meg a módját, hogy csökkentsék, és hogy kezelhetőbb.
Írásmódszereken CSS
Mint a HTML, CSS írástechnikák középpontjában tartani a kód egyszerű és jól szervezett. CSS is tartalmaz további kapcsolódó elveket néhány finomságok a nyelvet.
CSS írjon egy pár sort és terek
Írásakor CSS fontos lenne minden választó és egy leírást a szabályok egy új sorban. Ezután az egyes választó akarunk francia leírások.
Miután a választó és a leírás első megy nyitó zárójel, amelynek tartalmaznia kell a hely előtt. A leírásban meg kell tenni egy hely után a vastagbélben, akkor van egy ingatlan, és pontosvesszővel végződjön.
Használja a megfelelő osztály nevét
osztály nevét (vagy értékek) kell lennie, moduláris és kezelésére tartalom elemen belül, és nem a megjelenése, amennyire csak lehetséges. Ezeket az értékeket kell írni, oly módon, hogy hasonlítanak a CSS szintaxis. Ennek megfelelően, az osztály nevét kisbetűkkel kell írni, és használja a kötőjel egy elválasztó.
MARSHALL helyes szelektor
CSS szelektorból kikerültek az ellenőrzés, ha nem gondosan karbantartott. Selectors könnyen válhat túl hosszú és túl konkrét.
Minél hosszabb és választó magában finomítások, annál nagyobb a specificitása. Minél magasabb a sajátosság, annál valószínűbb, hogy a választó megtöri CSS kaszkád és nem kívánt problémákat.
Ezen túlmenően, sajátos jellegének fenntartása a szelektor a lehető legalacsonyabb, ne használja azonosítókat szelektorokban. Azonosítók túl konkrét, gyorsan fel a specificitás a szelektor és gyakran megsértik a kaszkád CSS-fájlok. Hátrányok azonosítók messze felülmúlják azok előnyeit és bölcs dolog lenne, hogy elkerülje őket.
Vegyünk egy rövidebb és többnyire egyenes szelektor. Adja csak két vagy három szinten a beruházások, és távolítsa el a túl hosszú szelektor, amennyire csak lehetséges.
Használjunk konkrét osztályok, ha szükséges
Vannak esetek, amikor a CSS-választó olyan hosszú és sajátos, hogy többé nem hordoz jelentést. Ez létrehoz egy késéssel teljesítmény és futás közben. Ebben az esetben célszerű használni egy osztályban. Alkalmazási osztály a cél elemet hozhat létre több kódot HTML, de lehetővé teszi a kód jelenik meg gyorsabban és távolítson el minden akadályt a kontroll.
Például, ha az elem ágyazott az elem belsejében
Használja rövidített tulajdonságok és értékek
Az egyik jellemzője CSS használatának lehetősége rövidítései tulajdonságokat és értékeket. A legtöbb tulajdonságok és értékek lehetővé teszik egy rövidített helyesírást. Példaként írása helyett négy különböző tulajdonságok alapján margin- és azok értékeit beállítás padding körül mind a négy oldalán az elem, hogy egyetlen tulajdonság árrés. amely meghatározza az értékeket mind a négy oldalról egyszerre. A rövidített változat lehetővé teszi, hogy gyorsan azonosítani és meghatározni stílusokat.
Ugyanakkor, ha szeretné telepíteni egy értéket, akkor ne használja a rövidített változata. Ha egy szerelvény csak az alsó határát. Használjon egy margin-bottom tulajdonság. Ez biztosítja, hogy más értékek tőkéje nem lehet felülírni, és könnyen meghatározhatják az alkalmazandó árrés nem sok kognitív erőfeszítést.
Használja rövidített hexadecimális színértéket
Ha lehetséges, használjon egy rövidített trohsimvolnoe hexadecimális színkód érték, és a mindig írni kisbetűs karaktereket hexadecimális szín értékét. Az ötlet, újra, hogy maradjon következetes a félreértések elkerülése végett, és kódolási szintaxis.
Csepp egységek értéke nulla
Az egyik módszer csökkentésére mennyiségű egyszerű CSS írásakor - eltávolítását egységek értéke nulla. Nem számít, hogy melyik egység hossza alkalmazott - a pixelek, százalékok, em, stb -. Zero mindig nulla. hozzáadunk egy nem szükséges, és nem vállal semmilyen hozzáadott értéket.
Csoportosítása és összehangolja az eladóval változat előtagokat
Attól függően, hogy hol az előtag az eladóval verzió - az ingatlan, vagy értéket, az összehangolás lehet változtatni. Például, a következő kódot ment egy jó hátteret tulajdonság igazodik a bal oldalon, míg a lineáris-gradiens () funkció előtagokat tolódnak úgy, hogy azok értékeket állítjuk be függőlegesen. Ezután doboz méretezése ingatlan látva az tolódnak, hogy azok voltak felszerelve függőlegesen.
Mint mindig, a cél -, hogy a stílus könnyebben olvasható és szerkeszthető.
eladó változat előtagok
Amikor egy előtagot, meg kell bizonyosodni arról, hogy a változat egy tulajdonság vagy érték előtag nélkül a végén, miután az összes változat az előtagot. Ez biztosítja, hogy a böngészők, amelyek támogatják a változat az előtag nélkül megjeleníti a stílus szerint a végeredmény a lépcsőzetes olvasás stílusok tetején a fájl aljára.
Modularitás stílusok újrafelhasználásra
CSS épül, amely lehetővé teszi, hogy újra stílusok, különösen osztályok segítségével. Emiatt a stílusok rendelt osztály, legyen moduláris és áll rendelkezésre megosztásra az elemek között, ha szükséges.
Ha a hírek rovatban képviselteti magát a blokkot, amely magában foglalja a határok, a háttér színe, és egyéb stílusok, osztály hírek tűnhet egy jó lehetőség. Ugyanakkor ugyanez a stílus is alkalmazható a közelgő események listája. Class hír nem megfelelő ebben az esetben. Class feat-box lenne több értelme, és széles körben lehet használni az egész oldalon.
Remélhetőleg, az elvek az írás szép HTML és CSS egyre világosabb. Bár minden nyelven saját összetettségét, a legtöbb ilyen módszer lehet osztani a két nyelv között, valamint számos más programozási nyelveket.
Személy szerint meg kell tennünk mindent azért, hogy támogassa ezeket az elveket, miközben dolgozik a csapat, azt is meg kell tenni mindent, hogy a vonat egy csapat ezeket a technikákat. Másfelől, a csapat is értékes javaslatokat és módszereket, amit követnie kell.
Kiemelni a fő témája a leckét, a HTML és CSS kell mindig:
Ezek a módszerek csak a kezdet, és mivel nyelv fejlődik, és mi írásban egyre HTML és CSS, akkor dolgozzon ki új módszereket. Ez mind része a csodálatos tudás HTML és CSS.
Most van felfegyverkezve néhány erős ismerete, hogyan kell létrehozni weboldalak HTML és CSS, és örülök, hogy látom, hogy csinálsz velük. Értesíts, hogy hogyan történik, és a sikeres létrehozása te!
Források és linkek
Minden lecke tartalmaz egy sor források további tanulás és felfedezés. Az alábbiakban meghatározott egy hosszú listát a források és hasznos linkeket.
HTML és CSS
tervezési ötleteket
Keretek és stílus kalauz
HTML írásakor ez könnyen elragadtatva, hozzáadunk egy elemet
Meg kell tenni mindent, hogy tartsa be a kódot a kis- és csökkenti a jelölés, amely összeköti több stílus egyik eleme, ha lehetséges. Ezen kívül, meg kell használni megfelelő szerkezeti elemek HTML5.
Folyamatosan átszervezi kód
Idővel, weboldalak és mögöttes kód folyamatosan fejlődik és növekszik, maga mögött hagyva egy kicsit a szemetet. Ne felejtsük el, hogy távolítsa el a régi kódot és stílusok, mint szükséges, ha az oldal szerkesztésekor. Szintén időt arra, hogy értékelje és átszervezi a kód után ez volt írva, meg a módját, hogy csökkentsék, és hogy kezelhetőbb.
Írásmódszereken CSS
Mint a HTML, CSS írástechnikák középpontjában tartani a kód egyszerű és jól szervezett. CSS is tartalmaz további kapcsolódó elveket néhány finomságok a nyelvet.
CSS írjon egy pár sort és terek
Írásakor CSS fontos lenne minden választó és egy leírást a szabályok egy új sorban. Ezután az egyes választó akarunk francia leírások.
Miután a választó és a leírás első megy nyitó zárójel, amelynek tartalmaznia kell a hely előtt. A leírásban meg kell tenni egy hely után a vastagbélben, akkor van egy ingatlan, és pontosvesszővel végződjön.
Használja a megfelelő osztály nevét
osztály nevét (vagy értékek) kell lennie, moduláris és kezelésére tartalom elemen belül, és nem a megjelenése, amennyire csak lehetséges. Ezeket az értékeket kell írni, oly módon, hogy hasonlítanak a CSS szintaxis. Ennek megfelelően, az osztály nevét kisbetűkkel kell írni, és használja a kötőjel egy elválasztó.
MARSHALL helyes szelektor
CSS szelektorból kikerültek az ellenőrzés, ha nem gondosan karbantartott. Selectors könnyen válhat túl hosszú és túl konkrét.
Minél hosszabb és választó magában finomítások, annál nagyobb a specificitása. Minél magasabb a sajátosság, annál valószínűbb, hogy a választó megtöri CSS kaszkád és nem kívánt problémákat.
Ezen túlmenően, sajátos jellegének fenntartása a szelektor a lehető legalacsonyabb, ne használja azonosítókat szelektorokban. Azonosítók túl konkrét, gyorsan fel a specificitás a szelektor és gyakran megsértik a kaszkád CSS-fájlok. Hátrányok azonosítók messze felülmúlják azok előnyeit és bölcs dolog lenne, hogy elkerülje őket.
Vegyünk egy rövidebb és többnyire egyenes szelektor. Adja csak két vagy három szinten a beruházások, és távolítsa el a túl hosszú szelektor, amennyire csak lehetséges.
Használjunk konkrét osztályok, ha szükséges
Vannak esetek, amikor a CSS-választó olyan hosszú és sajátos, hogy többé nem hordoz jelentést. Ez létrehoz egy késéssel teljesítmény és futás közben. Ebben az esetben célszerű használni egy osztályban. Alkalmazási osztály a cél elemet hozhat létre több kódot HTML, de lehetővé teszi a kód jelenik meg gyorsabban és távolítson el minden akadályt a kontroll.
Például, ha az elem ágyazott az elem belsejében
Használja rövidített tulajdonságok és értékek
Az egyik jellemzője CSS használatának lehetősége rövidítései tulajdonságokat és értékeket. A legtöbb tulajdonságok és értékek lehetővé teszik egy rövidített helyesírást. Példaként írása helyett négy különböző tulajdonságok alapján margin- és azok értékeit beállítás padding körül mind a négy oldalán az elem, hogy egyetlen tulajdonság árrés. amely meghatározza az értékeket mind a négy oldalról egyszerre. A rövidített változat lehetővé teszi, hogy gyorsan azonosítani és meghatározni stílusokat.
Ugyanakkor, ha szeretné telepíteni egy értéket, akkor ne használja a rövidített változata. Ha egy szerelvény csak az alsó határát. Használjon egy margin-bottom tulajdonság. Ez biztosítja, hogy más értékek tőkéje nem lehet felülírni, és könnyen meghatározhatják az alkalmazandó árrés nem sok kognitív erőfeszítést.
Használja rövidített hexadecimális színértéket
Ha lehetséges, használjon egy rövidített trohsimvolnoe hexadecimális színkód érték, és a mindig írni kisbetűs karaktereket hexadecimális szín értékét. Az ötlet, újra, hogy maradjon következetes a félreértések elkerülése végett, és kódolási szintaxis.
Csepp egységek értéke nulla
Az egyik módszer csökkentésére mennyiségű egyszerű CSS írásakor - eltávolítását egységek értéke nulla. Nem számít, hogy melyik egység hossza alkalmazott - a pixelek, százalékok, em, stb -. Zero mindig nulla. hozzáadunk egy nem szükséges, és nem vállal semmilyen hozzáadott értéket.
Csoportosítása és összehangolja az eladóval változat előtagokat
Attól függően, hogy hol az előtag az eladóval verzió - az ingatlan, vagy értéket, az összehangolás lehet változtatni. Például, a következő kódot ment egy jó hátteret tulajdonság igazodik a bal oldalon, míg a lineáris-gradiens () funkció előtagokat tolódnak úgy, hogy azok értékeket állítjuk be függőlegesen. Ezután doboz méretezése ingatlan látva az tolódnak, hogy azok voltak felszerelve függőlegesen.
Mint mindig, a cél -, hogy a stílus könnyebben olvasható és szerkeszthető.
eladó változat előtagok
Amikor egy előtagot, meg kell bizonyosodni arról, hogy a változat egy tulajdonság vagy érték előtag nélkül a végén, miután az összes változat az előtagot. Ez biztosítja, hogy a böngészők, amelyek támogatják a változat az előtag nélkül megjeleníti a stílus szerint a végeredmény a lépcsőzetes olvasás stílusok tetején a fájl aljára.
Modularitás stílusok újrafelhasználásra
CSS épül, amely lehetővé teszi, hogy újra stílusok, különösen osztályok segítségével. Emiatt a stílusok rendelt osztály, legyen moduláris és áll rendelkezésre megosztásra az elemek között, ha szükséges.
Ha a hírek rovatban képviselteti magát a blokkot, amely magában foglalja a határok, a háttér színe, és egyéb stílusok, osztály hírek tűnhet egy jó lehetőség. Ugyanakkor ugyanez a stílus is alkalmazható a közelgő események listája. Class hír nem megfelelő ebben az esetben. Class feat-box lenne több értelme, és széles körben lehet használni az egész oldalon.
Remélhetőleg, az elvek az írás szép HTML és CSS egyre világosabb. Bár minden nyelven saját összetettségét, a legtöbb ilyen módszer lehet osztani a két nyelv között, valamint számos más programozási nyelveket.
Személy szerint meg kell tennünk mindent azért, hogy támogassa ezeket az elveket, miközben dolgozik a csapat, azt is meg kell tenni mindent, hogy a vonat egy csapat ezeket a technikákat. Másfelől, a csapat is értékes javaslatokat és módszereket, amit követnie kell.
Kiemelni a fő témája a leckét, a HTML és CSS kell mindig:
Ezek a módszerek csak a kezdet, és mivel nyelv fejlődik, és mi írásban egyre HTML és CSS, akkor dolgozzon ki új módszereket. Ez mind része a csodálatos tudás HTML és CSS.
Most van felfegyverkezve néhány erős ismerete, hogyan kell létrehozni weboldalak HTML és CSS, és örülök, hogy látom, hogy csinálsz velük. Értesíts, hogy hogyan történik, és a sikeres létrehozása te!
Források és linkek
Minden lecke tartalmaz egy sor források további tanulás és felfedezés. Az alábbiakban meghatározott egy hosszú listát a források és hasznos linkeket.