前端开发规范手册(二)--HTML

一、通用约定

标签


  • 自闭合(self-closing)标签,无需闭合 ( 例如: img、input、br、hr 等 );
  • 可选的闭合标签(closing tag),需闭合 ( 例如:
  • > 或 );
  • 尽量减少标签数量;
<img src="images/google.png" alt="Google">
<input type="text" name="title">

<ul>
  <li>Styleli>
  <li>Guideli>
ul>


<span class="avatar">
  <img src="...">
span>


<img class="avatar" src="...">

Class与Id


  • class 应以功能或内容命名,不以表现形式命名;
  • class 与 id 单词字母小写,多个单词组成时,采用中划线-分隔;
  • 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class;

<div class="j-hook left contentWrapper">div>


<div id="j-hook" class="sidebar content-wrapper">div>

属性顺序


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="...">

引号


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


<span id='j-hook' class=text>Googlespan>


<span id="j-hook" class="text">Googlespan>

嵌套


不允许嵌套

这种约束属于语义嵌套约束,与之区别的约束还有严格嵌套约束,比如不允许嵌套
严格嵌套约束在所有的浏览器下都不被允许;而语义嵌套约束,浏览器大多会容错处理,生成的文档树可能相互不太一样。
语义嵌套约束

  • 用于
        下;
      1. 用于
        下;
      2. ,,,,用于下;

        严格嵌套约束

        • inline-Level 元素,仅可以包含文本或其他 inline-Level 元素;
        • 里不可以嵌套交互式元素,