# HTML style guide

> 原文：[https://docs.gitlab.com/ee/development/fe_guide/style/html.html](https://docs.gitlab.com/ee/development/fe_guide/style/html.html)

*   [Buttons](#buttons)
    *   [Button type](#button-type)
    *   [Button role](#button-role)
*   [Links](#links)
    *   [Blank target](#blank-target)
    *   [Fake links](#fake-links)

# HTML style guide[](#html-style-guide "Permalink")

## Buttons[](#buttons "Permalink")

### Button type[](#button-type "Permalink")

按钮标记需要根据[W3C HTML 规范](https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#dom-button-type)的`type`属性.

```
// bad
<button></button>

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

### Button role[](#button-role "Permalink")

如果 HTML 元素具有`onClick`处理程序但不是按钮，则应具有`role="button"` . 这[更容易访问](https://s0developer0mozilla0org.icopy.site/en-US/docs/Web/Accessibility/ARIA/Roles/button_role) .

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

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

## Links[](#links "Permalink")

### Blank target[](#blank-target "Permalink")

每当您的链接在新窗口中打开时，即使用`target="_blank"` ，请使用`rel="noopener noreferrer"` `target="_blank"` . 这可以防止[JitBit 记录](https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/)的安全漏洞.

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

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

### Fake links[](#fake-links "Permalink")

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

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

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