# 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> ```