关于chrome:5个不常提及的HTML技巧

2021 年你须要晓得的 HTML 标签和属性

Web 开发人员都在宽泛的应用 HTML。无论你应用什么框架或者抉择哪个后端语言，框架在变，然而 HTML 始终如一。只管被宽泛应用，但还是有一些标签或者属性是大部分开发者不熟知的。尽管当初有很多的模版引擎供咱们应用，然而咱们还是须要尽可能的熟练掌握 HTML 内容，就像 CSS 一样。

在我看来，最好尽可能应用 HTML 个性来实现咱们的性能，而不是应用 JavaScript 实现雷同的性能，只管我抵赖编写 HTML 可能会是反复的和无聊的。

只管许多开发人员每天都在应用 HTML，但他们并没有尝试改良本人的我的项目，也没有真正利用 HTML 的一些鲜为人知的个性。

上面这 5 个通过 HTML 标签 / 属性实现的性能我感觉须要理解一下：

图片懒加载能够帮忙晋升网站的性能和响应能力。图片懒加载能够防止立刻加载那些不在屏幕中立刻显示的图片素材，当用户滚动邻近图片时再去开始加载。

换言之，当用户滚动到图片呈现时再进行加载，否则不加载。这就升高了屏幕内容展现过程中的图片素材的申请数量，晋升了站点性能。

往往咱们都是通过 javascript 来实现的，通过监听页面滚动事件来确定加载对应的资源。然而，在不齐全思考兼容性的场景下，咱们其实能够间接通过 HTML 来间接实现。

注：本篇的提到的标签和属性的兼容性须要大家依据理论场景来选取是否应用

能够通过为图片文件增加 loading="lazy" 的属性来实现:

<img src="image.png" loading="lazy" alt="lazy" width="200" height="200" />

当用户在进行输出搜寻性能时，如果可能给出无效的提醒，这会大大晋升用户体验。输出倡议和主动实现性能当初到处可见，咱们能够应用 Javascript 增加输出倡议，办法是在输入框上设置事件侦听器，而后将搜寻到的关键词与预约义的倡议相匹配。

其实，HTML 也是可能让咱们来实现预约义输出倡议性能的，通过 <datalist> 标签来实现。须要留神的是，应用时这个标签的 id 属性须要和 input 元素的 list 属性统一。

<label for="country"> 请抉择喜爱的国家:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
  <option value="UK">
  <option value="Germany">
  <option value="USA">
  <option value="Japan">
  <option value="India">
  <option value=“China”>
</datalist>

你是否遇到过在不同场景或者不同尺寸的设施下面的时候，图片展现适配问题呢？我想大家都遇到过。

针对只有一个尺寸的图片素材的时候，咱们往往能够通过 CSS 的 object-fit 属性来进行裁切适配。然而有些时候须要针对不同的分辨率来显示不同尺寸的图片的场景的时候，咱们是否能够间接通过 HTML 来实现呢？

HTML 提供了 <picture> 标签，容许咱们来增加多张图片资源，并且依据不同的分辨率需要来展现不同的图片。

<picture>
  <source media="(min-width:768px)" srcset="med_flower.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flower" style="width: auto;" />
</picture>

咱们能够定义不同区间的最小分辨率来确定图片素材，这个标签的应用有些相似 <audio> 和<video>标签。

当咱们的页面有大量的锚点跳转或者动态资源加载时，并且这些跳转或者资源都在对立的域名的场景时，咱们能够通过 <base> 标签来简化这个解决。
例如，咱们有一个列表须要跳转到微博的不同大 V 的主页，咱们就能够通过设置 <base> 来简化跳转门路

<head>
  <base href="https://www.weibo.com/" target="_blank">  
</head>
<body>
  <a href="jackiechan"> 成龙 </a>
  <a href="kukoujialing"> 贾玲 </a>
</body>

<base>标记必须具备 href 和target属性。

当咱们心愿实现一段时间后或者是立刻重定向到另一个页面的性能时，咱们能够间接通过 HTML 来实现。

咱们常常会遇到有些站点会有这样一个性能，“5s 后页面将跳转”。这个交互能够嵌入到 HTML 中，间接通过 <meta> 标签，设置 http-equiv="refresh" 来实现

<meta http-equiv="refresh" content="4; URL='https://google.com' />

这里 content 属性指定了重定向产生的秒数。值得一提的是，只管谷歌声称这种模式的重定向和其余的重定向形式一样可用，然而应用这种类型的重定向其实并不是那么的优雅，往往会显得很突兀。
因而，最好在某些非凡的状况下应用它，比方在长时间用户不流动之后再重定向到指标页面。

HTML 和 CSS 是十分弱小的，哪怕咱们仅仅应用这两种技术也能创立出一些微妙的网站。尽管它们的使用量很大很广泛，还是有很多的开发者并没有真正的深刻理解他们，还有很多的内容须要咱们深刻的去学习和了解，实际，有很多的技巧期待着咱们去发现。

关于chrome:5个不常提及的HTML技巧

图片懒加载

输出提醒

Picture 标签

Base URL

页面重定向（刷新）

后记