【前端基础】HTML + CSS + JavaScript 基础（一）

前言

昨天有读者在后台给我留言："你的快速入门文章很好，但我还是有点晕，能不能从最基础的开始，一步一步来？"

这个反馈让我挺有感触的。

我之前那篇文章确实信息量有点大，一口气讲了HTML、CSS、JavaScript三大技术。对于零基础的读者来说，就像第一次进自助餐厅，看到琳琅满目的菜品，反而不知道该从哪道开始吃。

所以我决定写一个系列教程，分几个部分，一步步带你从零开始。

这是第一篇，我们只讲一件事：认识前端开发的三大核心技术，以及它们各自负责什么 。

前端开发到底在做什么？

先说个很直观的例子。

你现在正在看的这个CSDN页面，是不是有文字、图片、按钮？文字有大有小，颜色也不一样；按钮是可以点击的；甚至可能还有轮播图、评论框这些交互功能。

这些东西是怎么来的？

简单来说，前端开发就是用代码在浏览器里"画画"和"做动画" 。

但这幅画不是画在纸上，而是画在网页上。这幅画不仅能看，还能和用户互动。

核心比喻：房子装修理论

我之前用过一个比喻，觉得特别贴切：

前端开发就像是在搭建一个房子的装修和交互系统 ：

复制代码

- HTML是房子的结构（墙、地板、房顶、门窗）
- CSS是房子的装修风格（墙面颜色、家具摆放、灯光效果）
- JavaScript是房子的智能控制系统（按一下开关灯亮了，拉开窗帘阳光进来）

这个比喻一下子就说明白了一个核心问题：HTML、CSS、JavaScript不是竞争关系，而是合作关系，各司其职 。

关键理解：

• HTML是基础，没有HTML就没有内容

• CSS是美化，没有CSS页面会很丑

• JavaScript是灵魂，没有JavaScript页面是静态的

第一部分：HTML（网页的骨架）

HTML（HyperText Markup Language，超文本标记语言）是前端开发的基石。

它的作用很简单：用标签来描述网页的内容结构 。

1.1 HTML标签的基本概念

你想想，如果我要写一篇文章，我会怎么组织内容？

• 肯定有一个标题吧？比如"我的第一篇文章"

• 然后是段落，一段一段的文字

• 可能还会有图片、链接、列表这些

HTML就是用"标签"把这些内容标记出来，告诉浏览器："这是一个标题"、"这是一个段落"、"这是一张图片"。

1.2 标签的语法规则

HTML标签的基本语法：

html 复制代码

<标签名>内容</标签名>

每个标签都有两个部分：

• 开始标签 ：

html 复制代码

<标签名>

• 结束标签 ：

html 复制代码

</标签名>

（注意有个斜杠）

示例：

html 复制代码

<h1>这是一级标题</h1>
<p>这是一个段落</p>

1.3 最基础的HTML标签

我们先看几个最常用的标签，这些是你一定会用到的：

文本标签

|------------------|-------------|-----------------------------------------|
| 标签 | 作用 | 示例代码 |
| <h1> ~ <h6> | 标题，从一级到六级 | <h1>文章标题</h1> |
| <p> | 段落 | <p>这是一段文字</p> |
| <span> | 小段文字，通常用来强调 | <span style="color:red">红色文字</span> |
| <strong> | 加粗强调 | <strong>重要内容</strong> |
| <em> | 斜体强调 | <em>斜体文字</em> |

链接和图片标签

|---------|--------|-----------------------------------------|
| 标签 | 作用 | 示例代码 |
| <a> | 链接 | <a href="https://csdn.net">点击访问</a> |
| <img> | 图片 | <img src="photo.jpg" alt="照片"> |

容器标签

|----------|-----------------|--------------------------|
| 标签 | 作用 | 示例代码 |
| <div> | 块级容器，用来包裹其他内容 | <div>这里可以放很多东西</div> |
| <span> | 行内容器，通常用来包裹小段文字 | <span>文字</span> |

