HTML5開發規範

標籤：http   io   ar   使用   sp   strong   on   div   2014   

1、總體規範——採用html5的結構標籤進行頁面配置，注意結構的語義化，並注意頁面大綱的層級結構。使用css3.0進行樣式的設計。

    a.網頁大綱查詢網址http://gsnedders.html5.org/outliner/

    b.Html5大綱演算法概念及如何如何在瀏覽器中添加網頁大綱產生的外掛程式

    http://www.20ju.com/content/V165998.htm

2、Html5文檔結構規範——html5作為新一代標籤語言的標準，不需要再顯式的聲明mine類型及版本號碼。

    a.簡化的Doctype，可直接寫成《!DOCTYPE html》

    b.無需書寫Xml的類型，即直接寫成《html》《/html》

    c.採用html5進行頁面配置時，頁面結構應遵循以下結構模板：

    *註：以上的結構模板中，關鍵詞、及描述必須要書寫，其餘可根據頁面需求刪改。

    另，若是移動端開發，可加上另一個《meta》元標籤，表示全螢幕顯示。

    

    禁止頁面縮放時，在以上的meta標籤中添加以下屬性：

    minimum-scale=1,maxinum-scale=1,user-scalable=no

3、Html5標題——html5頁面不再以hn中的n作為網頁標題的級數及權重，而是以header、section、article等塊元素的嵌套層次來作為級數，每一個塊中可以有自己的h1及標籤組。

    a.《header》標籤——當header元素作為body的直接子項目時，其中的標題將作為頁面的第一級標題，把頁面當做一本書，則此處的標題就是書本的書名。Body中只能設定一個直接的head標籤，其他section等塊中的head標籤中的標題將根據嵌套的層數充當二級標題或三級標題。

    b.若某個塊中沒有標題，不使用section元素，轉而使用div進行布局。

    c.使用aside或者nav時可以允許沒有標題。

例子：

以上產生的網頁大綱為：

1.愛GO網•旅遊攻略

1.1.旅遊推薦

1.2.這是我的旅遊攻略

1.2.1.旅行的意義

1.2.2.旅行的過程

 

4、書寫規範——html5中不區分大小寫，但是在進行愛GO網頁面布局時，統一使用小寫。Html5中部分新增的部分新功能中，使標籤可以不用寫結束標記，如li,dt,dd，p等，但是在進行愛GO網頁面開發時，一律需要使用結束標記。

 

5、針對頁面的標準——頁面源於其自身擁有頭部和底部的皮膚，故而在進行頁面的開發時只需要構造中間主要內容的地區。

    a.頭部布局：

    酒店房型列表頁時header部分抽取出來公用化。

    b.底部布局：

    底部布局統一使用footer元素，鑒於中底部有定製的菜單，在進行頁面開發時，不使用body的直接footer元素。

    c.中間部分：

 

6、頁面css布局

    a.頭部添加meta元標籤

    b.對於結構元素的寬度，一律使用百分比的單位，如左邊的aside寬度設定為30%，右邊article寬度設定為70%；

    c.字型的書寫，一開始設定body的font-size為62.5%，讓所有的元素繼承該設定，使得1em = 10px。最後在需要使用font-size時使用1em（10px）或者1.2em（12px）；

    d.盡量不要使用過多的背景圖片，若使用了背景圖片，當圖片的寬或者高佔滿元素的寬或者高時，則需要為元素添加屬性：background-size:contain;讓背景圖片根據元素尺寸的變化而變化；

    e在頁面中直接使用圖片時應用一個額外標籤包含，並用百分比設定該標籤的寬度，以及將被包含圖片的寬度設定為100%；

    f.Margin、padding、border、box-shadow等的元素可以使用px單位；

    g.使用@media screen and (max-width:XXpx){selector{  } }來制定當螢幕過小時的重載樣式。如當螢幕小於320px時，標題變小或者其他。不推薦使用link @media再重新載入另一份樣式。

 

    設計需要推敲，以下是建議：

    a.少用漸層——目前在css3中新增漸層屬性，但各瀏覽器的支援度不高均已私人屬性的形式進行支援，目前還不建議在非個人網站中使用。若使用漸層，移動端螢幕尺寸過小時，前端工作會根據螢幕的尺寸而制定相應的樣式，到時就需要重新載入不同的漸層圖片。

    b.設計時，可根據主流的移動端尺寸，或者根據使用者物件所使用移動端裝置的螢幕尺寸來初步確定設計的頁面寬度等尺寸，前端在布局時使用百分比，字型在一定的螢幕尺寸範圍內不改變，而如果根據主流螢幕的尺寸來確定尺寸，就不會出現開發時覺得字型太大或者太小的現象。

 

7、移動端js架構——使用zepto.js

HTML5開發規範