Több ezer oktatóanyagok blogok és weboldalak elérhetők az interneten, de nem minden információ hasznos, vagy jó minőségű. Ebben a cikkben megmutatom 5 módon tartsa be a kódot böngésző, a felhasználó és keresőbarát. Tartsa kövesse ezt a néhány lépést, és én határozottan biztos abban, hogy majd segít itt a következő projekt weboldalán. Enjoy it!

1. Írj clean code

Írás tiszta kód könnyen karbantartható és kisebb a fájdalom az Ön és mások.

Rossz kód

  > <div id = "Wrapper">
 > <div id = "MainContainer">
 > </div> <div id = "Header"> </ div>
 > </div> <div id = "Content"> </ div>
 </ div>
 </ div> 

Jó kód

 = "Wrapper" > <!-- / MAIN CONTAINER \ --> <div id = "MainContainer" > <!-- / HEADER \ --> <div id = "Header" > </div> <!-- \ HEADER CLOSE / --> <!-- / CONTENT \ --> <div id = "Content" > </div> <!-- \ CONTENT CLOSE / --> </div> <!-- \ MAIN CONTAINER CLOSE / --> </div> <!-- \ WRAPPER CLOSE / --> <! - / Csomagolóanyag \ -> <div id = "Wrapper"> <! - / FŐ KONTÉNER \ -> <div id = "MainContainer"> <! - / HEADER \ -> <div id = "Header"> </ div> <! - \ HEADER CLOSE / -> <! - / CONTENT \ -> <div id = "Content"> </ div> <! - \ CONTENT CLOSE / -> </ div> <! - \ FŐ KONTÉNER CLOSE / -> </ div> <! - \ csomagolóanyag CLOSE / -> 

2. Használja a helyes DOCTYPE

Ha nem használja a DOCTYPE (dokumentum-deklaráció) tag, a web-oldalak nem jelennek meg az előírásoknak megfelelő módon és vezethet valami furcsa weblapokat.

3. Megnevezés és használat Tags Rendezetlen listák

Megnevezés és használat Tags Rendezetlen lista, nem pedig spacer grafikus és beágyazott táblázatok ..

Rossz kód

Jó kód

 Content xyz </li> <li> Content xyz </li> <li> Content xyz </li> <li> Content xyz </li> </ul> </div> <div> <h2> címsor </ h2> <ul> <li> Content xyz </ li> <li> Content xyz </ li> <li> Content xyz </ li> <li> Content xyz </ li> </ ul> </ div> 

4. Használja szemantikailag értelmes osztályú & ID neveket

Amikor csak lehetséges, az osztály nevét és azonosító, amely szemantikailag értelmes és search-friendly. Például:

Rossz kód

  > <ul class = "blue">
 <li> Error 1 </ li>
 <li> Error 2 </ li>
 </ ul> 

Jó kód

  > <ul class = "Error">
 <li> Error 1 </ li>
 <li> Error 2 </ li>
 </ ul> 

5. Kerülje az IE dupla úszó-margin, használata Display: inline a lebegtek elemek

Kerülje az IE dupla úszó-margin és szöveges franciabekezdés hibákat használatával display: inline lebegett az elemeket.

Rossz kód

  # content (
 ; float: left;
 ; width: 300px;
 ; padding: 4px 7px;
 ; a margin-left: 20px;
 ) 

Jó kód

  # content (
 ; float: left;
 ; width: 300px;
 ; padding: 4px 7px;
 ; a margin-left: 20px;
 ; display: inline;
 ) 

Következtetést

Ez csak néhány a tipp, hogy segítsen nekem, hogy jobb kódot írni. Remélem, hogy a tutorial is segíteni fogja írni, hogy a jobb és a tiszta kódot. Tippek, hogy alkalmazzák ezeket a jelenlegi és a következő projekteket, és akkor biztosan értékelni az erőfeszítéseket.

Ha úgy gondolja, hogy tutorial nagyobb lehet, jobban, kérjük ossza meg velünk. Hozzászólás minket

Ha szeretne további tippeket kapni tőlünk, kérjük, fontolja meg a feliratkozást a feedre az RSS, vagy e-mailben.