HTML style guide

原文：https://docs.gitlab.com/ee/development/fe_guide/style/html.html

• Buttons

  • Button type
  • Button role

• Links

  • Blank target
  • Fake links

HTML style guide

Buttons

Button type

按钮标记需要根据W3C HTML 规范的type属性.

// bad
<button></button>

// good
<button type="button"></button> 

Button role

如果 HTML 元素具有onClick处理程序但不是按钮，则应具有role="button" . 这更容易访问 .

// bad
<div onClick="doSomething"></div>

// good
<div role="button" onClick="doSomething"></div> 

Links

Blank target

每当您的链接在新窗口中打开时，即使用target="_blank" ，请使用rel="noopener noreferrer" target="_blank" . 这可以防止JitBit 记录的安全漏洞.

// bad
<a href="url" target="_blank"></a>

// good
<a href="url" target="_blank" rel="noopener noreferrer"></a> 

Fake links

不要使用虚假链接. 如果链接仅调用 JavaScript click 事件处理程序，则使用按钮标签，这更具语义.

// bad
<a class="js-do-something" href="#"></a>

// good
<button class="js-do-something" type="button"></button>