如何在 HTML 中创建循环答案

【问题标题】：How to make a loop in HTML如何在 HTML 中创建循环
【发布时间】：2018-01-16 13:33:10
【问题描述】：

我有一个带有投资组合的 html 文件。每个投资组合项目如下所示：

<div class="item">
    <div class="portfolio-item">
            <a href="img/portfolio-item-1.jpg" data-lightbox="image-1">
               <img src="img/portfolio-item-1.jpg">
            </a>
    </div>
</div>

有没有一种简单易行的方法来制作循环。因此，我创建了多个这些 div，并且每次更改数字时。所以第二次我必须得到portfolio-item-2。

【问题讨论】：

您至少需要香草 javascript。
HTML 是一种标记语言。你需要js。
HTML 不能做这样的事情。 HTML 不是编程或脚本语言。它只是一种标记语言。为此，您需要 JavaScript、PHP 或其他一些脚本/编程语言。或者简单地复制、粘贴和手动编辑。
您需要JavaScript。 HTML 不是为此而设计的

标签： html loops

【解决方案1】：

HTML 不是一种编程语言，也没有编写循环的能力。为此，您将需要一些其他语言来生成 HTML，例如JavaScript。

【讨论】：

【解决方案2】：

你可以像这样使用一些 JavaScript：

for(var i = 0; i < 10; i++) {
   document.body.innerHTML += '<div class="item"><div class="portfolio-item"><a href="img/portfolio-item-' + i + '.jpg" data-lightbox="image-' + i + '"><img src="img/portfolio-item-' + i + '.jpg"></a></div></div>'
}

然后您可以更改i < 10 来更改输出的项目数。

此示例仅输出到 body 标签，因此您还需要将其更改为您希望这些项目输出的容器。

【讨论】：

【解决方案3】：

维基百科这样定义 HTML：

超文本标记语言 (HTML) 是一种用于创建网页的标记语言[1]

维基百科这样定义标记语言：

标记语言是一种计算机语言。它由一组指令和数据组成。它与编程语言不同，因为只有编程语言可以有 if 语句和其他条件语句。 [1]第一种标记语言用于打印；有文字，还有如何打印文字的说明。

来源：HTML、Markup language

这意味着循环之类的事情不能在 HTML 中完成，你需要其他的东西。通常最简单的选择是使用JavaScript。您可以使用 JavaScript 执行各种操作，包括将图像插入网页和使用循环、控制网页的工作方式而不是静态的。

首先，我可以向您推荐一个不错的免费tutorial here，但您也应该对loops 感兴趣。

【讨论】：