詳解avalon的HTML規範

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

屬性所排列的規範

class (class, id, name與瀏覽器的原生選擇器相關，因此需前)

id，name (這個定義的順序直接影響到元素的attributes中的特性節點的排列順序，id具有獨佔性，慎用)

data-* 這涉及到內部dataset物件的生成，並且表示元件的data-button-*屬性應排在只表示快取的data-*屬性前面

ms-* 沒有屬性值的排在有屬性值的前面， 依長度排列

type title for hre f src style等原生屬性， 依長度排列

#使用者自訂屬性, 依長度排列

<p 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;" 
     >
    <p 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>
    </p>
</p>

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

空格與換行的處理

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

屬性格式的規範

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

閉合的規則

自閉包標籤必須以「/>」結束，其他的格式都應為「ffffffffffffffff」

以上是詳解avalon的HTML規範的詳細內容。更多資訊請關注PHP中文網其他相關文章！