Web 前端基础讲解

约 4108 字大约 14 分钟

2025-10-28

前端开发到底是什么？

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

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

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

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

HTML：就像网页的“骨架”，决定了网页上有什么内容（标题、段落、图片等）。
CSS：就像网页的“衣服”，决定了网页看起来怎么样（颜色、字体、布局等）。
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 代码智能提示。

参考文章：

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');
  });
});