HTML5 的 hidden 属性和 css 的 display: none 有何区别？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

阿神 2017-04-17 11:12:59

[HTML讨论组]

641

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

<!DOCTYPE html>
<html>
<body>



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





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



</body>
</html>

阿神

闭关修行中......

全部回复(3)

迷茫2017-04-17 11:14:59 3楼

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

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:

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.

Hidden elements shouldn't be linked from non-hidden elements.

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.

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.