Web前端：11個讓你代碼整潔的原則

時間 2019-12-06

標籤 web 前端讓你代碼整潔原則欄目 HTML 简体版

原文原文鏈接

寫Web頁面就像咱們建設房子同樣，地基牢固，房子纔不會倒。一樣的，咱們製做Web頁面也同樣，一個良好的HTML結構是製做一個美麗的網站的開始，一樣的，良好的CSS只存在一樣良好的HTML中，因此一個乾淨的，語義的HTML的優勢不少，那麼平時製做中，咱們作到了這一點嗎？咱們一塊兒來看一張圖片： javascript

上圖展現了兩段代碼，我想你們都只會喜歡第一種，咱們先不說其語義，至少他的結構讓咱們看上去清爽，而第二種呢？一看就是糟糕的代碼的代碼，讓人討厭的代碼。那麼要怎麼樣才能寫出一個好的代碼，整潔的代碼呢？下面咱們就從如下十二個方面一塊兒來學習，只要你們之後在寫代碼的時候能堅持下面的十二個原則，保準你的代碼質量能上去，並且你寫的代碼會人見人愛。 php

1、DOCTYPE的聲明 css

若是咱們想作好一件事情，首先要知道咱們有哪些權利去作，就如「DOCTYPE」的聲明，咱們沒有必要去討論是否使用HTML4.01或者XHTML1.0或者說如今的HTML5都提供了嚴格版本或者過渡版本，這些都能很好的支持咱們寫的代碼： html

因爲咱們如今的佈局不須要table佈局也能作出很好的佈局，那麼咱們就能夠考慮不使用過渡型而使用嚴格型的「DOCTYPE」，爲了向後兼容，我建議使用HTML5的聲明模式： java

<!DOCTYPE HTML> web

<html lang="en-US"> 瀏覽器

若是想了解更多這方面的知識，能夠點擊： app

2、字符集和編碼字符 ide

在每一個頁面的開始中，咱們都在<head>中設置了字符集，咱們這裏都是使用「UTF-8」 svn

  
 
   <meta charset="UTF-8" />

並且咱們在平時寫頁面中時，時常會碰到"&"這樣的符號，那麼咱們不該該直接在頁面這樣寫「&」:

咱們應該在代碼中使用字符編碼來實現，好比說「&」咱們在代碼中應該使用「&」來代替他。

若是想了解更多這方面的知識，能夠點擊：

3、正確的代碼縮進

在頁面編輯中，代碼的縮進有沒有正確，他不會影響你網站的任何功能，但要是你沒有一個規範的縮進原則，讓讀你代碼的人是很是的生氣，因此說正確的代碼縮進能夠加強你的代碼可讀性。標準程序的縮進應該是一個製表符（或幾個空格），形像一點的咱們來看下文章開頭那張圖，或者一塊兒來看下面展現的這張圖，你看後就知道之後本身的代碼要怎麼樣書寫才讓人看了爽：

不用說，你們都喜歡下面的那種代碼吧。這只是一我的的習慣問題，不過建議從開始作好，利人利已。有關於這方面的介紹，你們還能夠參考：Clean up your Web pages with HTML TIDY。

4、外鏈你的CSS樣式和Javascript腳本

頁面中寫入CSS樣式有不少種方法，有些直接將樣式放入頁面的「<head>」中，這將是一個很很差的習慣，由於這樣不只會搞亂咱們的標記，並且這些樣式只適合這一個HTML頁面。因此咱們須要將CSS單獨提出，保存在外部，這樣後面的頁面也能夠連接到這些樣式，若是你頁面須要修改，咱們也只須要修改樣式文件就能夠。正以下圖所示：

上面咱們所說的只是樣式，其實javascript腳本也和CSS樣式是同同樣的道理。圖文並說，我最終想表達的意思是「在製做web頁面中，儘可能將你的CSS樣式和javascript腳本單獨放在一個文件中，而後經過連接的方式引用這些文件，這樣作的最大好處是，方便你的樣式和腳本的管理與修改。」

5、正確的標籤嵌套

咱們在寫HTML時老是須要標籤的層級嵌套來幫咱們完成HTML的書寫，但這些HTML的嵌套是有必定的規則的，若是要細說的話，咱們可能要用幾個章節來描述，那麼我今天這裏要說的是，咱們在寫HTML時不該該犯如下這樣的超級錯誤：

上圖的結構咱們是常見的，好比說首頁的標題，那麼咱們就應該注意了，不能把「<h1>」放在「<a>」標籤中，換句話說，就是不能麼塊元素和在行內元素中。上面只是一個例子，只是但願你們在平時的製做中不該該犯這樣的超級錯誤。

6、刪除沒必要要的標籤

首先咱們一塊兒來看一個實例的截圖：

