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

前言

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

一、关于a标签的属性

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

我们来看下a标签的一些属性

这篇文章第八条有介绍。

2、target属性

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

_self：默认值。当前浏览器上下文。

_blank：通常是一个新的标签页，但是用户可以配置浏览器，是否在新窗口打开。

_parent：当前浏览器上下文的的父级上下文，如果没有父级，则行为类似_self。

_top：最顶级的浏览器上下文。如果没有祖先上下文环境，则行为类似_self.

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

这个属性很有用。

应用场景：

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

这里就用到了framename这个属性

用法如下：

haorooms测试页

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

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

二、img ，iframe等支持Lazy loading

在chrome 76版本以上，支持了

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

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

语法和参数

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

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

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

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

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

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

更多参考

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