Detailed explanation of avalon’s HTML specification

Since avalon realizes the selection and operation of DOM by binding attributes, the beauty and debugging of the page become crucial. Referring to boostrap's HTML specification, the following

attribute arrangement specifications are formulated

class (class, id, name are related to the browser's native selector, so they need to be placed first )

id, name (the order of this definition directly affects the order of the attribute nodes in the element's attributes, id is exclusive, use with caution)

data-* This involves internal The generation of datasetobject, and the data-button-* attribute representing the component should be ranked in front of the data-* attribute that only represents cache

ms-* Those without attribute values ​​are sorted in front of those with attribute values, arranged by length

type title for hre f src style and other native attributes, arranged by length

User-defined attributes, arranged by length

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

Note, we should use ID as little as possible, because in newer browsers, they all learn from IE5 to directly map ID into a global Variable may cause various strange problems. The design principle of single-page applications is componentization. In this, there should be no concept of pages, only the concept of components. The first thing that should be avoided in a component system is global variables, and id is unfortunately a typical example of this.

Handling of spaces and line breaks

If the tag name has attributes, the first attribute must be on the same line as it, the second attribute must be line wrapped, and the position must be aligned with the first attribute, and other attributes must follow the same rules

Specifications for attribute format

The attribute name must be lowercase, and the attribute value must be enclosed in double quotes. For Boolean attributes of form elements (such as checked, selected, disabled), the attribute value is directly ignored

Closing rules

Self-closing package tags must end with "/>", and other formats should be "ffffffffffffffff"

The above is the detailed content of Detailed explanation of avalon’s HTML specification. For more information, please follow other related articles on the PHP Chinese website!