不常提及但使用有效的HTML技巧

图片懒加载

可以通过为图片文件添加loading="lazy"的属性来实现:

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

输入提示

HTML也是能够让我们来实现预定义输入建议功能的，通过标签来实现。需要注意的是，使用时这个标签的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>

Picture标签

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

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

页面重定向（刷新）

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

转自：前端技术网站

不常提及但使用有效的HTML技巧相关推荐

5 个不常提及的 HTML 技巧
点击⬇️方"逆锋起笔",公众号回复编程资源领取大佬们推荐的学习资料编译:冷星来源:SegmentFault 思否社区 Web开发人员都在广泛的使用HTML.无论你使用什么框 ...
训练技巧详解【含有部分代码】Bag of Tricks for Image Classification with Convolutional Neural Networks
论文地址:https://arxiv.org/pdf/1812.01187.pdf 更多方法和代码可见:图像分类任务中的tricks总结更多更全的tricks补充(补充链接也是福利满满~) 目录 2 ...
提升10%！如何将机器学习模型准确率从80%提高到90%以上
全文共2402字,预计学习时长7分钟图源:unsplash 说实在的,如果你有过项目实践经历,就会明白80%的精确度并不算糟糕.但在现实世界中,人们期望精确度不会少于80%.事实上,我工作过的大多数 ...
基于 Webpack4 搭建 Vue 开发环境
查看全文 http://www.taodudu.cc/news/show-3248562.html 相关文章: 大端字节序码流中取出2字节_graalvm字节码到位码 XMlL MongoDB增删改查 ...
Go 语言将成为恶意软件开发者的首选
点击⬇️方"逆锋起笔",公众号回复 pdf 领取大佬们推荐的学习资料整理 | 田晓旭近日,网络安全公司 Intezer 发布了 2020 年基于 Go 语言恶意软件的报告.报告 ...
【拉斯观测组联翻】川原砾 Sword Art Online 27 Unital Ring Ⅵ
========================================== Sword Art Online 27 Unital Ring VI 電撃文庫 ================= ...
漫谈 HTTP 连接
点击下方"逆锋起笔",公众号回复编程资源领取大佬们推荐的学习资料原文链接:https://www.cnblogs.com/huansky/p/14221846.html 本文首 ...
亚马逊：用CNN进行图像分类的Tricks
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达来源: arXiv 编辑:刘晓坤.思源自 2012 年 Alex ...
软件从业人员如何激发敏捷团队？
集中办公怎样才能极大地提高团队的生产效率呢?答案是让每个人都坐在一起. 集中办公的团队效率就是要高一些.问题不仅可以很快地在现场得到解决,而且彼此间的交流也会更加顺畅,并能很快建立起信任.集中办公的 ...