5个不常说起的HTML技巧

时间 2021-02-21

标签 javascript html java 后端框架 ide 性能学习网站栏目 HTML 繁體版

原文原文链接

2021年你须要知道的HTML标签和属性

Web开发人员都在普遍的使用HTML。不管你使用什么框架或者选择哪一个后端语言，框架在变，可是HTML始终如一。尽管被普遍使用，但仍是有一些标签或者属性是大部分开发者不熟知的。虽然如今有不少的模版引擎供咱们使用，可是咱们仍是须要尽量的熟练掌握HTML内容，就像CSS同样。javascript

在我看来，最好尽量使用HTML特性来实现咱们的功能，而不是使用JavaScript实现相同的功能，尽管我认可编写HTML可能会是重复的和无聊的。html

尽管许多开发人员天天都在使用HTML，但他们并无尝试改进本身的项目，也没有真正利用HTML的一些不为人知的特性。java

下面这5个经过HTML标签/属性实现的功能我以为须要了解一下：后端

图片懒加载

图片懒加载能够帮助提高网站的性能和响应能力。图片懒加载能够避免当即加载那些不在屏幕中当即显示的图片素材，当用户滚动临近图片时再去开始加载。框架

换言之，当用户滚动到图片出现时再进行加载，不然不加载。这就下降了屏幕内容展现过程当中的图片素材的请求数量，提高了站点性能。ide

每每咱们都是经过javascript来实现的，经过监听页面滚动事件来肯定加载对应的资源。可是，在不彻底考虑兼容性的场景下，咱们其实能够直接经过HTML来直接实现。性能

注：本篇的提到的标签和属性的兼容性须要你们根据实际场景来选取是否使用

能够经过为图片文件添加loading="lazy"的属性来实现:学习

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

输入提示

当用户在进行输入搜索功能时，若是可以给出有效的提示，这会大大提高用户体验。输入建议和自动完成功能如今处处可见，咱们可使用Javascript添加输入建议，方法是在输入框上设置事件侦听器，而后将搜索到的关键词与预约义的建议相匹配。网站

其实，HTML也是可以让咱们来实现预约义输入建议功能的，经过<datalist>标签来实现。须要注意的是，使用时这个标签的id属性须要和input元素的list属性一致。ui

<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>

Picture标签

你是否遇到过在不一样场景或者不一样尺寸的设备上面的时候，图片展现适配问题呢？我想你们都遇到过。

针对只有一个尺寸的图片素材的时候，咱们每每能够经过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 URL

当咱们的页面有大量的锚点跳转或者静态资源加载时，而且这些跳转或者资源都在统一的域名的场景时，咱们能够经过<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是很是强大的，哪怕咱们仅仅使用这两种技术也能建立出一些奇妙的网站。虽然它们的使用量很大很广泛，仍是有不少的开发者并无真正的深刻了解他们，还有不少的内容须要咱们深刻的去学习和理解，实践，有不少的技巧等待着咱们去发现。