xx996
0%

html知识点

Img 标签在不同设备上显示不同的图片

1
2
3
4
5
<picture>
  <source media="(min-width:768px)" srcset="med_flag.jpg" />
  <source media="(min-width:495px)" srcset="small_flower.jpg" />
  <img src="high_flag.jpg" alt="Flags" style="width:auto;" />
</picture>

快速搜索匹配项

1
2
3
4
5
6
7
8
9
10
<label for="country">Choose your country from the list:</label>
<input list="countries" name="country" id="country" />

<datalist id="countries">
  <option value="UK"></option>
  <option value="Germany"></option>
  <option value="USA"></option>
  <option value="Japan"></option>
  <option value="India"></option>
</datalist>

Html 标签变量

1
2
3
4
5
6
7
8
<head>
  <base href="https://www.twitter.com/" target="_blank" />
</head>

<body>
  <img src="elonmusk" alt="Elon Musk" />
  <a href="BillGates">Bill Gate</a>
</body>

img标签的完整地址是https://www.twitter.com/elonmusk

a标签同样

图片懒加载

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

使用 CSS 固定 header 与 footer

1
2
3
4
5
<div id="container">
  <header>header</header>

  <footer>footer</footer>
</div>
1
2
3
4
5
6
7
8
header {
  position: sticky;
  top: 0;
}
footer {
  position: sticky;
  bottom: 0;
}

使用 Promise 实现任务进度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const loadingBar = document.getElementById("loadingBar");

async function task() {
  return new Promise((res) => {
    setTimeout(res, Math.random() * 5000);
  });
}

function loadingBarStatus(current, max) {
  loadingBar.textContent = `Loading ${current} of ${max}`;
}

(async () => {
  let current = 1;
  const promises = new Array(100)
    .fill(0)
    .map(() => task().then(() => loadingBarStatus(current++, 100)));

  await Promise.all(promises);
  loadingBar.textContent = `Loading Finished`;
})();