【0基础学爬虫】爬虫基础之网页基本结构
字数 2057 2025-08-11 08:35:55

爬虫基础之网页基本结构教学文档

一、网页概述

网页是互联网应用的一种形态，是组成网站的基本元素。它是一个包含HTML标签的纯文本文件，可以存放在世界上任意一台计算机中。网页可以被看作为承载各种网站应用和信息的容器，网站的可视化信息都通过网页来进行展示。

网页的组成

  • 表面组成：文字、图片、音频、视频、超链接等用户可直接看到的元素
  • 本质组成：
    • HTML（超文本标记语言）
    • CSS（层叠样式表）
    • JavaScript（脚本语言）

二、HTML基础

1. HTML定义

HTML（HyperText Markup Language）是一种标记语言，通过标记符号来标记要显示的网页中的各个部分。HTML文本是由HTML命令组成的描述性文本，可以说明文字、图片、音频、视频、超链接等。

2. 网页基本结构

网页的基本结构可分为四部分：

<!DOCTYPE html>  <!-- 文档类型声明 -->
<html>          <!-- 网页根元素 -->
  <head>        <!-- 头部元素容器 -->
    <!-- 元数据、脚本引用、样式表位置等 -->
  </head>
  <body>        <!-- 网页主体内容 -->
    <!-- 段落、列表、链接、图像、表格等可视内容 -->
  </body>
</html>

三、CSS基础

1. CSS定义

CSS（Cascading Style Sheets）为HTML提供样式描述，定义了元素的显示方式。CSS可以：

  • 统一存放和管理样式声明
  • 实现样式继承和层叠
  • 提供丰富的样式定义
  • 设置文本和背景属性

2. CSS与HTML的关系

HTML实现网页的基本元素，CSS则负责美化这些元素的显示方式。

四、JavaScript基础

1. JavaScript定义

JavaScript（JS）是一种面向对象的解释型脚本语言，具有简单、动态、跨平台的特点。它由三部分组成：

  1. ECMAScript：描述JS语言的基本语法与基本对象
  2. DOM（文档对象模型）：处理网页结构内容的方法与接口
  3. BOM（浏览器对象模型）：独立于内容而与浏览器窗口交互的方法与接口

2. JavaScript的作用

  • 构建可拓展的交互式Web应用
  • 实现网页动态效果
  • 处理用户交互

五、HTML元素、标签与属性

1. 元素（Element）

元素是网页的一部分，是构成网页的基本单位，一个网页就是由多个元素构成的文本文件。

2. 标签（Tag）

标签用来定义元素，大多数标签成对使用（开始标签和结束标签）：

<div>这是一个div标签</div>
<p>这是一个p标签</p>

少数标签不成对：

<input>

<hr>

3. 属性（Attribute）

属性为标签添加额外信息，以键值对形式出现在开始标签中：

<a href="https://www.example.com/">这是一个a标签，href是属性</a>

属性分类：

  1. 通用属性（适用于大部分标签）：

    • class：规定元素的类名
    • id：规定元素的唯一id
    • style：规定元素的行内样式
    • title：规定元素的额外信息

  2. 专用属性（适用于特定标签）：

    • href：主要用于a标签与link标签，规定超链接地址
    • alt：主要用于img标签与area标签，规定图像无法显示时的替代文本

六、文档对象模型（DOM）

1. DOM定义

DOM（Document Object Model）是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM将HTML文本作为一个树形结构，每个结点表示一个HTML标签或文本项。

2. DOM操作API

增

  • document.createElement：创建元素节点
  • document.write：向文档写入内容
  • element.innerHTML：向标签元素中添加内容

删

  • element.removeChild：删除子节点并返回删除的节点
  • element.remove：把元素从DOM树中删除
  • element.removeAttribute：删除元素属性

改

  • element.appendChild：将节点插入到父节点列表末尾
  • parentNode.replaceChild：用节点替换子节点并返回被替换节点
  • parentNode.insertBefore：将节点插入到子节点之前

查

  • document.getElementById：返回匹配指定Id的元素
  • document.getElementsByClassName：返回包含指定类名的元素的类数组对象
  • document.querySelector：返回匹配指定选择器的第一个元素

事件处理

  • EventTarget.addEventListener：注册事件监听器
  • document.createEvent：创建指定类型的事件
  • EventTarget.removeEventListener：移除事件监听器

七、CSS选择器

CSS选择器用于控制HTML页面中的元素，主要分为：

  1. 元素选择器：通过标签名选择

    p { /* 样式 */ }

  2. 类选择器：通过类名选择

    .page { /* 样式 */ }

  3. id选择器：通过id值选择

    #key { /* 样式 */ }

  4. 群组选择器：同时选择多个选择器

    div, .page { /* 样式 */ }

  5. 子元素选择器：选择直接子元素（不跨节点）

    div > p { /* 样式 */ }

  6. 后代选择器：选择所有后代元素（可跨节点）

    div p { /* 样式 */ }

