开发者社区> 问答> 正文

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

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

<!DOCTYPE html>
<html>
<body>



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





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



</body>
</html>

展开
收起
a123456678 2016-03-26 13:55:09 2423 0
1 条回答
写回答
取消 提交回答
  • 以下几句读完就明白了:

    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.

    2019-07-17 19:16:05
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载