列表标签

html 复制代码

<!-- 无序列表 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>
<!-- 有序列表 -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

1.4 为什么叫"超文本"？

HTML里的"H"代表"HyperText"（超文本）。

什么叫超文本？

普通文本就是一篇文章，从头读到尾。超文本可以跳转。

比如你在看一篇文章，里面提到一个词，你想深入了解，点击这个词就能跳到另一个页面。这就是超文本的核心------链接的能力 。

html 复制代码

<a>

标签就是实现这个功能的核心，a就是"anchor"（锚点）的缩写。

1.5 HTML文档的基本结构

一个完整的HTML文档包含以下部分：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>
<body>
  <!-- 这里是页面的主要内容 -->
  <h1>欢迎来到我的网页</h1>
  <p>这是我用HTML写的第一个段落。</p>
</body>
</html>

结构说明 ：

|--------------------------|-----------------------|
| 标签 | 作用 |
| <!DOCTYPE html> | 告诉浏览器这是HTML5文档 |
| <html> | 整个网页的根标签 |
| <head> | 网页的头部信息（标题、字符编码等） |
| <meta charset="UTF-8"> | 设置字符编码为UTF-8 |
| <title> | 页面标题（显示在浏览器标签页上） |
| <body> | 网页的主要内容，用户能看到的部分都写在这里 |

1.6 实战示例：第一个HTML页面

让我们把这些标签组合起来，写一个最简单的HTML页面：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是我用HTML写的第一个段落。</p>
  <h2>我的爱好</h2>
  <ul>
    <li>编程</li>
    <li>阅读</li>
    <li>运动</li>
  </ul>
  <p>访问我的<a href="https://www.csdn.net">CSDN主页</a>了解更多。</p>
</body>
</html>

运行效果 ：

浏览器会显示一个标题、一个段落、一个列表和一个链接。

重点提示 ：HTML只负责结构，不管样式。这个页面现在很丑，只有文字从上到下排列，没有颜色、没有间距、没有布局。别着急，CSS就是来解决这个问题的。

第二部分：CSS（网页的颜值担当）

HTML搭建好骨架后，页面确实能显示了，但很丑。

你想啊，只有黑底白字，从上到下堆在一起，标题和段落用同样的字体和大小，图片紧贴着文字，没有任何美感。

这时候CSS就登场了。

CSS（Cascading Style Sheets，层叠样式表）的作用只有一个：给HTML元素添加样式 。

2.1 CSS的三种引入方式

CSS有三种使用方式：

1. 行内样式（不推荐）

html 复制代码

<p style="color: red; font-size: 16px;">这是一段红色文字</p>

2. 内部样式（适合单页）

html 复制代码

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>

3. 外部样式（推荐，适合多页）

html 复制代码

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

然后在style.css文件里写样式规则：

// css
p {
  color: red;
  font-size: 16px;
}

2.2 CSS的基本语法

CSS的基本语法是：

css 复制代码

选择器 {
  属性1: 值1;
  属性2: 值2;
}

各部分说明 ：

|--------|------------|----------------------------|
| 部分 | 说明 | 示例 |
| 选择器 | 你要给哪个元素加样式 | h1、.class、#id |
| 属性 | 你要改什么 | color、font-size、background |
| 值 | 改成什么样 | red、16px、#ffffff |

示例：

css 复制代码

h1 {
  color: red;
}

• h1：选择器，选中所有的<h1>标签

• color：属性，设置文字颜色

• red：值，红色

运行效果：所有的<h1>标题都会变成红色。

2.3 三种基本选择器

CSS的选择器有很多，但最基础、最常用的是这三种：

1. 标签选择器

css 复制代码

p {
  color: gray;
}

选中所有的

css 复制代码

<p>

标签。

2. 类选择器（最常用）

HTML里给元素加一个class：

css 复制代码

