资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Web中的元素方法及优缺点是什么

这篇文章主要介绍“Web中的元素方法及优缺点是什么”,在日常操作中,相信很多人在Web中的元素方法及优缺点是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Web中的元素方法及优缺点是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联公司是专业的花都网站建设公司,花都接单;提供成都做网站、网站设计、外贸营销网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行花都网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

一、HTML5隐藏属性

它是一个布尔 HTML 属性,隐藏了附加到它的元素。当浏览器加载一个web页面时,它不会渲染带有hidden属性的元素,除非该元素被CSS手动覆盖,这与应用display: none的效果类似。

考虑下面的例子:

Web中的元素方法及优缺点是什么

我们有一个title、一个figure和一个描述。只有当视口宽度大于400px时,才会显示该图。我向元素添加了hidden`属性。

在CSS中,我使用hidden属性仅在所需的视口大小中显示元素。

Web中的元素方法及优缺点是什么

img[hidden] {   display: none; }  @media (min-width: 400px) {   img[hidden] {     display: block;   } }

那么,你可能会问为什么不使用display: none呢?这是个好问题。当通过其hidden属性调用图像选择器时,我们可以确定即使CSS因为某种原因没有加载,元素也会被隐藏。

1. 可访问性对hidden的影响

从可访问性的角度来看,hidden将元素完全隐藏在web页面之外,因此屏幕阅读器无法访问它。一定要避免使用它来隐藏仅用于表示目的的元素。

二、CSS display 属性

每个元素都有一个默认的display值,比如inline-block、block、table等等。要隐藏具有display属性的元素,我们应该使用display: none。当一个元素使用display: none隐藏时,它的所有后代都将被删除。

考虑下面的例子:

img {   display: none; }  @media (min-width: 400px) {   img {     display: block;   } }

这将完全隐藏文档流和屏幕阅读器中的图像。也许你想知道文档流是什么?请参见下图:

Web中的元素方法及优缺点是什么

注意,当蓝皮书被隐藏时,它已被完全从堆栈中删除。为它保留的空间已经消失了。同样的概念也适用于在HTML中隐藏元素时。元素的预留空间已经没有了,它更改了文档流,或者在我们的示例中,更改了图书流堆栈。

下面是一个动画,演示当移除书本时发生的情况:

Web中的元素方法及优缺点是什么

1. 如果资源隐藏在CSS中,它们会加载吗?

是的,会的。例如,如果被CSS隐藏,并且我们在某个断点处显示它,则它已经被加载。即使图片被CSS隐藏,该图片也会引起HTTP请求。

在下面的演示中,我只添加了一个图像,并使用CSS隐藏它。然后,我打开「DevTools」并检查networks选项卡,它显示图像已加载。

Web中的元素方法及优缺点是什么

稍后我们将对此进行讨论,以解释如何在特定断点或视口大小中不需要HTTP请求时减少HTTP请求。

2. style 元素

值得一提的是,有些元素的默认值是display: none。可以将