编程技术分享

Appearance

前端开发基础 ​

什么是前端开发？ ​

前端开发是指创建用户在浏览器中直接看到和交互的部分。它主要包括三大核心技术：HTML、CSS 和 JavaScript。

HTML - 网页结构 ​

HTML（HyperText Markup Language）是网页的骨架，定义了页面的结构和内容。

基础示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是一段正文内容。</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2026 版权所有</p>
    </footer>
</body>
</html>

常用HTML标签 ​

标签作用示例
<div>容器元素<div>内容</div>
<p>段落<p>段落文字</p>
<a>链接<a href="url">链接文字</a>
<img>图片<img src="image.jpg" alt="描述">
<button>按钮<button>点击</button>
<form>表单<form>表单内容</form>

CSS - 网页样式 ​

CSS（Cascading Style Sheets）负责网页的视觉呈现和布局。

基础语法 ​

css
/* 选择器 { 属性: 值; } */
h1 {
    color: #333;
    font-size: 32px;
    text-align: center;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

#header {
    background-color: #f0f0f0;
    border-bottom: 2px solid #ddd;
}

布局技术 ​

Flexbox（弹性布局） ​

css
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.flex-item {
    flex: 1;
}

Grid（网格布局） ​

css
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-item {
    background-color: #f9f9f9;
    padding: 20px;
}

响应式设计 ​

css
/* 移动端优先 */
.container {
    width: 100%;
    padding: 10px;
}

/* 平板设备 */
@media (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

JavaScript - 网页交互 ​

JavaScript 为网页添加动态交互功能。

基础语法 ​

javascript
// 变量声明
let name = '张三';
const age = 25;

// 函数
function greet(userName) {
    return `你好，${userName}！`;
}

// 箭头函数
const add = (a, b) => a + b;

// 条件语句
if (age >= 18) {
    console.log('成年人');
} else {
    console.log('未成年人');
}

// 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// 数组操作
const fruits = ['苹果', '香蕉', '橙子'];
fruits.forEach(fruit => console.log(fruit));

DOM 操作 ​

javascript
// 获取元素
const button = document.querySelector('#myButton');
const div = document.getElementById('myDiv');

// 修改内容
div.textContent = '新内容';
div.innerHTML = '<p>HTML内容</p>';

// 修改样式
div.style.color = 'blue';
div.classList.add('active');

// 事件监听
button.addEventListener('click', function() {
    alert('按钮被点击了！');
});

异步编程 ​

javascript
// Promise
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('错误:', error));

// Async/Await
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('错误:', error);
    }
}

现代前端框架 ​

Vue.js ​

vue
<template>
  <div class="counter">
    <h2>计数器: {{ count }}</h2>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

const decrement = () => {
  count.value--;
};
</script>

<style scoped>
.counter {
  text-align: center;
  padding: 20px;
}

button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 16px;
}
</style>

React ​

jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="counter">
      <h2>计数器: {count}</h2>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>
    </div>
  );
}

export default Counter;

前端工具链 ​

包管理器 ​

bash
# 安装依赖
npm install

# 添加包
npm install vue

# 开发依赖
npm install -D vite
bash
# 安装依赖
pnpm install

# 添加包
pnpm add vue

# 开发依赖
pnpm add -D vite
bash
# 安装依赖
yarn install

# 添加包
yarn add vue

# 开发依赖
yarn add -D vite

构建工具 ​

Vite ​

javascript
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  }
});

最佳实践 ​

1. 语义化HTML ​

html
<!-- 好的做法 ✓ -->
<article>
  <header>
    <h1>文章标题</h1>
    <time datetime="2026-01-09">2026年1月9日</time>
  </header>
  <section>
    <p>文章内容...</p>
  </section>
</article>

<!-- 不好的做法 ✗ -->
<div>
  <div>文章标题</div>
  <div>2026年1月9日</div>
  <div>文章内容...</div>
</div>

2. CSS命名规范（BEM） ​

css
/* Block（块） */
.card { }

/* Element（元素） */
.card__title { }
.card__content { }

/* Modifier（修饰符） */
.card--featured { }
.card__title--large { }

3. JavaScript 模块化 ​

javascript
// utils.js
export function formatDate(date) {
  return date.toLocaleDateString('zh-CN');
}

export function formatPrice(price) {
  return `¥${price.toFixed(2)}`;
}

// main.js
import { formatDate, formatPrice } from './utils.js';

console.log(formatDate(new Date()));
console.log(formatPrice(99.99));

学习资源 ​

下一步 ​

学习完前端基础后，可以继续学习：

  • 后端开发基础
  • 前端性能优化
  • Web 安全
  • 单元测试