HTML本身没有循环语句，因其是标记语言而非编程语言，不解析逻辑、不执行变量、不遍历数组；循环需依赖JavaScript、服务端模板引擎或静态站点生成器实现。
HTML 本身没有循环语句，写不了循环代码 —— 所有试图在纯 HTML 里用 <!-- for i in items --> 这类写法的，都会被浏览器直接当注释忽略。
为什么不能在 HTML 里写 for 循环
HTML 是标记语言，不是编程语言。它不解析逻辑、不执行变量、不遍历数组。for、while、forEach 这些关键词在 HTML 文件里出现，除非被 JavaScript 或服务端模板引擎处理，否则就是一段静态文本。
常见错误现象：
– 页面上直接显示 {% for item in list %} 或 <?php foreach($arr as $v) { ?>
– 用浏览器“查看源代码”看到循环语法原样存在，但页面没渲染出预期内容
– 误以为引入了某个 JS 库就能让 HTML 自动识别 v-for，却忘了没加载 Vue
真正能实现 HTML 循环的三种方式
必须依赖外部能力，选哪种取决于你的技术栈和运行环境：
立即学习“前端免费学习笔记（深入）”；
- 前端运行时：用
JavaScript拼接字符串或操作 DOM（如innerHTML、document.createElement） - 构建时/服务端：用模板引擎，比如
Vue的v-for、React的{items.map(...)}、PHP的foreach、Twig的{% for %} - 静态站点生成器：如
Hugo的{{ range .Pages }}、Jekyll的{% for post in site.posts %}
注意：v-for 不是 HTML 标准属性，没引入 Vue 就写上去，浏览器不会报错，但也不会生效；{items.map(...)} 必须写在 JSX 或 React 组件内，裸写在 .html 文件里等于无效文本。
用 JavaScript 动态生成列表最简示例
这是最常被问到、也最容易当场验证的方式。假设你要把一个数组渲染成 <ul></ul> 列表：
const data = ['苹果', '香蕉', '橙子'];
const list = document.querySelector('#fruit-list');
list.innerHTML = data.map(item => `<li>${item}</li>`).join('');关键点：
– map 是数组方法，不是 HTML 功能
– innerHTML 会替换整个内容，频繁调用影响性能
– 如果 item 含用户输入内容，直接拼接有 XSS 风险，应改用 textContent 或 DOM 方法创建节点
– 没有框架时，增删项需手动重新生成整个列表，不推荐用于高频交互场景
容易被忽略的兼容性与调试陷阱
很多人卡在“写了却看不到效果”，问题往往不在循环逻辑本身：
-
document.querySelector返回null：DOM 还没加载完就执行 JS，应放在<script></script>标签末尾，或用DOMContentLoaded事件 - 模板字符串里漏了反引号：
"<li>${item}</li>"会导致${item}原样输出，必须用`<li>${item}</li>` - 服务端模板语法被当成纯文本：确认后端是否真的启用了对应引擎（例如 PHP 文件没以
.php后缀保存，foreach就不会执行） - Vue 的
v-for报错Unknown custom element：说明组件没注册，或Vue实例根本没挂载成功
复杂点在于：你得先分清当前代码是在浏览器里跑、还是在 Node 里编译、还是在 Apache 上解释 —— 同一段带循环的代码，在不同环节生效条件完全不同。
