5个HTML技巧

2021-10-12 01:33:27 作者：互联网

图片懒加载：用户滚动到图片出现时再进行加载，否则不加载
```
1 <img src="xxx.png" loading="lazy">
```

输入提示

1         <label for="country">国家：</label>
2         <input list="countries" name="country" id="country"/>
3         <datalist id="countries">
4             <option value ="UK"></option>
5             <option value ="Germany"></option>
6             <option value ="USA"></option>
7             <option value="Japan"></option>
8             <option value="China"></option>
9         </datalist>

根据分辨率加载不同的图片

1 <picture>
2     <source media="(min-width:768px)" srcset="xxxx.jpg">
3     <source media="(min-width:459px)" srcset="xxxx.png">
4     <img src="high_flower" style="width:auto;"/>
5 </picture>

Base URL

1     <head>
2         <base href="https://www.weibo.com" target="_blank"/>
3     </head>
4     <body>
5         <a href="jackiechen">成龙</a>
6         <a href="kukoujialing">贾玲</a>
7     </body>

页面重定向（刷新）

1 <meta http-equiv="refresh" content="5; URL='https://www.baidu.com'" />                     //5秒后跳转到百度首页

标签：Base,技巧,URL,贾玲,HTML,跳转,加载,图片
来源： https://www.cnblogs.com/zk-blog-2021-6-11/p/15182438.html