---
title: Web 前端基础讲解
createTime: 2025/10/28 21:23:48
permalink: /programming/web/basic-syntax/html-css-js/
---
## 前端开发到底是什么？
前端开发，简单来说，就是**你能在网页上看到和互动的一切**。
想象一下你正在看一个网站：
* **文字、图片、按钮、菜单**：这些都是前端开发人员用代码“画”出来的。
* **点击按钮会发生什么、输入框能打字、图片能放大缩小**：这些互动效果也是前端开发人员用代码实现的。
所以，前端开发就是负责把设计师画好的网站样子，用代码变成用户可以在浏览器里真实看到、摸到、用的东西。它主要涉及三种技术：
1. **HTML**：就像网页的“骨架”，决定了网页上有什么内容（标题、段落、图片等）。
2. **CSS**：就像网页的“衣服”，决定了网页看起来怎么样（颜色、字体、布局等）。
3. **JavaScript**：就像网页的“大脑”，决定了网页能做什么（动画、交互、数据处理等）。
总而言之，前端开发就是让网站变得好看、好用、能互动。
## 开发工具
进行前端开发，我们需要一个好用的“工具箱”。其中，**Visual Studio Code (VS Code)** 是一个非常受欢迎且功能强大的选择。
VsCode 官网：[https://code.visualstudio.com/](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安装配置使用教程（最新版超详细保姆级含插件）一文就够了](https://blog.csdn.net/2303_82176667/article/details/137193809)
2. [快速上手web前端开发（超详细教程）](https://blog.csdn.net/2303_82176667/article/details/137193809)
## HTML5 基础知识讲解
HTML 是一种用来描述网页的语言，用于描述网页的结构和内容。
HTML 并不是一种编程语言，而是一种标记语言。它使用标签来描述网页上的不同元素，比如标题、段落、图片、链接等。
标签指的是由尖括号 `<` 和 `>` 包围的关键词，通常成对出现，用来表示元素的开始和结束。
一个简单的 HTML 实例，用于初步的了解效果：
```html title='index.html'
仲夏夜之梦(notes.simengweb.com)
我的第一个标题
我的第一个段落。
```
小提示：可以将代码复制到 VsCode 中，然后使用 Live Server 插件就可以实时预览效果啦。
### HTML5 文档分析
我们以前面的样例代码为例，来对 HTML 文档进行讲解
第一行：``，这是一个文档类型声明，用于告诉浏览器这是一个 HTML5 文档。
第二行：``，这是 HTML 文档的根元素，所有其他元素都必须嵌套在这个元素中，`` 和 `` 之间的内容就是文档的主体。
第三行到第六行：``，这是文档的头部元素，用于包含文档的元数据（比如标题、字符编码、外部资源引用等）。
第四行：``，这是一个元数据标签，用于指定文档的字符编码为 UTF-8。UTF-8 是一种常用的字符编码，能够表示世界上几乎所有的字符。如果不写的话可能会导致中文乱码的问题。
第五行：`仲夏夜之梦(notes.simengweb.com)`，这是文档的标题，会显示在浏览器的标题栏或标签页上。
第七行：``，这是文档的主体元素，用于包含文档的可见内容（比如文字、图片、按钮等），`` 和 `` 之间的内容就是文档的主体内容。
第八行：`我的第一个标题
`，这是一个一级标题元素，用于表示文档的主要主题。`h1` 元素的内容会显示为较大的字体，通常用于页面的主标题。
第九行：`我的第一个段落。
`，这是一个段落元素，用于表示文档中的一个段落。`p` 元素的内容会显示为普通的段落文本。
小提示：在浏览器中打开 F12 开启开发者工具，就可以查看和调试 HTML 文档啦。
## CSS3 基础知识讲解
CSS 是一种用来描述 HTML 文档“长什么样”的语言，专门负责网页的样式、排版与视觉效果。
CSS 也不是编程语言，而是一种“样式表”语言。它通过“选择器”找到 HTML 元素，再给它挂上一条或多条“声明”，告诉浏览器“这个元素应该是什么颜色、多大字号、放在哪里”。
一条 CSS 声明由“属性”和“值”组成，用冒号分隔，以分号结尾；多条声明放在花括号里，就组成了一条“样式规则”。
一个最简单的 CSS 示例，让页面里的标题变成红色、居中显示：
::: code-tabs
@tab index.html
```html
仲夏夜之梦(notes.simengweb.com)
我的第一个标题
我的第一个段落。
```
@tab style.css
```css
body {
background-color:#d0e4fe;
}
h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
```
:::
这里的 index.html 中需要添加一条语句，用于引入 CSS 样式表。
```html
```
然后通过浏览器打开 index.html 就可以看到效果啦。
### CSS 文档分析
我们以前面的样例代码为例，来对 CSS 文档进行讲解
第一到三行：`body { background-color:#d0e4fe; }`，这是一条针对 `` 元素的样式规则。
- `body` 是“选择器”，表示要把样式应用到整个网页主体。
- `background-color` 是属性，用来设置背景颜色；`#d0e4fe` 是一个淡蓝色色值，因此整个页面会呈现淡蓝色背景。
第四行到第七行：`h1 { color:orange; text-align:center; }`，这是一条针对 `` 元素的样式规则。
- `h1` 是“选择器”，对应 HTML 中的一级标题。
- `color:orange;` 把标题文字设为橙色。
- `text-align:center;` 让标题在水平方向上居中显示。
第八行到第十一行：`p { font-family:"Times New Roman"; font-size:20px; }`，这是一条针对 `
` 元素的样式规则。
- `p` 是“选择器”，对应 HTML 中的段落。
- `font-family:"Times New Roman";` 指定段落使用 Times New Roman 字体。
- `font-size:20px;` 把段落文字大小设为 20 像素，让文字看起来更大、更清晰。
小提示：在 VsCode 中安装“Live Server”插件后，修改并保存 CSS 文件，浏览器会自动刷新，立即看到样式变化，方便调试。
## JavaScript 基础知识讲解
JavaScript（简称 JS）是让网页“动起来、能互动”的语言。它可以：
- 响应用户操作（点击、输入、滚动等）
- 修改页面内容与样式（增删节点、改文字/颜色）
- 与服务器通信、处理数据与状态
- 实现动画与复杂交互逻辑
下面用一个小示例，演示 JS 如何让页面产生交互效果：
::: code-tabs
@tab index.html
```html
仲夏夜之梦(notes.simengweb.com)
我的第一个标题
我的第一个段落。
```
@tab script.js
```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 的关键点进行讲解：
- ``：在 HTML 中通过 `script` 标签引入外部 JS 文件。常见放置位置是 `` 之前，避免脚本执行时页面元素尚未加载。
- `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 会在 `` 上切换 `theme-dark` 类，你可以在 CSS 中基于该类进行主题覆盖。
### 起步模板
将以下三份代码保存为同目录下的 `index.html`、`style.css` 与 `script.js`，用 VSCode 的 Live Server 打开 `index.html` 进行预览。完成作业时，请只修改 HTML 和 CSS（保留 JS 的 id 与类名依赖）。
::: code-tabs
@tab index.html
```html
小作业：欢迎卡片
```
@tab style.css
```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 会在 上切换 `.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%; }
}
```
@tab script.js
```js
// JS 已提供：负责交互逻辑，切换主题与显示欢迎语
// 你只需要改 HTML 和 CSS 即可达成作业要求
document.addEventListener('DOMContentLoaded', () => {
const msg = document.getElementById('message');
const btn = document.getElementById('btn');
const nameInput = document.getElementById('name');
// 切换深色主题（在 上切换 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` 有强调样式。
- 窄屏下不溢出，内容能自适应。
::: code-tabs
@tab index.html
```html
入门版小作业
```
@tab style.css
```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);
}
```
@tab script.js
```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');
});
});
```
:::