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>」