2 属性

2.1 属性引号

【强制】对于属性的定义使用双引号，不允许使用单引号，不允许不使用引号；

示例：

  1. <!-- Not so great -->
  2. <img class='avatar' src="./img/avatar.png" alt='avatar'>
  4. <!-- Better -->
  5. <img class="avatar" src="./img/avatar.png" alt="avatar">

2.2 属性大小写

【强制】属性名应该小写，不允许大写或大小写混合；

示例：

  1. <!-- Not so great -->
  2. <table cellSpacing="0">...</table>
  4. <!-- Better -->
  5. <table cellspacing="0">...</table>

2.3 属性布尔值

【建议】布尔类型的属性，建议不添加属性值，至少同一项目要保持一致；

示例：

  1. <input type="text" disabled>
  2. <input type="checkbox" checked>

2.4 属性声明顺序

【建议】HTML 属性建议尽量按照以下给出的顺序依次排列，确保代码的易读性。

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），建议预留更多的id命名给技术，因此排在第二位。

  1. <a class="..." id="..." data-modal="toggle" href="# ">Example link</a>
  3. <input class="form-control" type="text">
  5. <img src="..." alt="...">

2.5 自定义属性

【建议】使用自定义属性作为JS的hook，建议以data-为前缀；

示例：

  1. <input data-role="getPic" type="button">

2.6 链接属性

【强制】禁止 a 标签的 href 取值为空或不写 href 属性，重构时默认可用 # 代替；

如果不需要使用链接功能，请不要使用不带 href 的 a 标签，既不符合标签的语义，也可能会产生未知的兼容性问题；

示例：

  1. <!-- Not so great -->
  2. <a href="" title="title">欢聚时代</a>
  3. <a class="xxx">欢聚时代</a>
  5. <!-- Better -->
  6. <a href="# " title="title">欢聚时代</a>

[⬆]