HTML5有一个新的全局属性hidden,可以用来隐藏内容.

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

CSS有display:none规则,也可以用来隐藏内容.

article { display:none; }

从视觉上看,它们是相同的.语义上的区别是什么?计算?

我应该考虑在何时使用其中一种或另一种时应考虑哪些准则?

蒂娅.

EDIT:根据@newtron的回复(如下),我做了更多的搜索.hidden属性在go 年引起了激烈的争论,而且(显然)几乎没有进入HTML5规范.一些人认为它是多余的,没有任何意义.据我所知,最终的判断是:如果我只针对网络浏览器,没有区别.(有一个页面甚至断言web浏览器使用display:none来实现隐藏属性.)但如果我在考虑可访问性(例如,也许我希望我的内容能被屏幕阅读器阅读),那就有区别了.CSS规则display:none可能会对web浏览器隐藏我的内容,但相应的aria规则(例如aria-hidden="false")可能会try 读取它.因此,我现在同意@newtron的答案是正确的,尽管可能(可以说)没有我想的那么清楚.谢谢@newtron的帮助.

推荐答案

关键区别似乎在于,无论呈现形式如何,hidden个元素始终处于隐藏状态:

HIDDEN属性不得用于隐藏可以在其他演示文稿中合法显示的内容.例如,使用HIDDEN来隐藏选项卡式对话框中的面板是不正确的,因为选项卡式界面只是一种溢出表示形式-同样可以使用滚动条在一个大页面中显示所有表单控件.使用此属性仅从一个演示文稿中隐藏内容同样是不正确的-如果某个内容被标记为隐藏,则它将对所有演示文稿隐藏,例如,包括屏幕阅读器.

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

由于CSS可以针对不同的媒体/演示文稿类型,因此display: none将取决于给定的演示文稿.例如,当在桌面浏览器中查看而不是在移动浏览器中查看时,某些元素可能为display: none.或者,在视觉上隐藏,但仍可供屏幕阅读器使用.

Html相关问答推荐

R中的动态Webscraping

使用网格时图像溢出容器高度

为什么这个高度为100%的页面会出现滚动条?

如何阻止Chromecast图标出现在HTML5视频

将输入字段下方的两个按钮设置为两侧对齐

我无法使用背景图像css,因为我在VS代码中将照片放在不同的文件夹中

在<;style&>中列出的三种字体中,只有两种显示

未在抖动中播放的HTML音频||文本正在工作其他标记正在播放,但音频未播放

带下划线的文本应该有延长的下划线,以使其图像悬停

使自定义图像滑块全宽

如何在没有包装元素的情况下在React(Next.js)中呈现HTML注释

目标第一个祖先标签的 XPath

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单?

调整 Rmarkdown 输出的 html_document 的标题和副标题之间的间距

如何从 div 内的图像中删除填充而不从其他所有内容中删除填充?

Tailwind 网格行高度可防止拉伸到最高行的所有相同高度

在HTML请求中添加源URL

您如何动态更改 Vue 中更高级别的标签的 CSS

HTML画布放大/缩小算法与CSS(图像处理)

如何在没有 JS 的情况下创建带搜索的 Select 菜单