首页 > 其他分享 >在 HTML 和 CSS 中隐藏元素有哪些不同的方法?

在 HTML 和 CSS 中隐藏元素有哪些不同的方法?

时间:2022-08-29 17:37:07浏览次数:92  
标签:元素 HTML UI 隐藏 CSS 属性

在 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,属性
From: https://www.cnblogs.com/amboke/p/16636661.html

相关文章

  • 前端CSS的简单学习
    1:什么是CSSCascadingstyleSheet:层叠级联样式表CSS:字体,颜色,边距,宽度,背景图片。。。2:CSS的快速入门语法(推荐引入css的样式)建议使用独立的css文件,方便项目的维......
  • 【前端】AWS CloudFront + S3 配置访问时自动跳转到index.html
    需求:我把前端代码上传到S3了,CloudFront的DistributionIDE1U1XXXX,它的Alternatedomainname是test.link则我访问首页需要输入test.link/frontend/view/index.htm......
  • Vue引入CSS样式的方法
    Vue引入CSS样式的方法https://blog.csdn.net/pick_ears/article/details/122214627......
  • 如何在 React JS 中隐藏网站源代码?
    如何在ReactJS中隐藏网站源代码?“成长的关键是将更高维度的意识引入我们的意识。”老子最近我在使用React进行开发时遇到的问题是,当我打开控制台进行检查时,我导......
  • CSS 行内几种样式
    什么是行内样式行内样式,其实从它的名字就可以看出来它的特点,就是直接在HTML标签中使用style属性设置CSS样式。例如像下面这样的:<pstyle="font-size:18px;">行内样式</......
  • CSS三中样式(简单的代码)
    三中的使用方法的简单实例如下:行内样式:<!doctypehtml><html><head><metacharset="UTF-8"><title>css行内样式</title></head><body><divstyle="width:100px;h......
  • HTML标签(三)
    ​ /**作者:呆萌老师*☑csdn认证讲师*☑51cto高级讲师*☑腾讯课堂认证讲师*☑网易云课堂认证讲师*☑华为开发者学堂认证讲师*☑爱奇艺千人名师计划成员*在这里......
  • php解析html类库simple_html_dom(详细介绍)
    php解析html类库simple_html_dom(详细介绍)_php技巧_脚本之家 https://www.jb51.net/article/39526.htm下载地址:https://github.com/samacs/simple_html_dom解析器不仅......
  • css
    <!--这个是html的注释,而/**/这个是css的注释,不同注释使用于不同的地方--><!--link标签专门用来引入css样式代码-->  <!--style标签专门用来定义css样式代码-->......
  • 在 CSS 中使用媒体查询
    在CSS中使用媒体查询CSS中的媒体查询改变了网站的整体功能和响应能力。它们有点像“if”语句,例如,如果视口宽度是这个大小或更低,那么就改变它。媒体查询主要用于使网站......