共计 3179 个字符，预计需要花费 8 分钟才能阅读完成。
大数据时代，各行各业对数据采集的需要日益增多，网络爬虫的使用也更为宽泛，越来越多的人开始学习网络爬虫这项技术，K 哥爬虫此前曾经推出不少爬虫进阶、逆向相干文章，为实现从易到难全方位笼罩，特设【0 根底学爬虫】专栏，帮忙小白疾速入门爬虫，本期为网页根本构造介绍。
网页概述
网页是互联网利用的一种状态，是组成网站的根本元素。它是一个蕴含 HTML 标签的纯文本文件，能够寄存在世界上任意一台计算机中。网页能够被看作为承载各种网站利用和信息的容器，网站的可视化信息都通过网页来进行展现，为网站用户提供一个敌对的界面。
外表上，网页的组成能够分为文字、图片、音频、视频、超链接等元素形成，这些元素是用户可能间接看到的。但在实质上，网页的组成分为三局部：
-
HTML
HTML 的全称为超文本标记语言，是一种标记语言，它是规范通用标记语言下的一个利用，也是一种标准，一种规范，它通过标记符号来标记要显示的网页中的各个局部。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令能够阐明文字、图片、音频、视频、超链接等，用户在网页上看到的各种元素都是通过 HTML 文原本实现的。
-
CSS
网页的根本元素是通过 HTML 来实现的，然而 HTML 只能实现最根本的网页款式。随着 HTML 的倒退，为了满足网页开发者的需要，CSS 便孕育而生。
CSS 全称为层叠样式表。它为 HTML 语言提供了一种款式形容，定义了元素的显示方式。提供了丰盛的款式定义以及设置文本和背景属性的能力。CSS 能够将所有的款式申明对立寄存，进行对立治理。在 CSS 中，一个文件的款式能够从其余的样式表中继承。读者在有些中央能够应用他本人更喜爱的款式，在其余中央则继承或“层叠”作者的款式。这种层叠的形式使作者和读者都能够灵便地退出本人的设计，混合每个人的喜好。
-
JavaScript
JavaScript（JS）是一种面向对象的解释型脚本语言，它具备简略、动静、跨平台的特点。它被广泛应用与 Web 开发中，帮忙开发者构建可拓展的交互式 Web 利用。JavaScript 由三局部组成：
- ECMAScript，形容了 JS 语言的根本语法与根本对象。
- 文档对象模型（DOM），提供了解决网页构造内容的办法与接口。
- 浏览器对象模型（BOM），提供了独立于内容而与浏览器窗口进行交互的办法与接口。
根本构造
网页的根本构造大抵能够分为四局部:Doctype 申明、html 元素、head 元素和 body 元素。
- Doctype： 用来申明文档类型。它在 HTML 中的作用就是通知浏览器以何种形式渲染页面。
- html： html 元素是网页的根元素，网页中的内容都会蕴含在 html 标签中。
- head： head 是所有头部元素的容器。被用来援用脚本文件、批示样式表存于何处。
- body： body 是网页的主体元素，用户在网页上浏览到的信息次要都存在于 body 之中，它蕴含网页文档的所有内容，如段落，列表，链接，图像，表格等。
元素、标签与属性
元素（Element）是网页的一部分，是形成网页的根本单位，实际上一个网页就是由多个元素形成的的文本文件。
标签（Tag）的作用就是用来定义元素。大多数的标签都是成对应用的，它存在一个开始标签与一个结尾标签，开始与结尾标签两头蕴含该元素的文本信息。
<div> 这是一个 div 标签 </div>
<p> 这是一个 p 标签 </p>也有少部分的标签不成对。
<input>
<img>
<hr>
...属性（attribute）次要是用来为标签增加额定的信息，属性的定义个别在开始标签中，以键值对的模式呈现（name=”value”
），属性的值应始终包含在引号内，属性和属性值对大小写不敏感，然而举荐应用小写的属性与属性值。一个标签能够领有多个属性，也能够没有属性，开发者没有为标签定义属性的话则会应用默认属性。
<a href="https://www.kuaidaili.com/"> 这是一个 a 标签，href 是我的属性。</a>
属性在 HTML 中被分为两种：通用属性和专用属性。通用属性实用于大部分或所有标签之中，如：
- class：规定元素的类名
- id：规定元素的惟一 id
- style：规定元素的行内款式
- title：规定元素的额定信息
专用属性实用于小局部标签或特定标签，如：
- href：次要用于 a 标签与 link 标签中，规定元素的超链接地址
- alt：次要用于 img 标签与 area 标签中，规定在图像无奈显示时的代替文本
文档对象模型 DOM
DOM 全称即文档对象模型，是 W3C 制订的标准接口标准，是一种解决 HTML 和 XML 文件的规范 API。DOM 将 HTML 文本作为一个树形构造，DOM 树的每个结点都示意了一个 HTML 标签或 HTML 标签内的文本项，它将网页与脚本或编程语言连接起来。
通过这个 DOM 树，开发者能够通过 JavaScript 来创立动静 HTML，开发者借助 JavaScript 能够实现：
- 动静扭转页面中的所有 HTML 元素
- 扭转页面中的所有 HTML 属性
- 扭转页面中的所有 CSS 款式
- 删除已有的 HTML 元素和属性
- 增加新的 HTML 元素和属性
- 对页面中所有已有的 HTML 事件作出反应
- 在页面中创立新的 HTML 事件
DOM 提供了一系列 API 来实现这些操作。
-
增
document.createElement：创立元素节点。
document.write：向文档写入内容。
element.innerHTML：向标签元素中增加内容。
-
删
element.removeChild：从 DOM 中删除一个子节点并返回删除的节点。
element.remove：把元素从它所属的 DOM 树中删除。
element.removeAttribute：从指定的元素中删除一个属性。
-
改
element.appendChild：将一个节点插入到指定父节点列表的开端处。
parentNode.replaceChild：用一个节点替换以后节点中的一个子节点并返回被替换的节点。
parentNode.insertBefore：将一个节点插入到以后节点中一个子节点之前。
-
查
document.getElementById：返回一个元素 Id 与指定 Id 相匹配的元素。
document.getElementsByClassName：返回一个蕴含所有指定类名的元素的类数组对象。
document.querySelector：返回文档中与指定选择器或选择器组匹配的第一个 Element 对象。
-
事件处理
EventTarget.addEventListener：将指定的监听器注册到 EventTarget 上，当事件被触发时，指定的回调函数就会被执行。
document.createEvent：创立一个指定类型的事件。
EventTarget.removeEventListener：移除事件监听器。
CSS 选择器
css 选择器是用来对 HTML 页面中的元素进行管制，通过对 CSS 选择器的理解，能够加深对网页构造与节点的了解。罕用的 CSS 选择器次要分为：
1、元素选择器： 通过 标签名 {} 的格局来选中对应标签，如：p{}。
2、类选择器： 通过 . 类名{} 的格局来选中对应类名的标签，如：.page{}，page 为元素的类名。
3、id 选择器： 通过 #id 值{} 的格局来选中对应 id 值的标签，如：#key{}，key 为元素的 id 值。
4、群组选择器： 通过 选择器 1, 选择器 2, 选择器 3...{}的格局来选中对应选择器的标签，如：div,.page{}，即抉择 div 标签下类名为 pagae 的标签。
5、子元素选择器： 通过 父元素 > 子元素 {} 的格局来选中对应父元素中对应子元素的标签，如：div > p{}，即抉择 div 标签下的 p 标签，子元素选择器只能抉择间接后辈，不能跨节点选取。
6、后辈选择器： 通过 父元素 子元素 {} 的格局来选中对应父元素中对应子元素的标签，如：div p{}，即抉择 div 标签下的 p 标签，后辈选择器能够跨节点选取。
