记录你可能不知道的html特性

前言

总结几个html蛮实用的,但是你可能不知道的特性。当然,这么文章后面还会陆续补充一些。

一、关于a标签的属性

a标签,我们用的太多了,可以说每个web开发应该都知道,但是这个标签的一些属性你知道吗? 我们来看下a标签的一些属性

1、download属性,这个不稀奇,我之前有文章介绍过: https://www.haorooms.com/post/qd_ghfx

这篇文章第八条有介绍。

2、target属性

新开窗口我们用的太多了,我们一般仅仅了解如下:

_self:默认值。当前浏览器上下文。
_blank:通常是一个新的标签页,但是用户可以配置浏览器,是否在新窗口打开。
_parent:当前浏览器上下文的的父级上下文,如果没有父级,则行为类似_self。
_top:最顶级的浏览器上下文。如果没有祖先上下文环境,则行为类似_self.

但是你看到还有一个最后的属性了没有?framename

这个属性很有用。

应用场景:

产品经常会让跳转链接新开窗口,以保留用户,但是有时候浏览器会新开太多窗口,病毒似的,体验很不好。那么如何做到url没有打开的时候打开新窗口,大开了之后,只要刷新窗口就可以呢?

这里就用到了framename这个属性

用法如下:

<a href="haorooms.html" target="haorooms.html">haorooms测试页</a>

这样就可以没有打开的时候会打开新窗口,打开了之后会刷新新窗口。

小结:也就是说,只要target设置和href一致就可以了。

二、img ,iframe等支持Lazy loading

请看 https://www.caniuse.com/#search=lazy%20loading

在chrome 76版本以上,支持了

如果你想要让一张图片在靠近浏览器视窗的时候才加载,下面代码就可以了:

<img src="./haorooms.jpg" loading="lazy" alt="haorooms.com">

无需任何其他的JavaScript代码就可以实现懒加载功能。

语法和参数

HTML loading属性支持的值除了lazy还有下面这几个:

1、lazy 图片或框架懒加载,也就是元素资源快要被看到的时候加载。

2、eager 图片或框架无视一切进行加载。

3、auto 默认值。图片或框架基于浏览器自己的策略进行加载。

如果HTMLImageElement或者HTMLIFrameElement元素没有显式地设置loading属性或者loading属性的值不合法,则都被当作'auto'处理。

这个其实js也蛮好兼容,低版本用data-src就可以,可以用js替换

更多参考

关于其应用可以参考如下文章:

1、 https://addyosmani.com/blog/lazy-loading/

2、 https://www.smashingmagazine.com/2019/05/hybrid-lazy-loading-progressive-migration-native/

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章