首頁  >  文章  >  web前端  >  詳解avalon的HTML規範

詳解avalon的HTML規範

高洛峰
高洛峰原創
2017-03-12 17:24:301437瀏覽

由於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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn