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

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

<!DOCTYPE html>
<html>
<body>



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





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



</body>
</html>

阅读 8.7k

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

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.

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

你尚未登录，登录后可以

省市区街道数据在哪里可以下载？

如何自定义设置虚线边框的样式？

怎么把一个矩形div变成一个直角三角形？

H5 可以实现点击按钮保存图片到相册功能吗？

Vue项目一个报错无法找到原因?

怎么去掉聚焦文字处的光标竖线？

Web 上的室内导航效果是如何实现的呢？