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

2025-06-07

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

1）<abbr>

abbreviation 元素<abbr>用于表示首字母缩略词或缩写。如果添加title属性，文本将在鼠标悬停时显示为工具提示！

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

2）<progress>

该<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>
Enter fullscreen mode Exit fullscreen mode

3）<wbr>

断行机会<wbr>元素可以让你精确地指定文本溢出时应该在何处断行。例如，如果我们有一行超长的文本，例如这个 URL，我们可以告诉浏览器，如果一行放不下，应该在何处断行：

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

哟！我经常发布类似的小技巧。想了解更多，就关注我吧！🍿

我在TikTok、Twitter上，并且即将推出一门新的调试课程！

文章来源：https://dev.to/js_bits_bill/3-uncommon-but-useful-html-elements-jdi
Devto 翻译
PREV
SVG 为何如此危险
NEXT
JavaScript 中的原型模式