在 HTML 和 CSS 中隐藏元素有哪些不同的方法？
这些是使用 HTML 或 CSS 在网页中隐藏内容的一些主要方法。
这些是使用 HTML 或 CSS 在网页中隐藏内容的一些主要方法。
1. HTML5 属性hidden（推荐）
HTML5 提供了一个属性 隐 这有助于隐藏网页中的内容，并且屏幕阅读器也会避免这种情况。它为您的前端提供了更好的语义。
例子 -
<div hidden>
<!-- Content Hidden -->
</div>
The element is selected in the DOM but does not take up any space in the UI
2. CSS 属性display: none
我们可以使用 CSS 属性从前端屏幕隐藏内容—— 显示：无 .该元素不占用 UI 中的任何空间。
Does not take up space in UI
3. CSS 属性visibility: hidden
我们还可以使用 CSS 属性从前端屏幕中隐藏元素—— 可见性：隐藏 .
即使该元素是隐藏的，它也会占用它在 UI 中的空间。
Takes space in UI
4. CSS 属性不透明度：0;
使用 CSS 属性隐藏元素—— 不透明度； 0 使元素完全透明，因此看起来隐藏在 UI 中。
由于我们只改变了它的透明度，该元素仍然占据了它在网页上的空间。
Takes up the space in the UI
5.隐藏元素 可访问性树
如果有一些像图片这样的元素只是为了美化 UI 而出现的，我们可以添加一个属性 咏叹调隐藏=真 到 HTML 元素。该元素将在网页上可见，但会被屏幕阅读器跳过。
让我知道您是否喜欢这篇文章以及您是否知道任何其他隐藏网页内容的方法。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/1538/21272917
标签：元素,HTML,UI,隐藏,CSS,属性 来源： https://www.cnblogs.com/amboke/p/16636661.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。