更新网站图标
通过在Favicon文件名中添加?v=2
来强制浏览器下载新图标。
1 | <link rel=”icon” href=”/favicon.ico?v=2″ /> |
mark标签 文字高亮
1 | <p><mark>1905年6月9日</mark>,设想人长生不死。</p> |
图片懒加载 loading=”lazy”
兼容性:Lazy loading via attribute for images & iframes
不考虑兼容性的情况下,可以通过为图片添加loading="lazy"
属性来实现图片懒加载:
1 | <img src=”xxx.png” loading=”lazy” alt=”lazy”/> |
Picture标签
HTML提供了<picture>
标签,允许我们添加多个图片资源,并且根据不同的分辨率需求来展示不同的图片:
1 2 3 4 5 | <picture> <source media=”(min-width:768px)” srcset=”https://picsum.photos/id/1000/400/400″> <source media=”(min-width:495px)” srcset=”https://picsum.photos/id/1000/200/200″> <img src=”https://picsum.photos/id/1000/600/600″/> </picture> |
使用.webp格式缩小图像并提高网站性能
1 2 3 4 5 6 7 8 9 10 | <picture> <!– load .webp image if supported –> <source srcset=”logo.webp” type=”image/webp”> <!– Fallback if `.webp` images or <picture> tag not supported by the browser. –> <img src=”logo.png” alt=”logo”> </picture> |
datalist 输入提示
通过<datalist>
标签实现下拉选择(注意,<datalist>
标签的id属性需要和input元素的list属性一致):
1 2 3 4 5 6 | <input list=”staffs”> <datalist id=”staffs”> <option value=”Michael”> <option value=”Jack”> <option value=”Tom”> </datalist> |
Base URL
当页面有大量的锚点跳转或者静态资源加载,并且这些链接在同一域名下时,可以通过<base>
标签简化链接(<base>
标签必须具有href
和target
属性):
1 2 3 4 5 6 7 | <head> <base href=”https://picsum.photos/” target=”_blank”> </head> <body> <a href=”id/1/200/200″> source1 </a> <a href=”id/2/200/200″> source2 </a> </body> |
页面重定向(刷新)
“5s后页面将跳转”,这个交互可以通过<meta>
标签设置http-equiv="refresh"
来实现:
1 | <meta http-equiv=”refresh” content=”5; URL=’https://google.com’ /> |
这里content
属性指定了重定向发生的秒数。使用这种类型的重定向其实并不是那么的优雅,往往会显得很突兀。因此,最好在某些特殊的情况下使用它,比如在长时间用户不活动之后再重定向到目标页面。
发表回复