您应该使用的 5 个鲜为人知的 HTML 标签

你好，好久不见啊？

这一次，我们将再次关注 HTML。有一天，我在 MDN 上浏览时，决定寻找一些鲜为人知的标记。你知道，每个人都使用 <div>、<p>、<span>，但你听说过 <wbr> 或 <mark> 吗？没听说过？那我们就开始吧

1.<wbr> – 换行机会元素

<wbr> 标签允许我们作为开发人员决定选择，当区块太小无法显示全部内容时，HTML 应在何处换行：

<div class ="resizable-div">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.<wbr> 
  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  <wbr> 
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<wbr>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <wbr>
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

现在，该文本将在 <wbr> 上中断，而不是像它希望的那样 添加 CSS，使其可以调整大小：

.resizable-div{
  resize: horizontal;
  overflow: hidden;
  width: 40%;
  border: 5px dashed #111;
}

<wbr> 是一个 void 元素，因此它没有任何结束标记（有关 void 元素和尾部斜线的更多信息，请点击此处），浏览器也支持它

想了解更多信息：规范和 MDN 是你的朋友

2.<details> 和 <summary>- 一个非常适合常见问题和解释的小工具

通过该元素，我们无需使用 JS 即可创建美观的折叠效果。

要为 <details> 制作 “标题”，我们使用 <summary> 标签。它为元素定义了一个标签

让我们现在就创建一个：

<details open>
  <summary>Does it work?</summary>
  <p>Yes it does, amazing isn't it</p>
</details>
<details>
  <summary>And will it work as well as the first one?</summary>
  <p>As always, it works and looks fire</p>
</details>
<details>
  <summary>And just for the sake of being</summary>
  <p>We've got 3 details tags</p>
</details>

open属性可使详细信息（如其所述）呈打开状态

是时候来点样式了！

details{
  font-size: 40px;
  padding: 10px;
  border: 1px dashed #ccc;
  width: 20em;
}

details > summary{
    border: 2px solid #ddd;
    width: 15em;
    padding: 1%;
}

details > p::before{
  content: "\00a0\00a0\00a0\00a0"
}

目前运行正常。

要使其成为真正的折叠面板，请在此处添加小 JS：

const details = document.querySelectorAll('details')
const summaries = document.querySelectorAll('summary')

summaries.forEach(summary => {
  summary.addEventListener("click", () => {
    details.forEach(detail => {
      if (detail !== summary.parentNode) {
        detail.removeAttribute("open")
      }
    })

    setTimeout(() => {
      summary.parentNode.setAttribute("open", "")
    }, 0)
  }, false)
})

仅此而已。这种标签很常见，因此不必担心兼容性问题

更多信息来源：

• Specs
• MDN

3.<mark> – HTML 中的荧光笔

就像在纸上一样，有时你想指出重要的文本片段。因此，我们要突出它们。在实体文件中，这很容易

但对于 HTML 页面…

也一样！<mark> 元素可以帮助您。它能为文本添加黄色高亮标记。

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae nisi feugiat, porttitor lectus a, cursus massa. Cras eget libero vel nisi porttitor volutpat. <mark>Praesent ultricies nibh porttitor lorem posuere venenatis.</mark>
Donec quis odio eu nisl malesuada dapibus. Aliquam blandit ipsum vel consequat pharetra. Praesent lobortis, nisl nec tempus convallis, turpis nibh auctor quam, quis lacinia dui risus eu lorem.
Duis sapien risus, lobortis in pellentesque eu, malesuada non diam. Aenean blandit ante dui, non mattis enim semper nec. 
</div>

但是，对于这个要素，有一个免责声明

可访问性问题

在谈论web开发时，可访问性经常被忽略。这让人感到有些遗憾。

虽然 <mark> 增加了视觉上的强调，但屏幕阅读器却不会识别它们。

对于他们来说，这个

<p> Lorem ipsum dolor sit amet</p>

而这

<p>Lorem ipsum <mark>dolor sit</mark> amet</p>

是一样的。如果我们真的想在阅读文本时包含它们，可以在 CSS 中添加 :before 和 :after

mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [highlight start] ";
}

mark::after {
  content: " [highlight end] ";
}

Source: MDN

但不要过度使用！它会增加不必要的混乱和冗长。只有在有必要突出重点以正确理解内容的重要性时才使用。

资料来源:

• MDN
• Specs

4.<address> – 所有联系人数据的语义标签

这个标签对于分组非常有用。即使从 HTML 代码中，我们也能一眼看出这部分是地址

<section>
  Do you need something?
  <address>
    Contact me via
    mail: wizarddos.business@gmail.com
    tel: 000 000 000
  </address>
</section>

该标准提出的唯一限制是不应有标题或分节内容（因此没有 <h1> 或 <article> 标记）。

资料来源:

• MDN
• Specs

5.<q> – 简短的内联引语

如果您需要引用您最喜欢的小说、诗歌或网上文章中的简单诗句，<q> 将非常乐意为您提供帮助。

和 <blockquote> 一样，它也用于引用。但 <q> 并不创建新的块，而是将自身与文本混合在一起

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <q>Praesent ultricies nibh porttitor lorem posuere venenatis.</q>
Donec quis odio eu nisl malesuada dapibus. Aliquam blandit ipsum vel consequat pharetra. Praesent lobortis, nisl nec tempus convallis, turpis nibh auctor quam, quis lacinia dui risus eu lorem. 
</div>

它还会在引用部分添加小引号（"）。说到引用，您可以使用cite属性添加资料来源

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <q cite = "https://wizarddos.github.io/blog">Praesent ultricies nibh porttitor lorem posuere venenatis.</q>
Donec quis odio eu nisl malesuada dapibus. Aliquam blandit ipsum vel consequat pharetra. Praesent lobortis, nisl nec tempus convallis, turpis nibh auctor quam, quis lacinia dui risus eu lorem. 
</div>

引用纯粹是为了指出来源。它不会产生链接

资料来源:

• MDN
• Specs

差不多就是这样