首页 > HTML5 的 hidden 属性和 css 的 display: none 有何区别?

HTML5 的 hidden 属性和 css 的 display: none 有何区别?

都可以隐藏 html 的内容,那么正确的使用场景应该是怎样的呢?

<!DOCTYPE html>
<html>
<body>



<p hidden="hidden">这是一段隐藏的段落。</p>





<p>这是一段可见的段落。</p>



</body>
</html>

把以下几句读完就明白了:

This Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements.

Usage notes:

  1. This attribute must not be used to hide content that could legitimately be shown. For example, it shouldn't be used to hide tabs panels of a tabbed interface, as this is a styling decision and another style showing them would lead to a perfectly correct page.
  2. Hidden elements shouldn't be linked from non-hidden elements.
  3. Elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.
  4. Changing the display CSS value of an element with the hidden attribute overrides the behavior. For instance, an element styled display: flex will be displayed on screen regardless of the hidden attribute being present.

none不占位,hidden占位,应该是这样。


效果其实都是一样的,隐藏后不占位

【热门文章】
【热门文章】