Html 30 fontos szabályt kezdőknek
A legnehezebb aspektusa a tartalom Nettuts hely + adaptív különböző szintű felhasználói ismeretek. Ha megjelenik túl sok tanulsággal haladó szinten, kezdő felhasználók számára nem fog tetszeni. Ennek az ellenkezője igaz. Mindent megteszünk azért, hogy rajtunk múlik, azonban soha nem habozott emlékeztetni, ha úgy érzik, hogy el lehet felejteni. Ez az oldal elsősorban az, hogy kifejezze a véleményét! A fentieket figyelembe véve, a mai lecke lesz, ami kifejezetten azoknak, akik csak ömlött a webes programozás. Ha csak egy év, vagy kevesebb tapasztalattal, reméljük, hogy néhány tipp itt felsorolt segítségével válik egy jobb és gyorsabb!
Új ebben a kategóriában:
Tehát nézzük meg késedelem nélkül 30 fontos szabályt figyelembe kell vennie oldalak létrehozása.
1: Mindig zárja be a címkéket
Ha valami nem szokatlan, és ezeket a linkeket:
Megjegyezzük, hogy az UL / OL héj címke elhagyható. Ezen kívül sok is inkább, hogy ne zárja címke LI. A mai szabványoknak ez csak tisztességtelen gyakorlatot és el kell kerülni a 100% -ot. Mindig, mindig zárja be a címkéket. Ellenkező esetben, az érvényesítési problémák merülnek fel minden lépésnél.
Hogyan lehet, hogy jobban
2: Állítsa be a helyes DocType
Amikor fiatalabb voltam, néha leült CSS fórumokon. És mindig, amikor egy felhasználó egy kérdés, mielőtt meg minket, volt, hogy két dolgot az első:
Érvényesnek, a CSS fájlban. Fix minden hibát. Add a doctype
„Tedd, mielőtt a DOCTYPE html nyitó címke a lap tetején, és azt mondja a böngészőnek, hogy tartalmazza az oldal - HTML, XHTML, vagy mindkettő, úgy, hogy helyesen megjeleníteni az elrendezést.”
Most használ négy különböző doctype ha új oldalakat.
Most van egy heves vita, hogy a helyes választás ebben a helyzetben. Eleinte azt gondolták, hogy a legjobb megoldás az, hogy az változatának XHTML Strict. Azonban, miután egy kis kutatást, nyilvánvalóvá vált, hogy a legtöbb böngésző megy vissza a normál HTML feldolgozása során ezeket az oldalakat. Emiatt sokan úgy dönt, hogy használja a HTML 4.01 Strict helyett. Lényegében az összes ilyen lehetőséget kapsz ellenőrzés. Fedezze fel a környezetet, és válaszd a saját
3: Soha ne használja a mellékelt stílusok
Néha, amikor nehéz lehet, hogy dolgozzon ki egy elrendezést, akkor érdemes lehet a könnyebbik utat, és helyezzen be egy kis stílust
Természetesen - úgy néz ki, teljesen ártalmatlanok. Azonban ez vezet a hibakódok.
Ez a kereszt gerendák a Szellemirtók. Ez csak egy rossz ötlet. -Chris Koyer (Chris Coyier) (amiről ez nem látható.)
Ehelyett, töltse ki a sablont, majd ad egy linket erre tag P egy külső CSS fájlban.
Hogyan lehet, hogy jobban
4: Tegyük az összes külső CSS fájlokat belül HEAD tag
Technikailag, akkor tegye a stíluslapot sehol. Azonban HTML specifikáció ajánlja helyezi őket a HEAD tag a dokumentumot. A legfontosabb előnye ennek az, hogy az oldalak gyorsabban betöltődik.
Amikor megvizsgáltuk proizoditelnost a Yahoo. azt tapasztaltuk, hogy a mozgó stíluslapok a dokumentum HEAD teszi az oldalak betöltése gyorsabb. Ez azért van, mert a szoba stíluslapok a HEAD lehetővé teszi az oldal betöltése fokozatosan. - YSlow csapat
Ha az egyetlen célja a JS fájl hozzá funkciót oldal - például, amikor egy gomb megnyomása - nyugodtan tegye ezeket a fájlokat a az oldal alján, közvetlenül a záró címke szervezetben. Ez a legjobb megoldás.
Hogyan lehet, hogy jobban
Egy másik gyakori gyakorlat a múltban, hogy a csapat közvetlenül a JS címkéket. Gyakran használják az egyszerű képgalériák. Lényegében tag egyszerűen kisajátította attribútum „onclick”. Jelentősége egyenlő a JS eljárást. Mondanom sem kell, hogy ez soha nem szabad tenni. Ehelyett viszont a kódot egy külső JS fájlt, és használja a „addEventListener / attachEvent”, hogy „hallgatni” a kívánt eseményt. Vagy, ha egy ilyen keretet, mint a jQuery, egyszerűen használja a „click” módszerrel.
7: Mindig ellenőrizze az érvényesség
Nemrég írta blogjában arról, hogy a szóban forgó érvényesítés teljesen félreértik azokat, akik nem teljesen értik a célját. Amint azt a cikkben említett, „érvényesítés működnie kell az Ön számára, nem ellene.”
Azonban főleg az elején, azt javasoljuk, hogy töltse le a Web Developer Toolbar, és folyamatosan használja a terméket érvényesítése „HTML” (ellenőrizze a HTML), és a „érvényesítése CSS”. Bár CSS és könnyen megtanulják a nyelvet, akkor is, hogy ha szakad ki a hajad. Is, akkor gyakran meg arról, hogy a rossz minőségű jelölést eredményezett furcsa terek az oldalon. Ezért ellenőrizze, ellenőrizze és ellenőrizze újra.
8: Letöltés Firebug
9: A Firebug!
Az én tapasztalataim szerint a legtöbb ember használja Firebug csak 20% -os kapacitással. Valóban csinál magának egy rossz. Töltsön el egy pár órát, és keresse meg a hálózat, minden érdemes anyag a témában.
10: Minden címkét kell kisbetűs
Technikailag, akkor ezt a címkéket nagybetűvel.
Másrészt, ne csináld. Ez nem szolgál semmilyen célt, és fáj a szeme - nem beszélve arról, hogy ez eszembe a funkciók html Microsoft Word!
Hogyan lehet, hogy jobban
11: A H1 tag - H6
Azt kell mondanom, hogy ez olyasmi, amit gyakran elfelejtik. A legjobb, ha mind a hat ilyen címkék. Hogy őszinte legyek, én szoktam használni az első négy, de dolgozom rajta. Hogy javítsa a szemantikai és a SEO Honlap kényszeríteni magát, hogy cserélje ki a P tag bármilyen alkalmas H.
12: Amikor létrehoz egy blogot, üzletek H1 fejléc
Megkérdeztem a követői, ha megfelelőnek ítélik meg használni H1 egy logó, vagy használni azt a címet. Mintegy 80% -a tweet került vissza az utóbbi javára opciót.
Ahogy minden más határozza meg, mi a legjobb, hogy a webhely. Azonban, ha létrehoz egy blog, azt javasoljuk, hogy lefektették a H1 tag a cikk címe. Okokból SEO, véleményem szerint a legjobb megoldás.
13: Letöltés YSlow
Különösen az utóbbi években, a Yahoo csapat tett egy igazán nagy munka a környéken. Nem is olyan régen megjelent egy kiegészítője a Firefox nevű YSlow. Kapcsold be, és elemezni fogja a weboldalt, és így „jelentés kártya”, hogy írja le részletesen a területeken a helyszínen, hogy javítani kell. Lehet, hogy ez egy kicsit kemény, és mégis az előny. Én nagyon ajánlom ezt a kiegészítőt
14: A navigációs sáv zárt rendezetlen listát
Minden honlap legalább némi hasonlóság a navigációs menü. Talán tudod intézni az alábbiak szerint:
Én nem ajánlom ezt a módszert a szemantikai megfontolások. Az Ön feladata, hogy megteremtse a legjobb kódot, amit képesek.
Miért készít egy listát a navigációs linkek, mint bármely más, csak a rendezetlen lista?
Feltételezzük, hogy az UL címke tartalmazza az elemek listáját.
Hogyan lehet, hogy jobban
15: Tanulj meg célozzák IE
Előbb-utóbb akkor is átok IE. Ez általában már nélkülözhetetlen eleme a közösség. Amikor elolvastam a Twitter, mint az egyik barátom harci erők IE, én csak mosolygok, és gondolom magamban: „Tudom, hogy mit érzel, haver.”
Az első lépés után létrehozta a fő CSS fájl, hogy hozzon létre egy külön fájlban ie.css. Akkor küldje el csak, azaz a következő kódot.
Ez a kód azt jelenti, hogy „a felhasználó böngésző az Internet Explorer 6-os vagy alacsonyabb, használja ezt a stíluslapot, különben nem csinál semmit.” Ha le szeretné cserélni, és IE7, csak cseréld ki a „lt”, hogy „lte” (kisebb vagy egyenlő)
17: Ha egy webhely készen áll, nyomja meg!
CSS tömörítés szolgáltatások
18: Csökkenteni, csökkenti, csökkenti
Visszatekintve az első honlap, azt hiszem szenvedett formájában fut „divatita”. Először is, a természetes ösztön, hogy lezárja az egyes bekezdés a div. majd kapcsolja vissza egy div, csak abban az esetben. Akkor hamar rájön, hogy rendkívül hatékony.
Befejezése után a minta megy át a szemét többször, és keresni a módját, hogy csökkentsék az elemek száma az oldalon. Vigyázzon, hogy az UL saját div. Azt hiszem, nem feltétlenül.
Csakúgy, mint a kulcs a levél „cut, cut, cut” - igaz sablonokat.
19: Az összes kép igényelnek saját attribútumokat Alt
Ez könnyű alábecsülni a jelentőségét alt attribútum a kép tag. Mindazonáltal nagyon fontos, kényelmi okokból és érvényességének ellenőrzése. Ezért egy pillanatra, hogy töltse ki a címkéket.
Hogyan lehet, hogy jobban
20: Tanulmány az utolsó
Nagyon kétlem, hogy én vagyok az egyetlen, aki egy bizonyos ponton a tanulás valami, körülnézett, és rájöttem, hogy ül egy sötét szobában és az idő valahol a kora reggeli órákban. Ha úgy találja magát hasonló helyzetben, menjen pihenni, és megnyugodhat, hogy már a helyes utat választották
Ezek a csodálatos pillanatokat a nyitó, legalábbis nekem, mindig jön késő este. Ugyanez volt a helyzet, amikor először megértette az elvet a zárójelek Javascrip. Ez egy nagyon kellemes érzés, hogy meg kell próbálnia, ha még nem tapasztalt.
Mi a jobb módja annak, hogy tanulni HTML, de másolni a hősök? Nagyjából mindannyian plagiatchiki! Már lassan kezdjük, hogy saját eljárásokat és módszereket. Ezért nézd meg a helyszínek, akiket tisztelsz. Hogyan látnak egy adott rész? Ismerje meg és követni őket. Mindannyian nem, nem, mint te. (Ne lopj a design, csak tanulni a kódot is)
22: ALL stilizált elemeket
Ez egy nagyon fontos szabály, különösen, ha a munka a kliens. Csak azért, mert nem használja a blockquote elem, ez nem jelenti azt, hogy nem kell a vevőnek. Ne használja rendezett listák? Ez nem azt jelenti, hogy az ügyfél is nem lesz. Tégy magadnak egy szívességet, és hozzon létre egy külön oldalt, hogy megmutassák a stílus minden eleme: ul. ol. o. h1-h6. blockquotes. stb
23: A Twitter
Kezdetben, az alapgondolat a Twitter volt, hogy írjon „mit csinálsz.” Annak ellenére, hogy most is van olyan bizonyos szempontból, Twitter vált egy nagyobb hálózat eszköz az iparágban. Ha egy webfejlesztő tisztelt engem elküldött egy linket egy cikket, hogy ő talált érdekes, hidd el, olvastam is - és akkor kell! Ez az oka annak, hogy az oldalak, mint a Digg egyre több és több bosszantó.
24: tanulni Photoshop
Tény, hogy a Photoshop nagyon valószínű, hogy lesz a legfontosabb eszköz. Miután megtudta, HTML és CSS, azt ajánlom, hogy tanulmányozza a maximális számú Photoshop technikák
25: Tanulmány az egyes HTML tag
Tucatnyi HTML, ami nem fog ütközni a munkájához. Ez azonban nem jelenti azt, hogy nem ismeri őket! Ön ismeri a tag röv példa? És mi a helyzet a idézni? Ezek két tag megérdemlik helyüket a doboz eszközöket. Ismerje meg mindet!
By the way, ha még mindig nem ismeri a két tag:
röv pontosan ezt tőle, és várt. Ő a rövidítést. „Boulevard” lehet csomagolni a rövidítése címke ezt a rövidítést szó „boulevard”.
Oldalak, mint a mi nagyban hozzájárulnak a további növekedés a tudás web design, akkor is! Végül rájött, hogyan kell helyesen elhelyezni az elemeket az oldalon? Hozzon létre egy blogbejegyzést és másokat, hogyan kell csinálni. Mindig lesznek, akik kevésbé van kitéve, mint a tiéd. Nem csak akkor vesz részt a közösség, hanem tanulnak. Soha nem vettem észre, hogy valami tényleg nem értem, amíg te kénytelen megtanulni?
27: A CSS reset
Itt van egy másik kérdés, amelyre a hevesen vita. Visszaállítása CSS: használni, vagy nem használja, ez itt a kérdés. Ha megkérdezzük a személyes tanácsadást, azt 100% javasoljuk, hogy hozzon létre saját kiírása. Akkor kezdődik a letöltés néhány népszerű fájlok, például a fájl Eric Meyer, majd lassan, ahogy tanulni kezdeni átalakítani, hogy a saját. Ha nem, akkor nem igazán értem, miért az elemek listái extra párnázással, hogy nem jelzi sehol a CSS fájlban. Könyörülj idegek és hátrahagyva! Itt meg kell kezdeni.
28: igazítása minden!
29: Szerelje le a PSD
Tehát, ha már van egy szilárd ismerete HTML, CSS és Photoshop. A következő lépés az, hogy megtérít az első PSD fájlt egy működő weboldal. Ne aggódj, ez nem olyan nehéz, mint amilyennek látszik. A jobb módja, hogy alkalmazza a tudást a gyakorlatban, csak elképzelni.
30: Ne használja freymvorki..Poka
CSS Freymvorki Ajánlott haladó fejlesztők számára, akik szeretnék menteni egy kis időt. Ezek nem a kezdők számára.
Kérjük, értékelje ezt a cikket: