3个 不常见但有用的 HTML 元素

1.<abbr>

用于表示的缩写或简称。如果包含title属性，则文本将在悬停时显示为工具提示

<p>
  The <abbr title="Product Detail Page">PDP</abbr> provides
  information on a specific product.
</p>

2.<progress>

显示一个进度条指示器，可以使用它的value属性轻松控制。本示例中的 JavaScript 将每 100 毫秒增量填充我们的进度条

<label for="progress">Progress:</label>
<progress id="progress" max="100" value="0"></progress>

<script>
  const progress = document.querySelector('#progress');
  let val = 0;

  setProgress();
  function setProgress() {
    if (val > 100) val = 0;
    progress.value = ++val;
    setTimeout(setProgress, 100);
  }
</script>

3.<wbr>

允许您准确指定文本行溢出时应中断的位置。例如，如果我们有一个像这个 URL 一样的超长文本行，我们可以告诉浏览器如果文本不适合一行，它应该在哪里中断

<p>
http://is.this.just.real.life.com/is<wbr>/this/just/fantasy/caught/in/a/landslide/no/espace/from/reality
</p>