5 个不常提及的 HTML 技巧
共 2596字，需浏览 6分钟
·
2021-07-14 13:28
原文 | https://js.plainenglish.io/5-html-tricks-nobody-is-talking-about-a0480104fe19
图片懒加载
<img src="image.png" loading="lazy" alt="lazy" width="200" height="200" />
输入提示
当用户在进行输入搜索功能时，如果能够给出有效的提示，这会大大提升用户体验。
输入建议和自动完成功能现在到处可见，我们可以使用Javascript添加输入建议，方法是在输入框上设置事件侦听器，然后将搜索到的关键词与预定义的建议相匹配。
其实，HTML也是能够让我们来实现预定义输入建议功能的，通过
<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><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>
我们可以定义不同区间的最小分辨率来确定图片素材，这个标签的使用有些类似
Base URL
当我们的页面有大量的锚点跳转或者静态资源加载时，并且这些跳转或者资源都在统一的域名的场景时，我们可以通过标签来简化这个处理。
例如，我们有一个列表需要跳转到微博的不同大V的主页，我们就可以通过设置来简化跳转路径
<head><base href="https://www.weibo.com/" target="_blank"></head><body><a href="jackiechan">成龙</a><a href="kukoujialing">贾玲</a></body>
标记必须具有href和target属性。
页面重定向（刷新）
当我们希望实现一段时间后或者是立即重定向到另一个页面的功能时，我们可以直接通过HTML来实现。
我们经常会遇到有些站点会有这样一个功能，“5s后页面将跳转”。这个交互可以嵌入到HTML中，直接通过标签，设置http-equiv="refresh"来实现
<meta http-equiv="refresh" content="4; URL='https://google.com' />
这里content属性指定了重定向发生的秒数。值得一提的是，尽管谷歌声称这种形式的重定向和其他的重定向方式一样可用，但是使用这种类型的重定向其实并不是那么的优雅，往往会显得很突兀。
因此，最好在某些特殊的情况下使用它，比如在长时间用户不活动之后再重定向到目标页面。
后记
HTML和CSS是非常强大的，哪怕我们仅仅使用这两种技术也能创建出一些奇妙的网站。
虽然它们的使用量很大很普遍，还是有很多的开发者并没有真正的深入了解他们，还有很多的内容需要我们深入的去学习和理解，实践，有很多的技巧等待着我们去发现。
学习更多技能
请点击下方公众号
