大数据时代,各行各业对数据采集的需要日益增多,网络爬虫的使用也更为宽泛,越来越多的人开始学习网络爬虫这项技术,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标签,后辈选择器能够跨节点选取。