本篇主要講前端並給制作html頁面的新手一些建議，大牛勿噴大牛可以繞過。
感受：我是搞后端開發的，有時拿到一些靜態（Html）頁面，看到里面的頁面結構命名規則極不規范，就有點不好的
感覺了。當然出現這樣的情況都是發生在新人身上，一般會拿出以往的規范頁面、命名DEMO給TA看下，也是為了
提高開發效率。
目的：本篇不是介紹規范，標准的規范請參考W3C。只是一種放之四海較為皆准的一種套路，也是為了制作新手能更好的上手。
編碼能力是一回事，這里也不討論，這里僅僅說一些個人覺得還可以的方法。
廢話到此為止，看代碼
一、頁面編碼結構及基礎的命名規范
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <!--頁面編碼：以UTF-8居多--> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <!--額外樣式以及引用的外部樣式文件，其中相對路徑和絕對路徑這里暫不討論--> <style type="text/css"></style> <!--額外腳本以及引用的外部Js、Jquery庫等 --><script type="text/javascript"></script> </head> <body> <!--頭部標簽 有的時候header會包含在warp，但最好給獨立標簽-->
<div id="header"> <!--導航標簽 注：雖然有時候頭部和導航會合二為一，但不能圖省事而混為一談--> <div id="Nav"> <ul> <li><a href="##">Nav1</a></li> <!--或--> <li><a href="##"><span>Nav1</span></a></li> </ul> </div> </div> <!--頁面主體 頁面主體ID按我的習慣用Warp和Main比較多--> <div id="wrap"> <!--左側內容 一般為左側導航，后面接着廣告位、簡單的聯系信息或者快速搜索等--> <div id="LeftContent"> <!--左側導航--> <div id="LeftNav"> <ul> <li><a href="###">Jump To</a></li> </ul> </div> <!--廣告位--> <div id="Ad" ></div> <!--簡單聯系信息--> <div id="Contact" ></div> </div> <!--右側主體內容 這里面就自由發揮，不贅述--> <div id="RighrContent"></div> </div> <!--底部 包括了版權 備案號、統計代碼、推廣代碼等各種代碼的均加到此處--> <div id="footer"></div> </body> </html>
1、相信大多數新手還是看的懂得。頁面總共化為為<head>、<header>、<warp>、<footer>，以上將頁面划分為四塊
有時候也會有三塊，情況是<header>包含在了<warp>里面。具體的因設計頁面來靈活調整。其實無論分幾塊，主要是
各個塊獨立成標簽形成規律，這樣的話在后續程序開發中<header>、<footer>以及上述代碼中的<div id="LeftContent">等標簽可
以使用公用控件利於后端開發效率以及后期維護
二、頁面文件結構
1、如圖這是一個基本的文件結構方式。其中NewsCenter、Product為各欄目，一定要按欄目建立文件夾然后在里面建立頁面文件。
要不然所有頁面全部放在根目錄，剛開始做的時候還不覺得，給另外的人用或者自己改，那就眼睛瞎了。
2、其次也是最為重要的頁面元素文件(我自己定義的)，全部放在skins文件夾里面，然后按文件屬性再建立文件夾然后再建立對應文件。
本文要講述的是一種在開發規范和標准，為了團隊更好的協作開發，而這些都需要首先對自己提高要求。
博文僅代表個人觀點，博文為原創，如有轉載請在明顯位置注明作者名稱和博客園文章地址。