上個月因爲想要在學校的內網搭建一個網站，主要提供資源下載和文章分享等內容，買了一個樹莓派B+。把基本的環境搭建好後，寒假一開始我就奮戰在網頁設計的一線上了。幾天的時間雖然不長，也談不上收穫，但也有一些小小的心得總結，寫在這裏和大家分享一下，也給自己留個記錄，以供日後參考。
一、注意代碼風格
這個問題可謂老生常談，不但是網絡前端語言，幾乎各類計算機語言的學習指導裏都少不了這句話，可見其重要性。代碼的個人風格固然體現個性，但有些方面我認爲是每個人都應該做到的。
1、縮進
例如不同級別的標籤相鄰要縮進，有從屬關係的標籤要縮進等等。這些縮進不但能夠增加代碼的美觀性，而且也大大方便了日後的修改工作，也讓別人能夠很容易接手你的工作，提高團隊效率。編寫時敲擊一個Tab鍵的時間能省下以後代碼堆裏查找目標內容的大把時間。
2、換行
對於一個較短的標籤內容，可以在標籤結束後再換行。而當標籤中內容較多，例如一個段落、一個塊級元素的內容，應該儘量考慮使用開始標籤一行，內容一行，結束標籤一行的格式，而且內容行應當使用縮進，以示從屬關係。這也是改進代碼風格的一個重要方面。
3、註釋
在內容繁雜，不能很容易找出一個功能塊時，應該使用註釋標出功能塊範圍，並使用簡潔、淺顯的語言說明該塊的內容。以使代碼文件層次清晰。
同時代碼註釋還可以用於代碼測試。對於兩段待測試的代碼，可以將其中一段註釋掉，測試另一段，測試完畢後再反過來（笨辦法，如有其他方法歡迎討論）。
二、提高代碼重用率
代碼重用是提高代碼編寫效率，增加程序可讀性和可寫性的重要手段。比如CSS的出現就大大解放了網頁前端設計的勞動力。在代碼重用這一點上要特別注意語言中自帶的特性並充分利用。比如CSS中派生類可以覆蓋基類中相同屬性的值，而當同時使用多個CSS文件時，後調用文件中的能屬性夠覆蓋前面文件中相同的屬性等等。具有類似特性的網頁元素可以使用相同的id或class等，再把不同的地方分別寫出或加以覆寫。
順便提到，對於一些代碼中重複出現，而又無法用其他方法加以抽象並自動化輸出的，可以將其共同項複製出來並註釋掉。一旦需要複製使用時可以直接從註釋中複製，省卻了重新寫一遍或者從文檔中提取的麻煩。
三、善用CSS選擇器
CSS的選擇器給我們的代碼賦予了極大的靈活性。我比較常用的有類選擇器、id選擇器和屬性選擇器等。選擇器除了對提高代碼重用率有貢獻以外，還能靈活地對不同特性的”集合“的”交集“進行屬性設定，能夠在賦予元素”共性“的同時又設定”個性“，非常好用。
四、”塊“思想
在網頁元素的規劃時，有些人可能對頁面中的一個個方塊直接排列。這種方法看似簡單，但是在面對屏幕寬高比變化或者一個簡單的修改時往往會造成元素次序混亂，而且很難找到頭緒。這個時候就需要我們運用”塊“的思想。HTML元素中不但有div和table等小”塊“，還可以根據頁面的大致規劃劃出較大的”塊“。比如，對所有頁面元素規定一個寬度恆定的container類，來防止頁面寬度變化造成的影響。又比如，當我們要爲頁面設定一個有多個小方塊的浮動的導航欄時，大可不必將每個方塊設定單獨的位置，直接將導航欄封裝到一個類中，直接對類的位置進行設定，會方便很多。類似的思想能夠大大減輕前端工作量。
五、人性化設計
人性化設計的想法實現起來並不難，但是往往不容易想到。比如，當我設計一個Metro風格的網頁時，一開始是將方塊中的文字設定爲超鏈接，結果實際使用時人們習慣點擊方塊，造成超鏈接失效的假象，帶來了很大的不方便，還不如直接將超鏈接的標籤放到div的外部；又比如，在div顯示字體時，爲了文字清晰地顯示不會因爲和邊界混在一起，可以自定義內邊距padding；還有對於手機網頁，小字體的超鏈接往往容易點錯，這時就不如使用方塊狀的帶背景色的div作爲一個按鈕。
以上是本人近期做網頁前端的一些小小的心得總結。限於經驗和文字水平難免錯漏。希望廣大網友給出意見，一起討論學習。