5个HTML的小技巧

 1.使用 <details> 和 <summary> 创建可折叠内容

<details> 和 <summary> 标签可以创建用户点击时展开或折叠的内容块，非常适合 FAQ 或隐藏的说明。

<details>
  <summary>点击展开详细信息</summary>
  <p>这是一些隐藏的内容，点击上方可以展开或折叠。</p>
</details>

2.将文本显示为下标和上标

<sub>和<sup>元素可分别用于将文本显示为下标和上标。

<p>水的化学式是 H<sub>2</sub>O。</p>

<p>平方公式是 a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>。</p>

3.利用 <template> 创建可复用的 HTML 模板

<template> 标签中的内容不会被直接渲染，但可以在 JavaScript 中克隆和插入，非常适合用于动态组件。

<template id="my-template">
  <div class="item">这是一个模板内容。</div>
</template>
<script>
  const template = document.getElementById("my-template").content.cloneNode(true);
  document.body.appendChild(template);
</script>

4.使用 download 属性直接下载文件

在 <a> 标签中添加 download 属性，可创建文件下载链接，不打开文件直接下载到用户设备。

<a href="example.pdf" download="example.pdf">下载 PDF 文件</a>

5.支持多选下拉

您可以将multiple属性与<input>和<select>元素一起使用，以允许用户一次选择/输入multiple值。

<input type="file" multiple />
<select multiple>
    <option value="java">Java</option>
    <option value="javascript">JavaScript</option>
    <option value="typescript">TypeScript</option>
    <option value="rust">Rust</option>
</select>