avalon 的HTML規范

由於avalon以綁定屬性實現對DOM的選擇與操作，頁面的美觀與調試就變得至關重要。參照boostrap的HTML規范，制定如下

屬性排列的規范

1. class (class, id, name與瀏覽器的原生選擇器相關，因此需靠前 )
2. id，name (這個定義的順序直接影響到元素的attributes中的特性節點的排列順序，id具有獨占性，慎用)
3. data-* 這涉及到內部dataset對象的生成，並且表示組件的data-button-*屬性應排在只表示緩存的data-*屬性前面
4. ms-* 沒有屬性值的排在有屬性值的前面， 依長度排列
5. type title for hre f src style等原生屬性， 依長度排列
6. 用戶自定義屬性, 依長度排列

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front" 
     data-drag-handle="handle" 
     data-drag-before-start="beforeStart"
     ms-draggable 
     ms-visible="toggle"
     ms-css-width="width"
     ms-css-height="height" 
     tabindex="-1" 
     style="position: absolute;" 
     >
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" >
        <span class="ui-dialog-title" >{{title|html}}</span>
        <button  class="ui-dialog-titlebar-close" 
                 data-button-text="false"
                 data-button-icon-primary="ui-icon-closethick" 
                 ms-widget="button" 
                 ms-click="close"
                 type="button" 
                 >close</button>
    </div>
</div>

注，我們應該盡可能少用ID，因為較新的瀏覽器中，它們都學IE5那樣直接把ID映射成一個全局變量，可能會引發各種奇怪問題。單頁應用的設計原則就是組件化，在這里面，不應有頁面的觀念，只應有組件的觀念。在組件系統里首先應該避免的就是全局變量，id不幸就是這方面的典型。

空格與換行的處理

標簽名如有屬性，第一個屬性必須與它同行，第二個屬性換行，位置於第一個屬性對齊，其他屬性照辦

屬性格式的規范

屬性名必須小寫， 屬性值必須用雙引號括起，對於表單元素的布爾屬性（如checked, selected, disabled）直接忽略屬性值

閉合的規則

自閉包標簽必須以“/>”結束，其他的格式都應為“<xxx>ffffffffffffffff</xxx>”