大数据时代，各行各业对数据采集的需求越来越大，网络爬虫的使用也越来越广泛。越来越多的人开始学习如何使用网络爬虫。这个技术，爬虫K哥之前发布过很多爬虫进阶和逆向相关的文章。为了做到从易到难全方位覆盖，特开设【0基础爬虫】栏目，帮助小白快速上手爬虫。本期是网页基本结构介绍。网页概述网页是互联网应用的一种形式，是网站的基本元素。它是一个包含HTML标签的纯文本文件，可以存储在世界上任何一台计算机上。网页可以看作是承载各种网站应用和信息的容器，通过网页展示网站的视觉信息，为网站用户提供友好的界面。从表面上看，网页的构成可以分为文本、图片、音频、视频、超链接等元素，这些元素是用户可以直接看到的。但从本质上讲，一个网页的构成分为三部分：HTMLHTML全称为HypertextMarkupLanguage，是一种标记语言。它是标准通用标记语言下的应用。标记符号来标记要显示的网页的各个部分。HTML文本是由HTML命令组成的描述性文本。HTML命令可以解释文本、图片、音频、视频、超链接等，用户在网页上看到的各种元素都是通过HTML文本实现的。CSS网页的基本元素是通过HTML实现的，但是HTML只能实现最基本的网页样式。随着HTML的发展，为了满足web开发者的需求，CSS诞生了。CSS代表层叠样式表。它为HTML语言提供了样式描述，定义了元素的显示方式。提供丰富的样式定义以及设置文本和背景属性的能力。CSS可以将所有的样式声明统一存储起来，统一管理。在CSS中，文档的样式可以从其他样式表继承。读者可以在某些地方使用自己喜欢的风格，而在其他地方继承或“级联”作者的风格。这种级联方法让作者和读者都可以灵活地添加自己的设计，混合每个人的口味。JavaScriptJavaScript(JS)是一种面向对象的解释型脚本语言，简单、动态、跨平台。它广泛用于Web开发，以帮助开发人员构建可扩展的交互式Web应用程序。JavaScript由三部分组成：ECMAScript，描述了JS语言的基本语法和基本对象。文档对象模型(DOM)提供了处理网页结构内容的方法和接口。浏览器对象模型(BOM)，它提供独立于内容与浏览器窗口进行交互的方法和接口。基本结构一个网页的基本结构大致可以分为四个部分：Doctype声明、html元素、head元素和body元素。Doctype：用于声明文档类型。它在HTML中的作用是告诉浏览器如何呈现页面。html：html元素是网页的根元素，网页中的内容都会包含在html标签中。head：head是所有head元素的容器。用于引用脚本文件并指示样式表的存储位置。正文：正文是网页的主要元素。用户在网页上浏览的信息主要存在于正文中，正文中包含了网页文档的所有内容，如段落、列表、链接、图像、表格等。元素、标签和属性元素（Element）是网页的一部分，是网页的基本单元。实际上，网页就是一个由多个元素组成的文本文件。标签用于定义元素。大多数标签成对使用。有开始标签和结束标签，元素的文本信息包含在开始标签和结束标签之间。
Thisisadivtag
Thisisaptag
还有一小部分标签没有配对。
![]()
...Attribute（属性）主要用于给标签添加附加信息。属性的定义一般在开始标签中，以键值对的形式出现(name="value")，属性的值要始终用引号括起来，属性和属性值不区分大小写，但建议使用小写的属性和属性值。一个标签可以有多个属性，也可以没有属性。如果开发人员没有为标签定义属性，则将使用默认属性。
这是一个a标签，href是我的属性。属性在HTML中分为两种类型：通用属性和特殊属性。通用属性适用于大部分或所有标签，例如：class：指定元素的类名id：指定元素的唯一idstyle：指定元素的内联样式title：指定元素的附加信息标签，如：href：主要用在a标签和link标签中，指定元素的超链接地址alt：主要用在img标签和area标签中，指定图片无法显示时的替代文本文档对象模型DOMDOM，全名是文档对象模型，是W3C制定的标准接口规范，是处理HTML和XML文件的标准API。DOM将HTML文本视为树状结构，DOM树的每个节点代表一个HTML标签或HTML标签内的一个文本项，它将网页与脚本或编程语言联系起来。通过这个DOM树，开发者可以通过JavaScript创建动态的HTML。开发人员可以使用JavaScript实现：动态更改页面中的所有HTML元素更改页面中的所有HTML属性更改页面中的所有CSS样式删除现有的HTML元素添加新的HTML元素和属性响应页面中所有现有的HTML事件新建页面DOM中的HTML事件提供了一系列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、类选择器：使用.classname{}的格式选择类名对应的标签，如：.page{}，其中page为元素的类名。3.id选择器：使用#id值{}的格式来选择id值对应的标签，如：#key{}，key为元素的id值。4.分组选择器：通过selector1,selector2,selector3...{}的格式选择selector对应的标签，如：div,.page{}，即选择div下的类名tagpagae的标签。5、子元素选择器：通过父元素>子元素{}的格式选择父元素中子元素对应的标签，如：div>p{}，即选择div标签下的p标签,子元素选择器只能选择直系后代，不能跨节点选择。6、后代选择器：使用父元素子元素{}的格式选择父元素中子元素对应的标签，如：divp{}，即选择div标签下的p标签，以及后代选择器可以跨节点选择。
