公告:携程招聘java、前端、测试、产品等,请发简历至374947554@qq.com,帮内推!

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

1290次浏览

前言

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

一、关于a标签的属性

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

enter image description here

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/

Tags: html新窗口计算

相关文章: