前端技术栈通常包括 HTML、CSS 和 JavaScript，以及一系列现代前端框架和工具，如 React、Vue.js、Angular、Ember.js 等。这些技术用于构建用户界面和交互式网站。下面是一个简单的前端代码示例，展示了如何使用 HTML、CSS 和 JavaScript 创建一个简单的计数器。
### HTML (index.html) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Counter</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="counter"> <h1 id="count">0</h1> <button id="increment">Increment</button> <button id="decrement">Decrement</button> </div> <script src="script.js"></script> </body> </html> ``` ### CSS (styles.css) ```css .counter { text-align: center; padding: 20px; } button { margin: 10px; padding: 10px 20px; cursor: pointer; } #count { font-size: 2em; font-weight: bold; } ``` ### JavaScript (script.js) ```javascript document.addEventListener('DOMContentLoaded', () => { let count = 0; const countDisplay = document.getElementById('count'); const incrementButton = document.getElementById('increment'); const decrementButton = document.getElementById('decrement'); incrementButton.addEventListener('click', () => { count++; countDisplay.textContent = count; }); decrementButton.addEventListener('click', () => { count--; countDisplay.textContent = count; }); }); ```
在这个例子中，我们创建了一个简单的计数器界面。HTML 文件定义了页面结构，包括显示计数的 `<h1>` 元素和两个按钮用于增加和减少计数值。CSS 文件添加了一些基本的样式，使界面更加美观。JavaScript 文件包含了逻辑，当用户点击按钮时更新计数显示。
现代前端开发还可能涉及到使用前端框架和库，例如 React：
### React 组件 (Counter.js) ```jsx import React, { useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); const handleIncrement = () => { setCount(count + 1); }; const handleDecrement = () => { setCount(count - 1); }; return ( <div className="counter"> <h1 id="count">{count}</h1> <button onClick={handleIncrement}>Increment</button> <button onClick={handleDecrement}>Decrement</button> </div> ); }; export default Counter; ```
在这个 React 组件中，我们使用了 `useState` 钩子来管理组件的状态。`handleIncrement` 和 `handleDecrement` 函数作为事件处理程序，分别在点击增加和减少按钮时调用，以更新计数值。
前端开发还包括构建工具（如 Webpack）、包管理器（如 npm 或 yarn）、CSS 预处理器（如 Sass 或 Less）、以及代码质量和格式化工具（如 ESLint 和 Prettier）。这些工具和库共同构成了现代前端技术栈的一部分。
