Det finns tusentals bloggar och självstudiekurser hemsidor finns på Internet, men inte all information är användbar eller av god kvalitet. I denna artikel Vi visar dig 5 sätt att hålla din kod webbläsare, användar-och sökmotorvänliga. Håll följa detta några steg, och jag definitivt att det kommer hjälper dig för din kommande sajt projektet. Enjoy it!

1. Skriv clean code

Skriva rent kod kommer att vara lätt att underhålla och mindre ont för dig och andra.

Felkoderna

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

Kodex

  <! - / OMSLAG \ ->
 > <div id = "Wrapper">

 <! - / MAIN CONTAINER \ ->
 > <div id = "MainContainer">

 <! - / HEADER \ ->
 > </div> <div id = "Header"> </ div>
 <! - \ HEADER CLOSE / ->

 <! - / Innehåll \ ->
 > </div> <div id = "Content"> </ div>
 <! - \ CONTENT CLOSE / ->
 
 </ div>
 <! - \ Main CONTAINER CLOSE / ->

 </ div>
 <! - \ KORSBAND CLOSE / -> 

2. Använd rätt DOCTYPE

Om du inte använder DOCTYPE (dokumenttyp förklaring) tag, webbsidorna visas inte i Standardiserad sätt och kan leda till något underligt webbsidor.

3. Använd Rubrik Märken och onumrerad lista

Använd Rubrik Märken och onumrerad lista istället spacer grafik och nästlade tabeller ..

Felkoderna

Kodex

 Content xyz </li> <li> Content xyz </li> <li> Content xyz </li> <li> Content xyz </li> </ul> </div> <div> <h2> Rubrik </ h2> <ul> <li> innehåll xyz </ li> <li> innehåll xyz </ li> <li> innehåll xyz </ li> <li> innehåll xyz </ li> </ ul> </ div> 

4. Använd semantiskt meningsfull klass & ID-namn

Använd om möjligt klass och ID-namn som är semantiskt meningsfull och sök-vänlig. Exempel:

Felkoderna

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

Kodex

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

5. Undvik IE dubbla float-marginal, Använd display: inline för flöt element

Undvik IE dubbla float-marginal och text buggar strecksatsen med hjälp av display: inline för flöt element.

Felkoderna

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

Kodex

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

Slutsats

Dessa är bara några av de tips som hjälper mig att skriva bättre kod. Jag hoppas att handledning också hjälper dig att skriva bättre och ren kod. Använd dessa tips för att din nuvarande och nästa projekt, och du kommer säkert uppskattar de ansträngningar.

Om du tror att handledning kan vara bättre, Vänligen dela med oss. Kommentar oss

Om du vill få fler tips från oss, vänligen överväga att prenumerera på vårt foder genom RSS eller e-post.