# Web 前端基础讲解 | 仲夏夜之梦
爱与回忆的小世界，记录生活中的每一份温暖与感动

Skip to content

# Web 前端基础讲解

约 4108 字大约 14 分钟

2025-10-28

## 前端开发到底是什么？

前端开发，简单来说，就是你能在网页上看到和互动的一切。

想象一下你正在看一个网站：

- 文字、图片、按钮、菜单：这些都是前端开发人员用代码“画”出来的。
- 点击按钮会发生什么、输入框能打字、图片能放大缩小：这些互动效果也是前端开发人员用代码实现的。

所以，前端开发就是负责把设计师画好的网站样子，用代码变成用户可以在浏览器里真实看到、摸到、用的东西。它主要涉及三种技术：

1. HTML：就像网页的“骨架”，决定了网页上有什么内容（标题、段落、图片等）。
2. CSS：就像网页的“衣服”，决定了网页看起来怎么样（颜色、字体、布局等）。
3. JavaScript：就像网页的“大脑”，决定了网页能做什么（动画、交互、数据处理等）。

总而言之，前端开发就是让网站变得好看、好用、能互动。

## 开发工具

进行前端开发，我们需要一个好用的“工具箱”。其中，Visual Studio Code (VS Code) 是一个非常受欢迎且功能强大的选择。

VsCode 官网：https://code.visualstudio.com/

为什么推荐 VS Code？

- 免费且开源：你可以免费使用它，并且它的代码是公开的，有很多人一起维护和改进。
- 轻量级但功能强大：它启动速度快，占用资源少，但通过安装各种“插件”，可以实现非常多的功能，比如代码高亮、智能提示、调试、版本控制等等。
- 支持多种语言：不仅对 HTML、CSS、JavaScript 有很好的支持，也支持其他很多编程语言。
- 丰富的生态系统：有大量的插件可以帮助你提高开发效率，比如 Live Server（实时预览网页）、Prettier（代码格式化）等。
- 跨平台：无论你使用 Windows、macOS 还是 Linux，都可以安装和使用 VS Code。

### VsCode 前端开发插件推荐

- Chinese (Simplified) Language Pack for Visual Studio Code：中文语言包，方便中文用户使用。
- Live Server：实时预览网页，修改代码后自动刷新。
- Prettier：代码格式化，保持代码风格统一。
- HTML CSS Support：HTML 和 CSS 代码智能提示。

参考文章：

1. VSCode安装配置使用教程（最新版超详细保姆级含插件）一文就够了
2. 快速上手web前端开发（超详细教程）

## HTML5 基础知识讲解

HTML 是一种用来描述网页的语言，用于描述网页的结构和内容。

HTML 并不是一种编程语言，而是一种标记语言。它使用标签来描述网页上的不同元素，比如标题、段落、图片、链接等。

标签指的是由尖括号 `<` 和 `>` 包围的关键词，通常成对出现，用来表示元素的开始和结束。

一个简单的 HTML 实例，用于初步的了解效果：

index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>仲夏夜之梦(notes.simengweb.com)</title>
    </head>
    <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    </body>
    </html>

小提示：可以将代码复制到 VsCode 中，然后使用 Live Server 插件就可以实时预览效果啦。

### HTML5 文档分析

我们以前面的样例代码为例，来对 HTML 文档进行讲解

第一行：`<!DOCTYPE html>`，这是一个文档类型声明，用于告诉浏览器这是一个 HTML5 文档。

第二行：`<html>`，这是 HTML 文档的根元素，所有其他元素都必须嵌套在这个元素中，`<html>` 和 `</html>` 之间的内容就是文档的主体。

第三行到第六行：`<head>`，这是文档的头部元素，用于包含文档的元数据（比如标题、字符编码、外部资源引用等）。

第四行：`<meta charset="utf-8">`，这是一个元数据标签，用于指定文档的字符编码为 UTF-8。UTF-8 是一种常用的字符编码，能够表示世界上几乎所有的字符。如果不写的话可能会导致中文乱码的问题。

第五行：`<title>仲夏夜之梦(notes.simengweb.com)</title>`，这是文档的标题，会显示在浏览器的标题栏或标签页上。

第七行：`<body>`，这是文档的主体元素，用于包含文档的可见内容（比如文字、图片、按钮等），`<body>` 和 `</body>` 之间的内容就是文档的主体内容。

第八行：`<h1>我的第一个标题</h1>`，这是一个一级标题元素，用于表示文档的主要主题。`h1` 元素的内容会显示为较大的字体，通常用于页面的主标题。

第九行：`<p>我的第一个段落。</p>`，这是一个段落元素，用于表示文档中的一个段落。`p` 元素的内容会显示为普通的段落文本。

小提示：在浏览器中打开 F12 开启开发者工具，就可以查看和调试 HTML 文档啦。

## CSS3 基础知识讲解

CSS 是一种用来描述 HTML 文档“长什么样”的语言，专门负责网页的样式、排版与视觉效果。

CSS 也不是编程语言，而是一种“样式表”语言。它通过“选择器”找到 HTML 元素，再给它挂上一条或多条“声明”，告诉浏览器“这个元素应该是什么颜色、多大字号、放在哪里”。

一条 CSS 声明由“属性”和“值”组成，用冒号分隔，以分号结尾；多条声明放在花括号里，就组成了一条“样式规则”。

一个最简单的 CSS 示例，让页面里的标题变成红色、居中显示：

index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>仲夏夜之梦(notes.simengweb.com)</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    </body>
    </html>

style.css

    body {
        background-color:#d0e4fe;
    }
    h1 {
        color:orange;
        text-align:center;
    }
    p {
        font-family:"Times New Roman";
        font-size:20px;
    }

这里的 index.html 中需要添加一条语句，用于引入 CSS 样式表。

    <link rel="stylesheet" href="style.css">

然后通过浏览器打开 index.html 就可以看到效果啦。

### CSS 文档分析

我们以前面的样例代码为例，来对 CSS 文档进行讲解

第一到三行：`body { background-color:#d0e4fe; }`，这是一条针对 `<body>` 元素的样式规则。

- `body` 是“选择器”，表示要把样式应用到整个网页主体。
- `background-color` 是属性，用来设置背景颜色；`#d0e4fe` 是一个淡蓝色色值，因此整个页面会呈现淡蓝色背景。

第四行到第七行：`h1 { color:orange; text-align:center; }`，这是一条针对 `<h1>` 元素的样式规则。

- `h1` 是“选择器”，对应 HTML 中的一级标题。
- `color:orange;` 把标题文字设为橙色。
- `text-align:center;` 让标题在水平方向上居中显示。

第八行到第十一行：`p { font-family:"Times New Roman"; font-size:20px; }`，这是一条针对 `<p>` 元素的样式规则。

- `p` 是“选择器”，对应 HTML 中的段落。
- `font-family:"Times New Roman";` 指定段落使用 Times New Roman 字体。
- `font-size:20px;` 把段落文字大小设为 20 像素，让文字看起来更大、更清晰。

小提示：在 VsCode 中安装“Live Server”插件后，修改并保存 CSS 文件，浏览器会自动刷新，立即看到样式变化，方便调试。

## JavaScript 基础知识讲解

JavaScript（简称 JS）是让网页“动起来、能互动”的语言。它可以：

- 响应用户操作（点击、输入、滚动等）
- 修改页面内容与样式（增删节点、改文字/颜色）
- 与服务器通信、处理数据与状态
- 实现动画与复杂交互逻辑

下面用一个小示例，演示 JS 如何让页面产生交互效果：

index.html

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>仲夏夜之梦(notes.simengweb.com)</title>
      <link rel="stylesheet" href="style.css">
      <!-- 样式写在外部 CSS 中 -->
      <!-- JavaScript 推荐放在 body 末尾，或使用 defer 属性 -->
      <!-- 这里在 body 末尾通过 src 引入外部脚本 -->
    </head>
    <body>
      <h1>我的第一个标题</h1>
      <p id="message">我的第一个段落。</p>

      <button id="btn">点我试试</button>
      <input id="name" placeholder="输入你的名字" />

      <script src="script.js"></script>
    </body>
    </html>

script.js

    // 等页面元素加载完成后再执行（避免找不到节点）
    document.addEventListener('DOMContentLoaded', () => {
      const msg = document.getElementById('message'); // 选择段落节点
      const btn = document.getElementById('btn');     // 选择按钮
      const nameInput = document.getElementById('name'); // 选择输入框

      // 点击按钮，修改段落文本与颜色
      btn.addEventListener('click', () => {
        msg.textContent = '你点击了按钮！';
        msg.style.color = 'green';
        console.log('按钮被点击'); // 打开浏览器控制台可见
      });

      // 输入时，实时更新欢迎语
      nameInput.addEventListener('input', (e) => {
        const name = e.target.value.trim();
        msg.textContent = name ? `你好，${name}！` : '我的第一个段落。';
      });
    });

### JavaScript 文档分析

我们以前面的样例代码为例，来对 JS 的关键点进行讲解：

- `<script src="script.js"></script>`：在 HTML 中通过 `script` 标签引入外部 JS 文件。常见放置位置是 `</body>` 之前，避免脚本执行时页面元素尚未加载。
- `document.addEventListener('DOMContentLoaded', ...)`：等待文档结构加载完成再运行 JS，确保能获取到页面元素。
- `document.getElementById('...')`：选择页面中的元素节点，便于后续读写或绑定事件。
- `addEventListener('click'/'input', ...)`：给元素绑定事件监听器，描述“发生什么事时要做什么”。
- `textContent / style`：修改文本与内联样式，从而即时改变页面显示效果。
- `console.log(...)`：在开发者工具控制台输出调试信息，便于观察程序执行。

### 小提示

- 打开浏览器开发者工具（F12），切到“Console”能查看 `console.log` 输出；在 “Elements”/“Inspector” 面板能查看并调试 DOM 结构与样式。
- 在 VSCode 中使用 “Live Server”，保存 `script.js` 后浏览器会自动刷新，方便快速迭代。
- 现代 JS 推荐使用 `const` 与 `let` 替代 `var`；多用箭头函数与模板字符串（如 ``你好，${name}``）让代码更简洁。

到这里，我们已经分别了解了 HTML（结构）、CSS（样式）与 JavaScript（交互）三者如何协同工作。接下来可以尝试把它们组合起来，做一个小页面练手。

## 动手练习：小作业（只改 HTML/CSS，JS 已提供）

目标：做一个“欢迎卡片”，包含标题、说明文字、输入框与按钮。

- 点击按钮时切换页面主题（浅色/深色），JS 会自动完成；
- 输入名字时实时显示欢迎语；
- 你只需要修改 HTML 和 CSS 来达到视觉与布局效果。

### 作业要求（验收标准）

- 卡片居中显示，具有圆角、阴影与内边距；
- 标题居中，段落有合适的行高与间距；
- 按钮有悬停（hover）与按下（active）的视觉反馈；
- 输入框获得焦点（focus）时有明显强调样式；
- 在移动端（窄屏）不溢出，布局能自适应；
- 深色主题下文字可读、对比度合理。提示：JS 会在 `<body>` 上切换 `theme-dark` 类，你可以在 CSS 中基于该类进行主题覆盖。

### 起步模板

将以下三份代码保存为同目录下的 `index.html`、`style.css` 与 `script.js`，用 VSCode 的 Live Server 打开 `index.html` 进行预览。完成作业时，请只修改 HTML 和 CSS（保留 JS 的 id 与类名依赖）。

index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="utf-8">
      <title>小作业：欢迎卡片</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="page">
        <div class="card" id="card">
          <h1 class="card__title">欢迎来到我的页面</h1>
          <p class="card__text" id="message">请点击按钮或输入你的名字</p>
          <div class="card__actions">
            <input id="name" class="input" placeholder="输入你的名字" />
            <button id="btn" class="btn btn--primary">点我切换主题</button>
          </div>
        </div>
      </div>
      <script src="script.js" defer></script>
      <!-- 注意：JS 依赖 #message、#btn、#name 这几个 id，请不要改动它们的命名 -->
      <!-- 你可以新增或调整 class 名，或增删结构，来实现更好的视觉与布局 -->
    </body>
    </html>

style.css

    /* 目标：只通过 CSS 实现卡片的视觉与响应式，并支持深色主题 */
    /* 建议：使用 CSS 变量管理主题；在 .theme-dark 上覆盖变量 */

    :root {
      --bg: #f7f9fc;
      --text: #222;
      --primary: #ff7a45; /* 可调整为你的品牌色 */
      --card-bg: #fff;
      --card-shadow: 0 10px 20px rgba(0,0,0,0.08);
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
    }

    .page {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .card {
      width: min(640px, 100%);
      background: var(--card-bg);
      border-radius: 16px;
      box-shadow: var(--card-shadow);
      padding: 24px;
    }

    .card__title {
      margin: 0 0 12px;
      text-align: center;
    }

    .card__text {
      margin: 0 0 16px;
      line-height: 1.6;
      text-align: center;
    }

    .card__actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .input {
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 8px;
      outline: none;
      min-width: 220px;
    }

    .input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.2);
    }

    .btn {
      padding: 10px 16px;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease;
    }

    .btn--primary {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 6px 12px rgba(255, 122, 69, .3);
    }

    .btn--primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 16px rgba(255, 122, 69, .4);
    }

    .btn--primary:active {
      transform: translateY(0);
      box-shadow: 0 4px 8px rgba(255, 122, 69, .3);
    }

    /* 任务：为深色主题定义样式。JS 会在 <body> 上切换 `.theme-dark` 类。*/
    body.theme-dark {
      --bg: #0f172a;
      --text: #e5e7eb;
      --primary: #60a5fa; /* 深色下可更柔和 */
      --card-bg: #1f2937;
      --card-shadow: none;
    }

    /* 可选：为移动端优化 */
    @media (max-width: 480px) {
      .card { padding: 18px; }
      .input { min-width: 100%; }
    }