<p class="highlight">这是一段需要强调的文字</p>
<p class="normal">这是一段普通文字</p>

CSS里用.选择：

css 复制代码

.highlight {
  background-color: yellow;
  font-weight: bold;
}
.normal {
  color: gray;
}

运行效果：第一段文字有黄色背景和加粗，第二段文字是灰色。

3. id选择器

HTML里给元素加一个id（每个id只能用一次）：

html 复制代码

<div id="header">网页头部</div>

CSS里用#选择：

css 复制代码

#header {
  background-color: #333;
  color: white;
  padding: 20px;
}

2.4 选择器优先级

重点：选择器优先级：id选择器 > 类选择器 > 标签选择器。

这就像VIP通道 > 普通通道 > 随便排队的逻辑，优先级高的会覆盖优先级低的样式。

示例：

html 复制代码

<p class="text" id="special">这段文字是什么颜色？</p>

css 复制代码

p {
  color: black;      /* 标签选择器：优先级最低 */
}
.text {
  color: blue;       /* 类选择器：优先级中等 */
}
#special {
  color: red;        /* id选择器：优先级最高 */
}

这段文字会显示为红色，因为#special的优先级最高。

2.5 常用CSS属性

文字样式

css 复制代码

h1 {
  color: blue;           /* 颜色 */
  font-size: 24px;       /* 字体大小 */
  font-weight: bold;     /* 加粗 */
  text-align: center;    /* 居中对齐 */
  line-height: 1.6;      /* 行高 */
}

背景和边框

css 复制代码

.box {
  background-color: #f0f0f0;  /* 背景色 */
  border: 2px solid red;      /* 边框：2px宽、实线、红色 */
  border-radius: 8px;         /* 圆角 */
}

元素大小和位置

css 复制代码

.container {
  width: 800px;       /* 宽度 */
  height: 400px;      /* 高度 */
  margin: 0 auto;     /* 上下0，左右自动（实现水平居中） */
  padding: 20px;      /* 内边距 */
}

2.6 实战示例：给HTML页面添加样式

让我们给之前的HTML页面加点样式，看看效果：

css 复制代码

body {
  font-family: 'Microsoft YaHei', sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
h1 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
}
h2 {
  color: #34495e;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}
p {
  margin-bottom: 15px;
}
ul {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
}
li {
  margin-bottom: 8px;
  padding-left: 10px;
}
a {
  color: #3498db;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

运行效果 ：页面变得好看了！标题居中、有颜色，列表有背景色，链接是蓝色的，鼠标放上去会显示下划线。

第三部分：JavaScript（网页的大脑）

HTML负责结构，CSS负责样式，那JavaScript负责什么？

JavaScript负责让网页动起来 。

3.1 JavaScript是什么？

JavaScript是一种编程语言，它可以在网页里运行。

你想想，如果网页只有HTML和CSS，那它就是一"张"静态的画。你可以看，但没法和它互动。

JavaScript加入后，网页就有了"大脑"：

• 点击按钮，弹出提示框

• 输入文字，实时显示在页面上

• 滚动页面，出现动画效果

• 提交表单，验证输入是否正确

3.2 JavaScript的引入方式

JavaScript也有三种引入方式：

1. 行内脚本（不推荐）

html 复制代码

<button onclick="alert('你好！')">点击我</button>

2. 内部脚本（适合小脚本）

html 复制代码

<head>
  <script>
    function sayHello() {
      alert("你好！");
    }
  </script>
</head>

3. 外部脚本（推荐）

html 复制代码

<head>
  <script src="script.js"></script>
</head>

然后在script.js文件里写JavaScript代码。

3.3 变量：存储数据的盒子

编程里最重要的概念之一就是"变量"。

变量就像一个"盒子"，你可以往里面放东西，也可以随时把东西取出来，或者换别的东西。

变量的声明

javascript 复制代码

let name = "张三";      // 把字符串"张三"放进盒子
let age = 25;           // 把数字25放进盒子
let isStudent = true;   // 把布尔值true放进盒子

语法说明 ：

|---------|----------------|
| 关键字 | 作用 |
| let | 声明变量（现代写法，推荐） |
| const | 声明常量（值不能改变） |
| var | 声明变量（老旧写法，不推荐） |

注意：现代JavaScript开发中，推荐使用let和const，不要使用var。

3.4 JavaScript的数据类型

JavaScript里有几种常见的数据类型：

1. 字符串（String）

用引号括起来的文本。

javascript 复制代码

let message = "Hello, World!";
let greeting = '你好';

2. 数字（Number）

整数和小数。

javascript 复制代码

let count = 10;
let price = 99.99;
let pi = 3.14;

3. 布尔值（Boolean）

只有两个值：true或false。

javascript 复制代码

let isValid = true;
let isCompleted = false;

4. 数组（Array）

存储多个值的列表。

javascript 复制代码

let fruits = ["苹果", "香蕉", "橙子"];
let numbers = [1, 2, 3, 4, 5];

5. 对象（Object）

存储键值对。

javascript 复制代码

let person = {
  name: "李四",
  age: 30,
  city: "北京"
};

3.5 函数：重复使用的代码

函数就是"一段可以重复使用的代码"。

函数的定义和调用

javascript 复制代码

// 定义一个函数
function greet(name) {
  alert("你好，" + name + "！");
}
// 调用函数
greet("张三");  // 输出：你好，张三！
greet("李四");  // 输出：你好，李四！

函数的组成 ：

|-------------|---------------|----------------|
| 部分 | 说明 | 示例 |
| function | 声明函数的关键字 | function |
| greet | 函数名 | greet |
| (name) | 参数（函数的输入） | (name) |
| { ... } | 函数体（函数要执行的代码） | { alert(...) } |
| greet("张三") | 调用函数，传入参数 | greet("张三") |

3.6 DOM操作基础

DOM（Document Object Model）就是"网页的编程接口"，通过JavaScript可以操作网页上的元素。

获取元素

javascript 复制代码

// 通过id获取元素
let title = document.getElementById("title");
// 通过class获取元素（返回数组）
let paragraphs = document.getElementsByClassName("text");
// 通过标签名获取元素（返回数组）
let allDivs = document.getElementsByTagName("div");
修改元素内容

javascript 复制代码

// 修改文本内容
title.textContent = "新的标题";
// 修改HTML内容
title.innerHTML = "<span>新的标题</span>";

修改元素样式

javascript 复制代码

title.style.color = "red";
title.style.fontSize = "24px";
title.style.backgroundColor = "yellow";

3.7 实战示例：欢迎程序

让我们写一个稍微复杂一点的例子：输入名字，点击按钮，显示欢迎信息。

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>欢迎程序</title>
  <style>
    body {
      font-family: 'Microsoft YaHei', sans-serif;
      max-width: 400px;
      margin: 50px auto;
      padding: 20px;
      text-align: center;
    }
    input {
      padding: 10px;
      font-size: 16px;
      margin: 10px 0;
    }
    button {
      padding: 10px 30px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    #message {
      margin-top: 20px;
      font-size: 20px;
      color: #2c3e50;
    }
  </style>
</head>
<body>
  <h1>欢迎程序</h1>
  <input type="text" id="nameInput" placeholder="请输入你的名字">
  <br>
  <button onclick="showWelcome()">显示欢迎</button>
  <div id="message"></div>

  <script>
    function showWelcome() {
      // 获取用户输入的名字
      let name = document.getElementById("nameInput").value;

      // 检查是否为空
      if (name === "") {
        alert("请输入名字！");
        return;
      }
      // 显示欢迎信息
      let messageDiv = document.getElementById("message");
      messageDiv.textContent = "你好，" + name + "！欢迎学习前端开发！";
    }
  </script>
</body>
</html>

运行效果 ：

• 输入框可以输入文字

• 点击按钮，会在下方显示"你好，XXX！欢迎学习前端开发！"

• 如果不输入名字直接点击，会提示"请输入名字！"

代码解析 ：

|--------------------------------------------|-----------|
| 代码行 | 作用 |
| document.getElementById("nameInput").value | 获取输入框的值 |
| if (name === "") | 判断是否为空 |
| alert("请输入名字！") | 弹出提示框 |
| document.getElementById("message") | 获取显示消息的元素 |
| messageDiv.textContent = "..." | 设置元素的文本内容 |

第四部分：三大技术的综合实战

现在我们知道了：

• HTML负责结构

• CSS负责样式

• JavaScript负责交互

让我们看一个完整的例子，看看三者是如何配合的。

实战案例：点击计数器

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>点击计数器</title>
  <style>
    body {
      font-family: 'Microsoft YaHei', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    .card {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      text-align: center;
    }
    h2 {
      color: #2c3e50;
      margin-bottom: 20px;
    }
    button {
      padding: 10px 30px;
      font-size: 16px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #2980b9;
    }
    #clickCount {
      margin-top: 20px;
      font-size: 24px;
      color: #e74c3c;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>点击计数器</h2>
    <button onclick="incrementCounter()">点击我</button>
    <div id="clickCount">点击次数：0</div>
  </div>
  <script>
    let count = 0;
    function incrementCounter() {
      count++;
      document.getElementById("clickCount").textContent = "点击次数：" + count;
    }
  </script>
</body>
</html>

代码分解

HTML部分（结构）

html 复制代码

<div class="card">
  <h2>点击计数器</h2>
  <button onclick="incrementCounter()">点击我</button>
  <div id="clickCount">点击次数：0</div>
</div>

• 用<div>创建了一个卡片容器

• 用<h2>创建标题

• 用<button>创建按钮

• 用<div id="clickCount">显示点击次数

CSS部分（样式）

css 复制代码

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.card {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

• 用Flexbox实现页面内容的居中

• 给卡片加了白色背景、圆角、阴影

• 按钮有悬停效果（颜色渐变）

JavaScript部分（交互）

javascript 复制代码

let count = 0;
function incrementCounter() {
  count++;
  document.getElementById("clickCount").textContent = "点击次数：" + count;
}

• 定义了一个变量count，记录点击次数

• incrementCounter()函数每次被调用时，count加1

• 更新页面上的显示

运行效果

页面上有一个居中的卡片，里面有一个按钮和显示点击次数的文字。每次点击按钮，次数都会增加。

本篇知识总结

这篇作为系列教程的第一篇，我们讲解了前端开发的基础概念：

HTML部分

|---------|-------------------------------------------------------------------|
| 知识点 | 内容 |
| 作用 | 网页的骨架，用标签描述内容结构 |
| 常用标签 | <h1>~<h6>、<p>、<a>、<img>、<div>、<span>、<ul>、<li> |
| 文档结构 | <!DOCTYPE>、<html>、<head>、<body> |
| 核心理解 | 只负责结构，不管样式 |

CSS部分

|---------|--------------------------------------------------------|
| 知识点 | 内容 |
| 作用 | 网页的颜值担当，给HTML元素添加样式 |
| 三种引入方式 | 行内样式、内部样式、外部样式 |
| 三种选择器 | 标签选择器、类选择器、id选择器 |
| 优先级 | id选择器 > 类选择器 > 标签选择器 |
| 常用属性 | color、font-size、background-color、border、margin、padding |

JavaScript部分

|---------|------------------------------------|
| 知识点 | 内容 |
| 作用 | 网页的大脑，让网页动起来 |
| 变量 | 用let和const声明，存储数据 |
| 数据类型 | 字符串、数字、布尔值、数组、对象 |
| 函数 | 定义和调用，重复使用代码 |
| DOM操作 | getElementById()、textContent、style |

核心观点

HTML、CSS、JavaScript不是竞争关系，而是合作关系
各司其职，配合使用才能做出好网页
前端开发的核心就是"结构 + 样式 + 交互"

下篇预告

在下一篇《【前端基础】HTML + CSS + JavaScript 基础（二）》中，我们会深入讲解：

HTML部分

• 更多的HTML标签（表格、表单、语义化标签）

• HTML的属性和值

• HTML文档的完整结构详解

CSS部分

• 更多的CSS属性（字体、颜色、背景、边框详解）

• 盒模型（content、padding、border、margin）

• 基础布局（Flexbox入门）

• 响应式设计基础

JavaScript部分

• 更多的数据类型和运算符

• 条件语句（if、else、else if）

• 循环语句（for、while）

• 数组和对象的常用操作

学习建议

作为完全零基础的初学者，我建议你：

1. 不要只看，要动手写

编程是一项技能，不是知识。看懂了不代表学会了，一定要自己动手写代码。

建议：

• 每个示例代码都亲自敲一遍

• 尝试修改代码，看看效果有什么变化

• 遇到问题先自己思考，再看答案

2. 从简单开始，循序渐进

不要一上来就想做个复杂的网站。先从最简单的页面开始，一点点增加功能。

学习路径 ：

javascript 复制代码

第一天：HTML基础标签
第二天：CSS基础样式
第三天：JavaScript基础语法
第四天：三者配合做一个小项目

3. 多练习，多出错

出错是很正常的，甚至是有价值的。每次出错都是学习的机会。

常见错误 ：

• 标签没有闭合

• 选择器写错了

• 变量名拼写错误

• 分号忘记写

解决方法 ：

• 仔细检查代码

• 使用浏览器的开发者工具（F12）

• 在网上搜索错误信息

4. 使用在线编辑器

刚开始学习时，可以用在线编辑器快速体验：

|-------------|--------------------|----------|
| 在线编辑器 | 特点 | 推荐指数 |
| CodePen | 支持HTML/CSS/JS，社区活跃 | ⭐⭐⭐⭐⭐ |
| JSFiddle | 简单易用，适合小练习 | ⭐⭐⭐⭐ |
| CodeSandbox | 支持完整项目开发 | ⭐⭐⭐⭐⭐ |
| 菜鸟教程在线编辑器 | 中文界面，适合初学者 | ⭐⭐⭐ |

这些网站不需要你安装任何软件，打开浏览器就能写代码、看效果。

课后练习

为了巩固今天学到的知识，我给你布置几个小练习：

练习1：自我介绍页面

用HTML写一个简单的自我介绍页面，包含：

• 标题（你的名字）

• 段落（介绍你自己）

• 列表（你的爱好）

• 链接（你的博客或社交媒体）

练习2：美化自我介绍页面

用CSS给练习1的页面添加样式：

• 设置背景颜色

• 标题居中、变大、变色

• 段落调整行高和颜色

• 列表添加背景色和圆角

• 链接去掉下划线，添加悬停效果

练习3：添加交互功能

用JavaScript给练习2的页面添加功能：

• 添加一个按钮

• 点击按钮，弹出一个提示框，显示"你好！"

• 或者点击按钮，修改页面上的某个文字

练习4：点击计数器

按照文中的示例，自己实现一个点击计数器，然后尝试修改：

• 添加一个"重置"按钮，点击后次数归零

• 添加一个"减少"按钮，点击后次数减1

• 当次数达到10时，显示一个特别的消息

常见问题解答

Q1: 学前端需要什么基础？

A : 完全零基础就可以学习！不需要你有任何编程经验。只要你会用电脑，会打字，就能开始学习。

Q2: 学习前端需要多久？

A : 这个因人而异。一般来说：

• 基础入门：2-4周

• 能够做简单项目：1-2个月

• 达到就业水平：3-6个月

• 成为资深前端：1-3年

关键是坚持练习 ，每天写一点代码。

Q3: 应该先学HTML、CSS还是JavaScript？

A : 建议按照这个顺序：

先学HTML（结构）
再学CSS（样式）
最后学JavaScript（交互）

但不要学完一个再学下一个，建议三者穿插学习，因为它们经常配合使用。

Q4: 用什么编辑器写代码？

A : 推荐使用VS Code（Visual Studio Code）：

• 微软推出的免费编辑器

• 插件丰富（推荐安装Live Server、Prettier）

• 智能提示强大

• 支持多种编程语言

下载地址：https://code.visualstudio.com/

Q5: 遇到问题怎么办？

A : 遇到问题很正常，解决方法：

仔细检查代码，看有没有拼写错误
使用浏览器的开发者工具（F12）查看错误信息
在网上搜索错误信息，通常能找到答案
在CSDN、知乎等技术社区提问
在本篇文章的评论区留言，我会尽力解答

结语

前端开发其实没有那么难，难的是克服一开始的恐惧感 。

我刚开始学的时候，看到那些代码也是一脸懵。但当我把"HTML、CSS、JavaScript"对应到"房子的结构、装修、智能系统"后，一切都变得清晰了。

希望这篇文章能帮你跨过前端开发的第一道门槛。

记住，编程是一门实践的艺术 。看懂了不代表学会了，动手写代码才是关键。

下一篇我们会深入讲解HTML和CSS的更多知识，敬请期待！

如果你在学习过程中遇到问题，欢迎在评论区留言。我会尽力解答。本文为原创文章，转载请注明出处。未经作者许可，禁止用于商业用途。

【前端基础】HTML + CSS + JavaScript 基础（一）

前言

前端开发到底在做什么？

核心比喻：房子装修理论

关键理解 ：

第一部分：HTML（网页的骨架）

1.1 HTML标签的基本概念

1.2 标签的语法规则

1.3 最基础的HTML标签

文本标签

链接和图片标签

容器标签

列表标签

1.4 为什么叫"超文本"？

1.5 HTML文档的基本结构

1.6 实战示例：第一个HTML页面

第二部分：CSS（网页的颜值担当）

2.1 CSS的三种引入方式

2.2 CSS的基本语法

2.3 三种基本选择器

1. 标签选择器

2. 类选择器（最常用）

3. id选择器

2.4 选择器优先级

2.5 常用CSS属性

文字样式

背景和边框

元素大小和位置

2.6 实战示例：给HTML页面添加样式

第三部分：JavaScript（网页的大脑）

3.1 JavaScript是什么？

3.2 JavaScript的引入方式

3.3 变量：存储数据的盒子

变量的声明

3.4 JavaScript的数据类型

1. 字符串（String）

2. 数字（Number）

3. 布尔值（Boolean）

4. 数组（Array）

5. 对象（Object）

3.5 函数：重复使用的代码

函数的定义和调用

3.6 DOM操作基础

获取元素

修改元素样式

3.7 实战示例：欢迎程序

第四部分：三大技术的综合实战

实战案例：点击计数器

代码分解

HTML部分（结构）

CSS部分（样式）

JavaScript部分（交互）

运行效果

本篇知识总结

HTML部分

CSS部分

JavaScript部分

核心观点

下篇预告

HTML部分

CSS部分

JavaScript部分

学习建议

1. 不要只看，要动手写

2. 从简单开始，循序渐进

3. 多练习，多出错

4. 使用在线编辑器

课后练习

练习1：自我介绍页面

练习2：美化自我介绍页面

练习3：添加交互功能

练习4：点击计数器

常见问题解答

Q1: 学前端需要什么基础？

Q2: 学习前端需要多久？

Q3: 应该先学HTML、CSS还是JavaScript？

Q4: 用什么编辑器写代码？

Q5: 遇到问题怎么办？

结语

关键理解：