网页基础入门：HTML、CSS、JavaScript 分别负责什么（爬虫必学）

为什么爬虫要先学网页基础？

很多同学学爬虫时，会急着上手 requests、BeautifulSoup、Scrapy，但一打开网页源代码就懵了：标签、属性、样式、脚本混在一起，到底哪个才是我要抓的数据？

所以在写爬虫之前，先搞懂网页由什么组成非常重要。你不需要一开始就成为前端工程师，但至少要知道网页里哪些内容负责结构、哪些内容负责样式、哪些内容负责交互。

一个普通网页，核心由三部分组成：

HTML
CSS
JavaScript

可以把它们理解成一套房子：

HTML 是毛坯房，负责基础结构。
CSS 是装修方案，负责页面长相。
JavaScript 是智能控制系统，负责交互和逻辑。

HTML 是什么？网页的骨架是怎么组成的？

HTML 全称是 HyperText Markup Language，中文叫超文本标记语言。注意，它是"标记语言"，不是"编程语言"。

这意味着 HTML 本身不负责复杂逻辑判断，它主要负责描述网页结构。例如页面上的标题、段落、图片、链接、按钮，都可以用 HTML 标签表示。

一个最基础的 HTML 页面大概长这样：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>爬虫你好</h1>
    <p>这是一个简单的网页。</p>
    <a href="https://www.xfei.tech">访问文档</a>
    <button>点我一下</button>
  </body>
</html>

这里面有几个关键部分：

<!doctype html>：声明这是一个 HTML 文档。
<html>：整个网页的根元素。
<head>：网页配置区，例如编码、标题、样式引用。
<body>：网页内容区，用户真正能看到的内容通常在这里。

从爬虫角度看，HTML 是最重要的基础。因为很多页面数据，最终都会以 HTML 标签和文本的形式出现在页面结构里。

CSS 是什么？网页装修是怎么实现的？

只有 HTML 的页面通常很朴素，就像只有墙体和门窗的毛坯房。如果想让网页变好看，就需要 CSS。

CSS 全称是 Cascading Style Sheets，中文叫层叠样式表。它负责控制网页的视觉表现，例如：

字体大小
文字颜色
背景颜色
图片尺寸
按钮圆角
页面布局
鼠标悬停效果

例如：

h1 {
  color: #1f2937;
  text-align: center;
}

button {
  padding: 10px 16px;
  border-radius: 999px;
  background: #111827;
  color: white;
}

CSS 本身不改变网页"有什么内容"，它改变的是这些内容"怎么显示"。同一份 HTML，换一套 CSS，视觉效果可能完全不同。

对爬虫来说，CSS 还有一个额外价值：它会用到选择器。选择器不仅能选中元素来改样式，以后我们也会用类似写法在 Python 或浏览器里定位要抓取的数据。

JavaScript 是什么？网页交互和逻辑是怎么实现的？

如果说 HTML 让网页"能看"，CSS 让网页"好看"，那么 JavaScript 就是让网页"能动起来"。

JavaScript 是一门真正的编程语言。它可以处理：

点击按钮后弹出提示。
鼠标划过后展开菜单。
输入框实时校验格式。
页面滚动时加载更多数据。
请求接口并把结果渲染到页面上。

例如：

<button id="btn">添加一行文字</button>
<div class="container"></div>

<script>
  const btn = document.querySelector("#btn")
  const container = document.querySelector(".container")

  btn.addEventListener("click", () => {
    const p = document.createElement("p")
    p.textContent = "hello"
    container.appendChild(p)
  })
</script>

这段代码做了三件事：

用 querySelector 选中按钮。
给按钮注册点击事件。
点击后创建一个新的 p 元素并插入页面。

这就是 JavaScript 的作用：处理交互，操作页面结构。

为什么浏览器内容和网页源代码不一样？

初学爬虫时，一个常见困惑是：浏览器里明明有数据，但右键查看网页源代码却找不到。

原因往往是：这些数据不是 HTML 初始返回的，而是 JavaScript 后续请求接口再渲染出来的。

也就是说，网页内容可能有两种来源：

服务端直接返回在 HTML 里。
JavaScript 在浏览器运行后，再请求接口并动态插入页面。

这会影响爬虫策略：

如果数据在 HTML 里，可以直接请求页面并解析 HTML。
如果数据由 JavaScript 动态加载，需要去 Network 面板找接口。
如果接口有复杂参数，可能还要分析请求头、Cookie、签名逻辑。

所以网页基础不是"前端知识点"，而是爬虫判断数据来源的前置能力。

爬虫怎么观察网页？有什么标准顺序？

打开一个网页后，建议按这个顺序观察：

先看页面上有没有目标数据。
右键查看网页源代码，确认数据是否在原始 HTML 中。
打开开发者工具 Elements 面板，观察元素结构。
打开 Network 面板，刷新页面，看是否有接口返回目标数据。
如果页面点击后才出现数据，重点观察对应点击触发了哪些请求。

这个顺序能帮你快速判断：应该解析 HTML，还是应该复现接口。

HTML、CSS、JavaScript 和爬虫有什么关系？

把三者放到爬虫语境里，可以这样理解：

HTML：最常见的数据承载结构。
CSS：提供定位元素的选择器思路。
JavaScript：解释动态加载、交互行为和接口请求来源。

很多爬虫问题看似是代码问题，其实是网页认知问题。当你知道一个页面由结构、样式和交互三层组成，就不会只盯着页面表面，而会开始追问：数据到底是从哪里来的？

总结

网页基础可以先抓住一句话：

HTML 搭结构，CSS 改样式，JavaScript 做交互。

对爬虫学习者来说，最重要的不是把所有前端语法背下来，而是建立判断力：看到一个页面，能分清内容在哪里、样式怎么选中元素、交互背后可能触发了什么请求。

这个判断力一旦建立，后面学 HTML 解析、CSS 选择器、接口抓包和 JavaScript 逆向都会顺很多。

延伸阅读：如果你还没建立客户端和服务器的概念，可以先看 URL 是什么？从客户端与服务器讲透爬虫第一步。

网页由什么组成？HTML、CSS、JavaScript 入门（爬虫必学）