如何在HTML中写循环语句？

<div class="article-content">
  <p>在HTML中实现循环功能需要结合JavaScript或其他模板语言，因为<strong>纯HTML本身不具备编程逻辑能力</strong>，下面详细介绍三种主流实现方式：</p>
  <div class="method">
    <h3>一、使用JavaScript原生循环（推荐）</h3>
    <p>通过JavaScript动态生成重复元素是最常见的方法：</p>
    <pre><code class="language-javascript">// 1. 数据准备
const products = [
  { name: "笔记本", price: 5999 },
  { name: "手机", price: 3999 },
  { name: "耳机", price: 899 }
];
// 2. 获取容器
const container = document.getElementById("product-list");
// 3. 使用forEach循环
products.forEach(item => {
  container.innerHTML += `
    &lt;div class="product-item"&gt;
      &lt;h4&gt;${item.name}&lt;/h4&gt;
      &lt;p&gt;价格：¥${item.price.toFixed(2)}&lt;/p&gt;
    &lt;/div&gt;
  `;
});</code></pre>
    <p><strong>优势</strong>：客户端直接运行，无需服务器支持<br>
    <strong>适用场景</strong>：动态渲染本地数据或API返回数据</p>
  </div>
  <div class="method">
    <h3>二、服务器端模板循环</h3>
    <p>通过后端语言在HTML发送到浏览器前生成内容：</p>
    <div class="code-group">
      <h4>PHP示例：</h4>
      <pre><code class="language-php">&lt;ul&gt;
&lt;?php
$colors = ["红", "绿", "蓝"];
foreach ($colors as $color) {
  echo "&lt;li&gt;$color&lt;/li&gt;";
}
?&gt;
&lt;/ul&gt;</code></pre>
      <h4>Python Flask示例：</h4>
      <pre><code class="language-html">{% for user in user_list %}
  &lt;div class="user-card"&gt;
    {{ user.name }} - {{ user.email }}
  &lt;/div&gt;
{% endfor %}</code></pre>
    </div>
    <p><strong>特点</strong>：提升SEO友好性，适合静态内容<br>
    <strong>注意</strong>：需要服务器环境支持</p>
  </div>
  <div class="method">
    <h3>三、前端框架循环指令</h3>
    <p>现代前端框架提供专用循环语法：</p>
    <div class="code-group">
      <h4>Vue.js示例：</h4>
      <pre><code class="language-html">&lt;div id="app"&gt;
  &lt;ul&gt;
    &lt;li v-for="item in items" :key="item.id"&gt;
      {{ item.text }}
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;script&gt;
new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, text: '选项1' },
      { id: 2, text: '选项2' }
    ]
  }
})
&lt;/script&gt;</code></pre>
      <h4>React示例：</h4>
      <pre><code class="language-jsx">function ListComponent() {
  const items = ['A', 'B', 'C'];
  return (
    &lt;ul&gt;
      {items.map((item, index) =&gt; 
        &lt;li key={index}&gt;{item}&lt;/li&gt;
      )}
    &lt;/ul&gt;
  );
}</code></pre>
    </div>
    <p><strong>优势</strong>：数据驱动视图，维护高效<br>
    <strong>适用场景</strong>：复杂交互的单页面应用(SPA)</p>
  </div>
  <div class="best-practices">
    <h3>最佳实践建议</h3>
    <ul>
      <li><strong>性能优化</strong>：循环超过100项时使用分页/虚拟滚动</li>
      <li><strong>唯一标识</strong>：始终为循环项添加key属性（如Vue的:key）</li>
      <li><strong>数据安全</strong>：使用textContent替代innerHTML防XSS攻击</li>
      <li><strong>SEO考虑</strong>：关键内容优先选择服务器端渲染</li>
    </ul>
  </div>
  <div class="qa-section">
    <h3>常见问题解答</h3>
    <p><strong>Q：能否只用HTML实现循环？</strong><br>
    A：不能，HTML是标记语言，需借助JavaScript或后端语言实现逻辑控制。</p>
    <p><strong>Q：循环中动态内容如何绑定事件？</strong><br>
    A：使用事件委托提高性能：<br>
    <code>document.getElementById('list').addEventListener('click', e => {<br>
    &nbsp;&nbsp;if(e.target.classList.contains('item')) {<br>
    &nbsp;&nbsp;&nbsp;&nbsp;// 处理点击<br>
    &nbsp;&nbsp;}<br>
    });</code></p>
  </div>
  <div class="conclusion">
    <h3>技术选型参考</h3>
    <table>
      <thead>
        <tr>
          <th>场景</th>
          <th>推荐方案</th>
          <th>复杂度</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>简单静态页面</td>
          <td>JavaScript原生循环</td>
          <td>★☆☆</td>
        </tr>
        <tr>
          <td>内容型网站（博客/新闻）</td>
          <td>服务器端模板</td>
          <td>★★☆</td>
        </tr>
        <tr>
          <td>交互复杂应用</td>
          <td>Vue/React框架</td>
          <td>★★★</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="reference">
    <p>参考来源：</p>
    <ul>
      <li>MDN Web文档 - Loops and iteration</li>
      <li>Vue.js官方文档 - 列表渲染</li>
      <li>Google Web Fundamentals - DOM操作优化</li>
      <li>PHP手册 - Control Structures</li>
    </ul>
  </div>
  <style>
    .article-content {
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.6;
      color: #333;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    h3 {
      color: #2c3e50;
      border-left: 4px solid #3498db;
      padding-left: 12px;
      margin-top: 2em;
    }
    .method {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 20px;
      margin: 25px 0;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    pre {
      background: #2d2d2d;
      color: #f8f8f2;
      padding: 16px;
      border-radius: 6px;
      overflow: auto;
      margin: 20px 0;
    }
    .code-group {
      margin-bottom: 25px;
    }
    .code-group h4 {
      color: #e74c3c;
      margin-bottom: 8px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }
    th {
      background: #3498db;
      color: white;
    }
    td, th {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: left;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    .best-practices ul {
      padding-left: 24px;
    }
    .best-practices li {
      margin-bottom: 10px;
    }
    .qa-section p {
      background: #e3f2fd;
      padding: 15px;
      border-radius: 6px;
    }
    .reference {
      font-size: 0.9em;
      color: #7f8c8d;
      margin-top: 40px;
      padding-top: 20px;
      border-top: 1px solid #eee;
    }
    @media (max-width: 600px) {
      pre {
        font-size: 14px;
        padding: 12px;
      }
    }
  </style>
</div>