🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
#通用约定 --- ###代码规范 * 缩进使用soft tab(4个空格); * 嵌套的节点应该缩进; * 在属性上,使用双引号,不要使用单引号; * 属性名全小写,用中划线做分隔符; * 不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的); * 不要忽略可选的关闭标签,例:</li> 和 </body> * 布尔类型的属性,不添加属性值 * 自定义属性以 data- 为前缀 示例: ``` <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company_logo.png" alt="Company"> <input type="text" disabled> <input type="button" data-ui-type="Select"> <h1 class="hello-world">Hello, world!</h1> </body> </html> ``` ###属性顺序 属性应该按照特定的顺序出现以保证易读性; * class * id * name * data-* * src, for, type, href, value , max-length, max, min, pattern * placeholder, title, alt * aria-*, role * required, readonly, disabled class是为高可复用组件设计的,所以应处在第一位; id更加具体且应该尽量少使用,所以将它放在第二位。 示例: ```html <a class="..." id="..." data-modal="toggle" href="#">Example link</a> <input class="form-control" type="text"> <img src="..." alt="..."> ``` ###嵌套 * 减少不必要的嵌套 在编写HTML代码时,需要尽量避免多余的不必要的嵌套; 很多时候,需要通过迭代和重构来使HTML变得更少。 示例: ```html <!-- Not well --> <span class="avatar"> <img src="..."> </span> <!-- Better --> <img class="avatar" src="..."> ``` * 符合嵌套规则 所有元素必须正确嵌套,不允许交叉嵌套以及非法嵌套 示例: ```html <!-- 交叉嵌套 --> <!-- Not well --> <span><dfn>交叉嵌套</span></dfn> <!-- Better --> <span><dfn>交叉嵌套</dfn></span> <!-- 非法嵌套 --> <!-- Not well --> <ul> <h3>xx列表</h3> <li>asdasdsdasd</li> <li>asdasdsdasd</li> </ul> <!-- Better --> <div> <h3>xx列表</h3> <ul> <li>asdasdsdasd</li> <li>asdasdsdasd</li> </ul> </div> ``` ###HTML注释 在每个模块开始和结束的地方添加注释 示例: ```html <!-- 新闻列表模块 --> <div class="m-news g-mod"> </div> <!-- /新闻列表模块 --> <!-- 排行榜模块 --> <div class="m-topic g-mod"> </div> <!-- /排行榜模块 --> ``` ###引入CSS,JS 根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。 示例: ```html <!-- External CSS --> <link rel="stylesheet" href="code_guide.css"> <!-- In-document CSS --> <style> ... </style> <!-- External JS --> <script src="code_guide.js"></script> <!-- In-document JS --> <script> ... </script> ``` ###boolean属性 boolean属性指不需要声明取值的属性,XHTML需要每个属性声明取值,但是HTML5并不需要,例如:```disabled```、```checked```、```selected```。 >boolean属性的存在表示取值为true,不存在则表示取值为false。 ```html <input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select> ```