search

mileOfSunshine / blog

2 stars 0 forks source link

HTML #31

Open mileOfSunshine opened 3 years ago

mileOfSunshine commented 3 years ago

5 HTML Tricks Nobody is Talking About

译文

  1. Lazy loading image 图片懒加载
<img src="https://p5.ssl.qhimg.com/d/inn/71f3b0033950/500.png" loading="lazy" alt="…" width="200" height="200">
  1. Input suggestions 输入提示
<label for="country">Choose your country from the list:</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">
</datalist>
  1. Picture tag Picture标签
<picture>
  <source media="(min-width:768px)" srcset="https://p5.ssl.qhimg.com/d/inn/71f3b0033950/500.png">
  <source media="(min-width:495px)" srcset="https://p0.ssl.qhimg.com/d/inn/1b614915e5d2/250.png">
  <img src="https://p0.ssl.qhimg.com/d/inn/3055cd0bf86d/100.png" alt="Flags" style="width:auto;">
</picture>
  1. Base URL
<head>
  <base href="https://www.weibo.com/" target="_blank">  
</head>
<body>
  <a href="jackiechan">成龙</a>
  <a href="kukoujialing">贾玲</a>
</body>
  1. Document refresher 页面重定向（刷新）
<meta http-equiv="refresh" content="4; URL='https://google.com'" />