首页用html跟js做一个前端项目

用html跟js做一个前端项目

时间: 2024-12-23 14:19:45 浏览: 6

创建一个简单的HTML和JavaScript前端项目通常涉及以下几个步骤： 1. **项目结构设置**：首先，你需要创建一个新的文件夹来存放项目，里面可以包含三个基本文件：`index.html`、`style.css` 和 `script.js`。`index.html` 是项目的入口文件。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的前端项目</title> <link rel="stylesheet" href="style.css"> </head> <body>  <h1 id="greeting">Hello, World!</h1> <script src="script.js"></script> </body> </html> ``` 2. **HTML布局**：`index.html` 中包含了基本的HTML元素，如标题和一个`<h1>`标签，用于显示动态生成的内容。 3. **CSS样式**：在`style.css` 文件中添加样式来美化页面，比如给元素设置颜色、字体等。 ```css body { font-family: Arial, sans-serif; } #greeting { color: blue; } ``` 4. **JavaScript交互**：在`script.js` 文件中，你可以开始编写JavaScript代码来控制页面的行为。例如，你可以使用DOM操作来改变`greeting` 的文本。 ```javascript document.addEventListener("DOMContentLoaded", function() { var greeting = document.getElementById("greeting"); greeting.textContent = "欢迎来到我的网站!"; }); ```

阅读全文