avalon2 如何修改html,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等原生属性， 依长度排列

用户自定义属性, 依长度排列

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

>

{{title|html}}

data-button-text="false"

data-button-icon-primary="ui-icon-closethick"

ms-widget="button"

ms-click="close"

type="button"

>close

注，我们应该尽可能少用ID，因为较新的浏览器中，它们都学IE5那样直接把ID映射成一个全局变量，可能会引发各种奇怪问题。单页应用的设计原则就是组件化，在这里面，不应有页面的观念，只应有组件的观念。在组件系统里首先应该避免的就是全局变量，id不幸就是这方面的典型。

空格与换行的处理

标签名如有属性，第一个属性必须与它同行，第二个属性换行，位置于第一个属性对齐，其他属性照办

属性格式的规范

属性名必须小写， 属性值必须用双引号括起，对于表单元素的布尔属性(如checked, selected, disabled)直接忽略属性值

闭合的规则

自闭包标签必须以“/>”结束，其他的格式都应为“ffffffffffffffff”