当前位置: 代码迷 >> 综合 >> day03(HTML全局属性、在页面上隐藏元素的方法)
  详细解决方案

day03(HTML全局属性、在页面上隐藏元素的方法)

热度:56   发布时间:2023-12-15 04:38:12.0

1. HTML全局属性(global attribute)有哪些(包含H5)?

全局属性是指在所所有元素之上均可被访问的属性 .(虽然有时候某些属性对某种元素没有具体的影响)

https://developer.mozilla.org/zh-CN/docs/Glossary/Global_attribute

 

2. 在页面上隐藏元素的方法有哪些?

01. 

占位:opacity: 0visibility: hiddenmargin-left: -100%transform: scale(0);不占位:display: nonewidth: 0; height: 0; overflow: hidden;仅仅对块内文本元素:text-indent: -9999px; (注意:只能用于block,table cells和inline-block)font-size: 0;

02. 应用:

建站过过程中朋友喜欢把网站名称用 H1 表示,但从美观考虑,要用 logo 图片来代替 h1,这时需要隐藏 h1 内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义 h1 标签的意义。

 1)一般来说,偏移掉字体的方式是使用:text-indent:-9999px; (注意:只能用于block,table cells和inline-block)

  具体使用方法:把 h1 作为一个块来显示(display:block),指定长宽(和图片一样大小),然后指定 h1 的背景图片,也就是将我们需要的图片作为 h1 这个标签的背景。而h1标签中插入的,仍然是作为字符形式出现的博客标题,然后用 text-indent:-9999px; 将文字甩到屏幕看不到的地方。(9999px应该是足够了,谁的屏幕也没那么大吧)

<h1><a href=“http://www.seo100.net/”>博客园</a>
</h1>
h1 a{height:30px;width:165px;float:left;text-indent:-9999px;background-image:url(images/logo.gif);background-repeat:no-repeat;display:block;position:relative;}

在h1使用上语义明确,符合语义化定义。text-indent 就是首行缩进,大家都在中文段落,首行空两格用过它。这里通过负值缩进,使文字超出可视区,而这时 h1 下的背景就显示出来了,h1 中包含的 <a> 标签又不影响使用,对于隐藏文字“站点名称”应该是最佳方案了。但对于多段 文字的隐藏这个方法就不适合了。

   另外,点击<h1><a>链接时,会产生一个虚线框,对于IE还好,没什么问题,虚线框只是在背影图片大小。但是Firefox就有些麻烦,它把缩进的文字范围也包含进来了,这样不是很美观。

    于是需要屏掉点击时产生的虚线框,IE和FF屏虚线框方法不一样。IE采用的遍历方法(HTC,css表达式)有些耗系统资源,正好我们只需要隐藏FF下的虚线框就行了,IE就不管了,说一下Firefox如何去掉链接的虚线框的方法

a{outline:none;}
outline是css3的一个属性,用的很少。声明,这是个不能兼容的css属性,在ie6、ie7、遨游浏览器都不兼容。只有ff,ie8在加了outline:none后会取消聚焦的虚线框。

03. 从性能的角度来说:

disaplay: none    页面不会渲染,可以减少首屏渲染的时间,但是会引起回流和重绘。不利于搜索引擎的搜索

visibility: hidden  页面会渲染只是不会显示

opacity: 0            页面不会显示,但是会占据空间,只会引起重绘

  相关解决方案