script.js

    // JS 已提供：负责交互逻辑，切换主题与显示欢迎语
    // 你只需要改 HTML 和 CSS 即可达成作业要求
    document.addEventListener('DOMContentLoaded', () => {
      const msg = document.getElementById('message');
      const btn = document.getElementById('btn');
      const nameInput = document.getElementById('name');

      // 切换深色主题（在 <body> 上切换 theme-dark 类）
      btn.addEventListener('click', () => {
        document.body.classList.toggle('theme-dark');
        const dark = document.body.classList.contains('theme-dark');
        msg.textContent = dark ? '深色主题已开启' : '浅色主题已开启';
      });

      // 实时欢迎语
      nameInput.addEventListener('input', (e) => {
        const name = e.target.value.trim();
        msg.textContent = name ? `你好，${name}！` : '请点击按钮或输入你的名字';
      });
    });

### 提示与加分项

- 可以用 `:root`+CSS 变量统一管理主题色，在 `.theme-dark` 中覆盖变量即可完成切换；
- 尝试为按钮增加平滑过渡与阴影层次感；
- 在移动端下让输入框占满一行，按钮在下一行显示；
- 可自行优化字体、字号与间距，让视觉更加舒适；
- 加分：实现卡片在深色主题下的微动效（例如背景色淡入）。

## 入门版（更简单，建议先做这个）

目标：做一个“欢迎卡片”，内容包括标题、说明文字、一个输入框和一个按钮。

- 点击按钮时高亮卡片（JS 已完成，你只需让 `.card.highlight` 在 CSS 里更显眼）。
- 输入名字时实时显示欢迎语（JS 已完成）。
- 你只需要修改 HTML 和 CSS，让页面好看、布局合理即可。

验收标准（入门）

- 卡片居中、圆角、阴影、内边距，整体观感舒适。
- 按钮有 `hover/active` 反馈，输入框 `focus` 有强调样式。
- 窄屏下不溢出，内容能自适应。

index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="utf-8">
      <title>入门版小作业</title>
      <link rel="stylesheet" href="style.css">
      <!-- 保留以下 id：message / btn / name / card -->
    </head>
    <body>
      <div class="page">
        <div class="card" id="card">
          <h1>欢迎</h1>
          <p id="message">在输入框里写下你的名字</p>
          <input id="name" placeholder="输入你的名字">
          <button id="btn">高亮卡片</button>
        </div>
      </div>
      <script src="script.js"></script>
      <!-- 用 VSCode Live Server 打开 index.html 预览效果 -->
      <!-- 完成作业时，请只修改 HTML 和 CSS -->
      <!-- 你可以自由调整颜色、间距、字体与布局，使页面更美观 -->
    </body>
    </html>

style.css

    /* 极简样式：你可以在此基础上美化与调整 */
    body {
      margin: 0;
      background: #f5f7fa;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    }

    .page {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 16px;
    }

    .card {
      width: min(360px, 100%);
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 6px 12px rgba(0,0,0,0.08);
      padding: 16px;
      text-align: center;
    }

    input {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid #ddd;
      border-radius: 8px;
      outline: none;
      margin-bottom: 12px;
    }

    input:focus {
      border-color: #1677ff;
      box-shadow: 0 0 0 2px rgba(22,119,255,.2);
    }

    button {
      padding: 8px 12px;
      border: none;
      border-radius: 8px;
      background: #1677ff;
      color: #fff;
      cursor: pointer;
    }

    button:hover { filter: brightness(1.05); }
    button:active { filter: brightness(0.95); }

    /* JS 点击按钮时会在卡片上切换 .highlight 类 */
    .card.highlight {
      background: #fffbe6; /* 浅黄色高亮 */
      box-shadow: 0 8px 16px rgba(0,0,0,0.10);
    }

script.js

    // JS 已提供：负责简单交互。请只改 HTML/CSS。
    document.addEventListener('DOMContentLoaded', () => {
      const msg = document.getElementById('message');
      const btn = document.getElementById('btn');
      const nameInput = document.getElementById('name');
      const card = document.getElementById('card');

      // 实时欢迎语
      nameInput.addEventListener('input', (e) => {
        const name = e.target.value.trim();
        msg.textContent = name ? `你好，${name}！` : '在输入框里写下你的名字';
      });

      // 切换卡片高亮
      btn.addEventListener('click', () => {
        card.classList.toggle('highlight');
      });
    });