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