步骤 1：创建景点和活动列表

• 创建一个名为 "Attractions" 的新文件夹。
• 在该文件夹中创建两个文件：
  • Attractions.json：这是一个 JSON 文件，其中包含所有景点和活动的 JSON 对象。
  • Attractions.html：这是一个 HTML 文件，用于显示景点和活动的列表。

步骤 2：编写 JSON 文件

• 在 Attractions.json 中添加所有景点和活动的 JSON 对象。
• 每项对象应包含以下属性：
  • name：景点或活动的名称。
  • description：景点或活动的描述。
  • image：景点或活动的图片。
  • url：景点或活动的网站链接。
  • rating：景点或活动的评分。

步骤 3：编写 HTML 文件

• 在 Attractions.html 中添加以下 HTML 代码：

  



Attractions

• 在 Attractions.js 中添加以下 JavaScript 代码：

const attractions = JSON.parse(document.getElementById('attractions').innerHTML);

const list = document.getElementById('attractions');
for (const attraction of attractions) {
  const li = document.createElement('li');
  li.innerHTML = `
    
    ${attraction.name}
    

  `;
  list.appendChild(li);
}

步骤 4：运行程序

• 将您的 HTML 文件保存为 index.html。
• 启动运行您的应用程序。
• 在浏览器的地址栏中输入 localhost:8000，其中 8000 是默认端口。

注意：

• 您可以在 Attractions.json 中添加任何您想要添加的景点或活动。
• 您也可以使用任何 HTML 框架或库来简化 HTML 文件的编写。
• 您也可以使用任何 JavaScript 库来动态添加景点和活动。