八、总结

理解网页基本结构是学习爬虫的基础，主要包括：

  1. HTML负责网页内容结构
  2. CSS负责网页样式表现
  3. JavaScript负责网页交互行为
  4. DOM提供了操作网页内容的接口
  5. CSS选择器是定位网页元素的重要工具

掌握这些基础知识后，可以更好地理解网页的构成，为后续的爬虫开发打下坚实基础。

爬虫基础之网页基本结构教学文档 一、网页概述 网页是互联网应用的一种形态，是组成网站的基本元素。它是一个包含HTML标签的纯文本文件，可以存放在世界上任意一台计算机中。网页可以被看作为承载各种网站应用和信息的容器，网站的可视化信息都通过网页来进行展示。 网页的组成 表面组成 ：文字、图片、音频、视频、超链接等用户可直接看到的元素 本质组成 ： HTML（超文本标记语言） CSS（层叠样式表） JavaScript（脚本语言） 二、HTML基础 1. HTML定义 HTML（HyperText Markup Language）是一种标记语言，通过标记符号来标记要显示的网页中的各个部分。HTML文本是由HTML命令组成的描述性文本，可以说明文字、图片、音频、视频、超链接等。 2. 网页基本结构 网页的基本结构可分为四部分： 三、CSS基础 1. CSS定义 CSS（Cascading Style Sheets）为HTML提供样式描述，定义了元素的显示方式。CSS可以： 统一存放和管理样式声明 实现样式继承和层叠 提供丰富的样式定义 设置文本和背景属性 2. CSS与HTML的关系 HTML实现网页的基本元素，CSS则负责美化这些元素的显示方式。 四、JavaScript基础 1. JavaScript定义 JavaScript（JS）是一种面向对象的解释型脚本语言，具有简单、动态、跨平台的特点。它由三部分组成： ECMAScript ：描述JS语言的基本语法与基本对象 DOM（文档对象模型） ：处理网页结构内容的方法与接口 BOM（浏览器对象模型） ：独立于内容而与浏览器窗口交互的方法与接口 2. JavaScript的作用 构建可拓展的交互式Web应用 实现网页动态效果 处理用户交互 五、HTML元素、标签与属性 1. 元素（Element） 元素是网页的一部分，是构成网页的基本单位，一个网页就是由多个元素构成的文本文件。 2. 标签（Tag） 标签用来定义元素，大多数标签成对使用（开始标签和结束标签）： 少数标签不成对： 3. 属性（Attribute） 属性为标签添加额外信息，以键值对形式出现在开始标签中： 属性分类： 通用属性 （适用于大部分标签）： class ：规定元素的类名 id ：规定元素的唯一id style ：规定元素的行内样式 title ：规定元素的额外信息 专用属性 （适用于特定标签）： href ：主要用于a标签与link标签，规定超链接地址 alt ：主要用于img标签与area标签，规定图像无法显示时的替代文本 六、文档对象模型（DOM） 1. DOM定义 DOM（Document Object Model）是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM将HTML文本作为一个树形结构，每个结点表示一个HTML标签或文本项。 2. DOM操作API 增 document.createElement ：创建元素节点 document.write ：向文档写入内容 element.innerHTML ：向标签元素中添加内容 删 element.removeChild ：删除子节点并返回删除的节点 element.remove ：把元素从DOM树中删除 element.removeAttribute ：删除元素属性 改 element.appendChild ：将节点插入到父节点列表末尾 parentNode.replaceChild ：用节点替换子节点并返回被替换节点 parentNode.insertBefore ：将节点插入到子节点之前 查 document.getElementById ：返回匹配指定Id的元素 document.getElementsByClassName ：返回包含指定类名的元素的类数组对象 document.querySelector ：返回匹配指定选择器的第一个元素 事件处理 EventTarget.addEventListener ：注册事件监听器 document.createEvent ：创建指定类型的事件 EventTarget.removeEventListener ：移除事件监听器 七、CSS选择器 CSS选择器用于控制HTML页面中的元素，主要分为： 元素选择器 ：通过标签名选择 类选择器 ：通过类名选择 id选择器 ：通过id值选择 群组选择器 ：同时选择多个选择器 子元素选择器 ：选择直接子元素（不跨节点） 后代选择器 ：选择所有后代元素（可跨节点） 八、总结 理解网页基本结构是学习爬虫的基础，主要包括： HTML负责网页内容结构 CSS负责网页样式表现 JavaScript负责网页交互行为 DOM提供了操作网页内容的接口 CSS选择器是定位网页元素的重要工具 掌握这些基础知识后，可以更好地理解网页的构成，为后续的爬虫开发打下坚实基础。