template标签的用途是什么？HTML模板怎么使用？

<template id="myTemplate">
  <p>这是一个模板内容。</p>
</template>

<script>
  const template = document.getElementById('myTemplate');
  const templateContent = template.content;

  // 克隆模板内容
  const clonedContent = templateContent.cloneNode(true);

  // 将克隆的内容添加到页面
  document.body.appendChild(clonedContent);
</script>

<template id="userTemplate">
  <p>用户名：<span>{{username}}</span></p>
  <p>邮箱：<span>{{email}}</span></p>
</template>

<script>
  const template = document.getElementById('userTemplate');
  const userData = { username: 'JohnDoe', email: 'john.doe@example.com' };

  // 创建一个函数来替换模板中的变量
  function populateTemplate(data) {
    const templateContent = template.content.cloneNode(true);
    const usernameSpan = templateContent.querySelector('span:first-child');
    const emailSpan = templateContent.querySelector('span:last-child');

    usernameSpan.textContent = data.username;
    emailSpan.textContent = data.email;

    return templateContent;
  }

  // 使用数据填充模板
  const populatedTemplate = populateTemplate(userData);

  // 将填充后的模板添加到页面
  document.body.appendChild(populatedTemplate);
</script>

<template id="listItemTemplate">
  <li><span>{{item}}</span></li>
</template>

<ul id="myList"></ul>

<script>
  const template = document.getElementById('listItemTemplate');
  const list = document.getElementById('myList');
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  // 使用DocumentFragment批量添加列表项
  const fragment = document.createDocumentFragment();

  items.forEach(item => {
    const templateContent = template.content.cloneNode(true);
    const span = templateContent.querySelector('span');
    span.textContent = item;
    fragment.appendChild(templateContent);
  });

  list.appendChild(fragment);
</script>