1、前言
網頁開發技術從1989年開始至今已經走過了20余年，從最初純粹的學術交流，到門戶網站、電子商務網站、博客、E-mail、Web游戲、SNS網站等，以及到如今的移動Web網站（其實可以認為是PCWeb開發的一個延伸）的開發，已經涉及到我們的工作、學習、生活等各個方面。
網頁開發在外行人眼中也許有難度，高不可攀，但是對於內行人來說，是很簡單 的，只要有一個文本編輯器，有個入門的教程，就可以制作屬於自己的網頁。但是在開發網頁的時候，不僅僅是要求實現心中的模型，更要考慮我們開發出來的代碼 的可維護性，為將來可能出現的變化做好一切的准備。
請對照你曾經開發過的網頁代碼，看看在你的代碼中是否存在着以下的問題：
- 沒有一個合理的網頁布局，div布局、table布局隨處可見，到處混用；
- HTML標簽名稱大小寫不統一，一會大寫，一會小寫，更有甚者，同一個名稱中都會出現大小寫混合的場景；
- 標簽屬性定義的時候，有的屬性值加引號，有的屬性名稱不加引號，甚至，同一個標簽的多個屬性值，有的有引號，有的沒有引號；
- 代碼中出現已經被淘汰不再使用的標簽、屬性；
- CSS樣式組織混亂，<style>標簽定義樣式、<link>標簽外鏈、標簽內style屬性直接定義這三種定義方式隨處都有；
- Javascript代碼隨處可見，<script>標簽內、直接寫在HTML標簽內；
- Javascript代碼和CSS代碼隨處可見，凌亂不堪；
- Javascript代碼風格不一，縮進有使用四格Tab鍵、八格Tab鍵、直接多個Space縮進，原生Javascript、jQuery編碼方式等，各式各樣的風格並存；
- 任何HTML代碼、CSS代碼、Javascript代碼中看不到一點注釋；
- 。。。。。。
如果你的代碼中存在上面所列出的問題的話，那你維護這樣的前端代碼要付出的成本，我想我不告訴你，你也是可以想象到的，要是你想象不到，那我就無話可說了。。。於是，就有了所謂的Web標准。Web標准，用最簡單的話來說，就是把網頁的結構（HTML）、樣式（CSS）和行為（Javascript）進行分離，當然標准在哪里？那就必須是W3C這樣權威的組織推行的Web標准了。
雖然存在Web標准，但是前端工作的維護在現實中確實存在中很大的難度，之於原因，借鑒了一些權威書籍的介紹，這里簡單做一個說明：
- 瀏覽器的角度：在現在瀏覽器遍地開花的時代，移動端也是同樣如此，不同的瀏覽器對前端代碼的解析存在着很多差異性，所以對於每一個做前端的開發人員來說，瀏覽器的兼容性是一個最為苦悶的問題；
- 技術角度：不同的公司、不同的團隊、不同的工程師，對前端代碼的技術實現方案都有着各自的認知，或深或淺，尤其是現在HTML5、CSS3、jQuery等各種Javascript開發框架以及多如牛毛的第三方Javascript插件，這種情況下，代碼的可維護性程度就會很容易降低。
- 團隊合作的角度：針對移動端的網頁來說，對用戶體驗和網頁的表現能力要求是很高的， 就會導致我們為移動端開發的前端代碼復雜度就會越來越高，而對於團隊合作來說，要求就更加高了。如果團隊合作不默契，沒有一套統一的標准和規范，那么你就需要花很多的時間去維護這些出自不同團隊成員的代碼。
其實對每一個前端開發人員來說，所追求的的目標無非就是追求高質量的前端代碼，提高代碼的可維護性，請每一個進行移動網頁前端代碼開 發的人記住，要讓你的代碼做到：精簡、重用、有序。精簡就意味着你的代碼文件比較小，這樣利於客戶端下載和訪問；重用提高了開發速度，同樣也可以保證代碼 的精簡；有序要求我們很好地組織代碼，便於維護。
為了提高工作效率，便於團隊成員更好地閱讀和修改彼此的代碼，更為了便於更好地維護前端代碼，也為了能讓我們的開發更加規范化，所以結合了Web標准、網絡資料以及個人平時的工作經歷，總結出了一些前端開發過程中的一些規范化要求和建議。因為本人接觸前端是從移動網站的開發做起的，所以很多規范和建議都是針對移動網頁來說的，如果本文中有不對或者不合適的部分請評論提出，不甚感激。
2、基本Web標准
一個符合基本Web標准的網頁前端代碼，HTML標簽中的標簽名應該全部都是小寫的，屬性的定義需要加上引號，CSS樣式和Javascript代碼不要夾雜在HTML標簽中，而是應該分別單獨存放在CSS樣式文件和Javascript腳本文件中。理想狀態下，一個網頁的前端代碼應該由.html文件、.css文件、.js文件這基本的三部分組成。
示例代碼：
helloworld.html
<link rel=”stylesheet” type=”text/css” href=”helloworld.css” /> <script type=”text/javascript” src=”helloworld.js” /> <div class=”helloDiv”> <span class=”helloFont”>Hello world！</span> <input type=”text” name=“yourName” id=”yourName” maxlength=”20” /> </div>
.helloDiv { width: 100%; height: 20px; line-height: 20px; text-align: center; } . helloFont { font-size: 14px; color: #cccccc; }
var inputObj = document.getElementById(“yourName”); inputObj.onmouseover = function() { this.focus(); } inputObj.onfoucs = function() { this.select(); }
如示例代碼一樣，HTML標簽只用來負責承載網頁內容的顯示，而樣式定義交給了CSS，而所謂的行為動作定義交給了Javascript。
將HTML、CSS、Javascript分成三個文件來存放，這其實是一個最理想的狀態，但是實際我們開發的過程中，會因為一些特殊原因，需要把CSS和Javascript的代碼和HTML代碼放在同一個文件中，但是即使這樣的情況下，我們也需要在HTML文件中，將樣式和行為從標簽中盡量分離出來。
示例代碼：
helloworld.html<style type=”text/css”> .helloDiv { width: 100%; height: 20px; line-height: 20px; text-align: center; } . helloFont { font-size: 14px; color: #cccccc; } </style> <script type=”text/javascript”> var inputObj = document.getElementById(“yourName”); inputObj.onmouseover = function() { this.focus(); } inputObj.onfoucs = function() { this.select(); } </script> <div class=”helloDiv”> <span class=”helloFont”>Hello world！</span> <input type=”text” name=“yourName” id=”yourName” maxlength=”20” /> </div>