上圖明顯是一個導航菜單的製做，在上圖的實例中：有一個「div#topNav」包住了列表「ul#bigBarNavigation」，而「div」和「ul」列表都是塊元素，加上「div」此處用來包「ul」根本就沒有起到任何做用。雖然「div」的出現給咱們製做web頁面帶來了極大的好處，但咱們也沒有必要處處這樣的亂用，不知道你們平時有沒有注意這樣的細節呢？我是犯這樣的錯誤，若是你也有過這樣的經歷，那麼從今天開始，從如今開始，咱們一塊兒努力來改正這樣的錯誤。

有關於如何正確的使用標籤，你們感興趣的話能夠點擊：Divitis: what it is, and how to cure it.

7、使用更好的命名

這裏所說的命名就是給你的頁面中相關元素定義類名或者是ID名，不少同窗都有這慄的習慣，好比說有一個元素字體是紅色的，給他加上「red」,甚至佈局都寫「left-sidebar」等，可是你有沒有想過，若是這個元素定義了「red」後，過幾天客戶要求使用「藍色」呢？或者又說，那時的「left-sidebar」邊欄此時不想放在左邊了，而是想放在右邊，那麼這樣一來咱們前面的命名能夠說是一點意義都沒有了，正以下面的一個圖所示：

那麼定義一個好的名就很得要了，不但本身能看懂你的代碼，並且別人也能輕鬆讀懂你的代碼，好比說一個好的類名和ID名「mainNav」、「subNav」、「footer」等，他能描述所包含的事情。很差的呢，好比前面所說的。

若是想了解更多這方面的知識，能夠點擊：

8、離開版本的CSS

咱們在設計菜單時，有時要求全部菜單選項的文本所有大寫，你們平時是否是直接在HTML標籤中就將他們設置成大寫狀態呢？若是是的話，我以爲很差，若是爲了未來具備更好的擴展性，咱們不該該在HTML就將他們設置爲所有大寫，更好的解決方法是經過CSS來實現：

9、定義<body>的類名或ID名

你們平時製做web頁面時不知道有沒有碰到這樣的問題，就是整站下來，使用了相同的佈局和結構，換句話說，你在頁面的佈局上使用了相同的結構，相同的類名，可是忽然你的上級主管說應客戶的需求，有一個頁面的佈局須要邊欄和主內容對換一下。此時你又不想爲了改變一下佈局而修改整個頁面的結構，此時有一個很好的解決辦法，就是在你的這個頁面中的「<body>」中定義一個特殊的類名或ID名，這樣來你就能夠輕鬆的達到你所要的需求。這樣的使用，不知道你們使用過沒有：

給「<body>」定義獨特的類和ID名稱是很是強大的，不只僅是爲了像上面同樣幫你改變佈局，最主要的是有時他能幫你實現頁面中的某一部分達到特殊效果，而又不影響其它頁面的效果。爲何有這樣的功能，不用我說我想你們都是知道的。由於每一個頁面的內容都是「<body>」的後代元素。

若是想了解更多這方面的知識，能夠點擊：

10、驗證你的代碼

人難免會出錯，咱們編寫代碼的時候也是同樣的，你有時候總會小寫或多寫，好比說忘了關閉你的元素標籤，不記得寫上元素必須的屬性，雖然有一些錯誤不會給你帶來什麼災難性的後果，但也難免會給你帶來你沒法意估的錯誤。因此建議您寫完代碼的時候去驗證你一下你的代碼。驗證後的代碼老是比不驗證的代碼強：

爲一有效的驗證你的代碼，咱們可使用相關的工具或者瀏覽器的插件來幫助咱們完成。若是你的代碼沒有任何錯誤，W3C驗證工具會在大家面前呈現綠色的文字，這樣讓你是無比的激動人心，由於再次證實了你寫的代碼經得起W3Ｃ的標準。

若是想了解更多這方面的知識，能夠點擊：

11、邏輯順序

這是一個不多見的錯誤狀況，由於我想你們寫頁面都不會把邏輯順序打亂，換句話說，若是可能的話，讓你的網站具備一個前後邏輯順序是最好的，好比說先寫頁頭，在寫頁體，最後寫頁腳。固然有時也會碰到特殊狀況，如何頁腳部分在於咱們代碼的邊欄以上，這多是由於它最適合你的網站設計需求，這樣或許是能夠理解的，可是若是你有別的方式實現，咱們都應該把頁腳是放在一個頁面的最後，而後在經過特定的技術讓它達到你的設計需求：

上面咱們一塊兒討論了多個如何讓你開始寫一個整潔的HTML代碼。從一個項目的開始，這一切都是很是容易的，可是若是須要你去修復一個現有的代碼，那多少都會有必定的難度。上面說這麼多主要是告訴您將要如何學習編寫一個良好的、整潔的HTML代碼，而且一直堅持這樣的編寫。但願讀完這篇文章後，在你的下一個項目中，能從頭開始，堅持寫一個整潔的HTML代碼。