通用约定

这里介绍一些html开发的通用约定。

标签

自闭合（self-closing）标签:无需闭合 ( 例如： img input br hr 等 )； 可选的闭合标签（closing tag）:需闭合 ( 例如：div,body等 )；

注意，在设计时，尽量减少标签数量 有些标签尽管不闭合也能够正确显示，但是可能会在一些特殊的浏览器上出现问题。因此还是推荐尽量按照规范来书写html(我的建议是，自闭合标签也加一下'/')

<img src="images/google.png" alt="Google">
<input type="text" name="title">

<ul>
  <li>Style</li>
  <li>Guide</li>
</ul>

<!-- Not recommended -->
<span class="avatar">
  <img src="...">
</span>

<!-- Recommended -->
<img class="avatar" src="...">

属性顺序

HTML 属性应该按照特定的顺序出现以保证易读性。

  • id
  • class
  • name
  • data-xxx
  • src, for, type, href
  • title, alt
  • aria-xxx, role
<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">

引号

属性的定义，统一使用双引号。

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>

嵌套

语义嵌套约束

  • <li> 用于 <ul> 或 <ol> 下；
  • <dd>, <dt> 用于 <dl> 下；
  • <thead>, <tbody>, <tfoot>, <tr>, <td> 用于<table>下;

布尔值属性

HTML5 规范中 disabled、checked、selected 等属性不用设置值。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

避免利用JavaScript 生成标签或html片段

通过 JavaScript 生成的标签或html片段让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免，我们可以采用模板的方式来处理，常用的模板有

handlebars（模板引擎类），Ember.js 就采用该模板引擎

knockoutjs，除了支持模板，他还是一个轻量级的MVVM框架

mustashe， 一个模板引擎

JsRender，一个非常好用的html模板引擎类

在不引入其他mvc或mvvm框架的前提下，采用 JsRender 或 handlebars 来处理html模板，这两个模板支持循环、条件语句，还支持在模板中动态执行JavaScript脚本（不建议这样做）。当然我们还可以引入MVC框架，这些框架一般都自带模板处理引擎，比如Angular、Ember、KnockoutJs等

results matching ""

    No results matching ""