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

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

4 years ago

source link: https://www.tuicool.com/articles/nUFzQr2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

前言

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

一、关于a标签的属性

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

yMNnIra.jpg!web

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/

Recommend

微信 mp.weixin.qq.com 3 years ago
Cache

你可能未曾使用的新 Java 特性

Java 是在过去 20 年中一直在市场流行的编程语言。但是最近几年各种替代 Java 的声音不断。与 Python，Kotlin，Swift 等现代编程语言相比，开发人员抱怨 Java 过时的编程语法。但是很多人不知道的是，Java 新版做了很多改进，并为...

www.lujun9972.win 3 years ago
Cache

我所不知道的printf命令特性

我所不知道的printf命令特性从 Bash's Built-in printf Function 上看到的，记录一下 printf有多个版本除了 /usr/bin/pri...

segmentfault.com 3 years ago
Cache

[Vue] el-input特性记录2-最大值、最小值

[Vue] el-input特性记录2-最大值、最小值发布于 33 分钟前el-input输入值设置最大值、最小值问题。如果使用max、min属性，则必须同时加上与type="number"。...

blog.p2hp.com 3 years ago
Cache

总结一些不为人熟知的 HTML 特性。

In this article, I will share with you some very useful HTML tips. Enjoy!* Post will be updated regularly with new tips! But first, what is HTML? Hypertext Markup Language (HTML) is the st...