一个网页由三部分组成

部分	全称	负责	类比
HTML	HyperText Markup Language（超文本标记语言）	网页的结构（页面元素和内容）	毛坯房：墙和房间
CSS	层叠样式表	网页的表现（外观、位置等样式，如颜色、大小）	装修：刷漆、布局
JS	JavaScript，简称 JS	网页的行为（交互效果）	电器：灯开关、门铃

NOTE

爬虫最关心的是 HTML——数据都在网页结构里；CSS 和 JS 只是"穿在结构外面的东西"。

HTML：超文本标记语言

• 超文本：超越了文本的限制，比普通文本更强大——除了文字，还可以定义图片、音频、视频等内容
• 标记语言：由标签 <标签名> 构成的语言
• HTML 标签都是预定义好的：<h1> 展示标题、<img> 展示图片、<video> 展示视频
• HTML 代码直接在浏览器中运行，标签由浏览器解析

标签的写法

<a href="https://www.itcast.cn">传智教育-黑马程序员</a>

部分	例子
开始标签	<a>
属性	href="https://www.itcast.cn"
内容	传智教育-黑马程序员
结束标签	</a>

一个最小页面

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>仙逆人物志 - 修真世界</title>
</head>
<body>
  <h1>Python</h1>
  <p>一门简介、快速、易用的编程语言。</p>
  <a href="https://www.itcast.cn">传智教育-黑马程序员</a>
</body>
</html>

三部分在真实页面里的位置

课程资料里的 仙逆人物志.html 一次性用到了三部分：

• <style> 块里写的是 CSS（.title { color: #ffd700; ... } 控制标题颜色）
• <script> 块里写的是 JS（监听鼠标进入/离开标题，切换颜色）
• 其余的 <h1>、<nav>、<footer> 等标签是 HTML 结构

小结（复习自测）

题目	答案
网页由哪几部分组成？	HTML：负责结构（内容）；CSS：负责样式（美化）；JS：负责动作（行为）
爬虫主要解析哪一部分？	HTML（数据在结构里）

相关

• 网页解析与lxml

练习题

一、知识回顾（读完直接做下面的实践题）

1. 网页三部分：HTML 负责结构、CSS 负责表现（样式）、JS 负责行为（交互）
2. HTML 全称 HyperText Markup Language，中文 超文本标记语言
3. "超文本"的意思是：超越了文本的限制，除了文字还能定义图片、音频、视频等内容
4. HTML 标签都是预定义好的，由浏览器解析运行
5. <a href="https://www.itcast.cn">黑马</a> 里：开始标签是 <a>，属性是 href="https://www.itcast.cn"，结束标签是 </a>
6. CSS 写在页面的 <style> 块里；JS 写在 <script> 块里

二、概念自测

• 2-1 一段代码是控制颜色还是监听鼠标点击，怎么一眼区分是 CSS 还是 JS？

  - 提示（先自己想，实在想不出再点开）

  一级 · 思路：看它写在页面的哪个块里，再看它写的是"样式键值对"还是"函数调用"

  - 参考答案（做完再点开）

  2-1 写在 <style> 里、形如 选择器 { 属性: 值; } 的是 CSS；出现在 <script> 里、带 addEventListener 等函数调用的是 JS。

• 2-2 爬虫为什么只需要盯着 HTML 解析，CSS 和 JS 可以先不管？

  - 提示（先自己想，实在想不出再点开）

  一级 · 思路：想想要抓的数据（标题、列表、表格）具体躺在哪一部分的标签之间

  - 参考答案（做完再点开）

  2-2 网页上的数据（标题、列表、表格）都存在于 HTML 标签之间；CSS 只决定它们长什么样，JS 通常负责交互。抓数据就是从 HTML 标签里把内容抠出来。

• 2-3 写出一个带 class 属性的 <p> 标签，内容是"人生苦短，我用Python"。

  - 提示（先自己想，实在想不出再点开）

  一级 · 思路：开始标签里写属性（属性值用引号包住），中间放内容，最后别忘了结束标签

  - 参考答案（做完再点开）

  2-3 <p class="intro">人生苦短，我用Python</p>（class 名字可以自取）