Web前端基础

最新推荐文章于 2024-07-18 17:32:29 发布

Roc.lp

最新推荐文章于 2024-07-18 17:32:29 发布

阅读量53

点赞数

分类专栏： python爬虫文章标签：前端 python 爬虫 html css javascript http

本文链接：https://blog.csdn.net/weixin_66026285/article/details/132473167

版权

python爬虫专栏收录该内容

5 篇文章 0 订阅

订阅专栏

概述

爬虫主要是和网页打交道，需要一定的Web前端基础。本文介绍了HTML、CSS、JavaScript、XPath、JSON、HTTP的相关知识，为之后的Python爬虫打下基础。

W3C标准

W3C，即万维网联盟，是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。
万维网联盟(W3C)标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构(Structure )、表现(Presentation)和行为(Behavior)。对应的标准也分三方面：结构化标准语言主要包括XHTMI和 XML，表现标准语言主要包括 CSS，行为标准主要包括对象模型 W3C DOM JavaScript 等。

HTML

HTML（HyperText Markup Language）不是编程语言，是一种超文本标记语言。它是一种用于创建网页的标准标记语言。HTML使用一系列标签（标记）来描述网页中的结构和内容，并通过这些标签将文本、图像、链接以及其他媒体元素组织起来。HTML是一种基础技术，被用于构建网页和Web应用程序的前端部分。浏览器可以读取HTML文件并将其解析为可视化的网页。

HTML语言的特点包括：

设置文本的格式，比如标题、字号、文本颜色、段落，等等
超链接，可以使用鼠标点击超链接来实现页面之间的跳转
创建列表。
插人图像和媒体。
建立表格

HTML基本结构

- <html>内容</html>:
	HTML文档是由<html></htm>包裹，这是HTML文档的文档标记，也称为 HTML 开始标记。这对标记分别位于网页的最前端和最后端，<html>在最前端表示网页的开始，</html>在最后端表示网页的结束。
- <head>内容</head>:
	HTML文件头标记，也称为HTML头信息开始标记。用来包含文件的基本信息，比如网页的标题、关键字，在<head></head>内可以放<title></title><meta></meta>、<style></style>等标记。注意:在<head></head>标记内的内容不会在浏览器中显示。
- <title>内容</title>:
	HTML 文件标题标记。网页的“主题”，显示在浏览器的窗口的左上边。
- <body>内容</body>:
	<body></body>是网页的主体部分，在此标记之间可以包含如<p></p>、<h1></h1>、<br>、<hr>等等标记，正是由这些内容组成了我们所看见的网页。
- <meta>内容</meta>:
	页面的元信息 (meta-information)。提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。注意meta标记必须放在 head 元素里面。

文档标记设置

格式标记：

- <br>:
	强制换行标记。让后面的文字、图片、表格等等，显示在下一行。
- <p>:
	段落标记。新段落，由于多个空格和回车在 HTML 中会被等效为一个空格所以HTML中要换段落就要用<p>,<p>段落中也可以包含<p段落。
	例如:<p>This is a new paragraph.</p>
- <center>:
	居中对齐标记。让段落或者是文字相对于父标记居中显示。
- <pre>:
	预格式化标记。保留预先编排好的格式，常用来定义计算机源代码。和<p>进行一下对比，就可以理解。
- <li>:
	列表项目标记。每一个列表使用一个<li>标记，可用在有序列表(<ol>)和无序列表(<ul>)中
- <ul>:
	无序列表标记。<ul>声明这个列表没有序号。<ol>:有序列表标记。可以显示特定的一些顺序。有序列表的 type 属性值”1"表示阿拉伯数字1.2.3 等等。
- <dl><dt><dd>:
	定义型列表。对列表条目进行简短说明。
- <hr>:
	水平分割线标记。可以用作段落之间的分割线。
- <div>:
	分区显示标记，也称为层标记。常用来编排一大段的 HTML 段落，也可以用于将表格式化，和<p>很相似，可以多层嵌套使用。

文本标记：

- <hn>:
	标题标记。共有6个级别，n 的范围为1~，不同级别对应不同显示大小的标题，h1 最大，h6 最小。
- <font>:
	字体设置标记。用来设置字体的格式.
	size(字体大小),<font size="14px">;
	color( 颜色 )<font color="red">;
	face( 字体),<font face="微软雅黑">。
- <b>:加粗字体标记。
- <i>:斜字体标记。
- <sub>:文字下标字体标记
- <sup>:文字上标字体标记
- <tt>:打印机字体标记。
- <cite>:引用方式的字体，通常是斜体。
- <em>:表示强调，通常显示为斜体字
- <strong>:表示强调，通常显示为粗体字
- <small>:小型字体标记。
- <big>:大型字体标记。
- <u>:下划线字体标记

图像标记：
<img>称为图像标记，用来在网页中显示图像。使用方法为:<img src="路径/文件名图片格式 “width="属性值"height="属性值”border="属性值"alt=“属性值”>。<img>标记主要包括以下属性:

注意：<img>为单标记标签，不需要使用</img>闭合。
在加载图像文件的时候，文件的路径、文件名或者文件格式错误，将无法加载图片。`

- src 属性用来指定我们要加载的图片的路径、图片的名称以及图片格式。
- width 属性用来指定图片的宽度，单位为 px、em、cm、mm。
- height 属性用来指定图片的高度，单位为px、em、cm、mm。
- border 属性用来指定图片的边框宽度，单位为px、em、cm、mm。
-  alt 属性有三个作用:
	1)当网页上的图片被加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字;
	2) 如果图像没有下载或者加载失败，会用文字来代替图像显示;
	3)搜索引擎可以通过这个属性的文字来抓取图片。

超链接：

超链接使用的是<a>标签

<a>标记的基本语法:<a href="链接地址 target=“打开方式” name="页面点名称"链接文字或者图片</a>。

<a>标记主要包括以下属性:
- href属性值是链接的地址，链接的地址可以是一个网页，也可以是一个视频、图片音乐等。
- target 属性用来定义超链接的打开方式。
	当属性值为_blank 时，作用是在一个新的窗口中打开链接;			    
	当属性值为_self(默认值)时，作用是在当前窗口中打开链接:					
	当属性值为_parent 时，作用是在在父窗口中打开页面;
	当属性值为_top 时，在顶层窗口中打开文件。
- name 属性用来指定页面的错点名称。

表格

表格的基本结构包括<table><caption><td><th><tr>等标记。

CSS

CSS 指层叠样式表(Cascading Style Sheets )，用来定义如何显示 HTML 元素，一般和HTML 配合使用。CSS 样式表的目的是为了解决内容与表现分离的问题，即使同一个HTML文档也能表现出外观的多样化。

在HTML中使用CSS 样式的方式，一般有三种做法:
- 内联样式表:
	CSS代码直接写在现有的HTML标记中，直接使用 style 属性改变样式。
	例如，<body style="background-color;green;margin:0; padding:0;"></body>。
- 嵌入式样式表:
	CSS样式代码写在<style type="text/css"></style>标记之间。
	一般情况下嵌入式CSS样式写在<head></head>之间。
- 外部样式表:
	CSS代码写一个单独的外部文件中，这个CSS 样式文件以“.css”为扩展名，在<head>内(不是在<style>标记内)使用<lik>标记将 CSS样式文件链接到HTML文件内。
	例如，<link rel="StyleSheet" type="text/css" href="style.css">.

JavaScript

JavaScript是一种轻量级脚本语言，通过浏览器解释执行。JavaScript可以插入HTML页面中，实现页面的交互。

JavaScript可以插入HTML页面中，主要有直接插人代码和外部引用js文件两种做法:
	1)直接插入代码。
	在<script></script标记中编写代码;
	JavaScript代码可以直接嵌在网页的任何地方;
	通常我们把 JavaScript 代码放到<head>中
	2)外部引用js文件。
	把JavaScript 代码放到一个单独的js文件;
	在HTML中通过<script src='目标文档的URL></script>的方式来引js文件;
	其中目标文档的URL即是链接外部的js文件。

XPath

XPath 是一种在XML文档中查找信息的语言，用于在 XML文档中通过元素和属性进行导航。
在Python 爬虫开发中，常用XPath以路径表达式的形式来定位元素，查找提取网页中的信息。

XPath节点

在XPath 中，XML 文档是被作为节点树来对待的，有七种类型的节点:
元素、属性、文本、命名空间、处理指令、注释以及文档(根)节点（树的根被称为文档节点或者根节点）。

XPath语法

XPath 使用路径表达式来选取 XML 文档中的节点或节点集。节点是沿着路径(path)或者步(steps)来选取的。

XPath路径表达式

表达式	描述
nodename	选取此节点的所有子节点
/	从根节点选取
//	选择任意位置的某个节点
.	选取当前节点
…	选取当前节点的父节点
@	选取属性

XPath 在进行节点选取的时候可以使用通配符 “*” 匹配未知的元素，同时使用操作符 “|” 一次选取多条路径。

JSON

JSON 是 JavaScript 对象表示法(JavaScript Object Notation)，用于存储和交换文本信息。
JSON 比XML 更小更快、更易解析，因此JSON 在网络传输中，尤其是 Web 前端中运用非常广泛。
JSON使用JavaScript语法来描述数据对象,但是JSON仍然独立于语言和平台。JSON解析器和JSON库支持许多不同的编程语言，其中就包括Python。

JSON键值对
JSON 数据的书写格式是键值对。键值对包括字段名称(在双引号中)，紧接着是一个冒号，最后是值，类似Python中字典。
JSON值
JSON值可以是:数字(整数或浮点数)字符(在双引号中)逻辑值(true或 false)、数组(在方括号中)、对象(在花括号中)、null。
JSON 对象
JSON 对象在花括号中书写，对象可以包含多个名称/值对。类似Python 中的字典。
JSON 数组
JSON 数组在方括号中书写，数组可包含多个对象。

HTTP标准

HTTP协议(HyperText Transfer Protocol，超文本传输协议)是用于从WWW 服务器传输超文本到本地浏览器的传送协议。
它可以使浏览器更加高效，减少网络传输。使用Python 爬虫，主要就是和 HTTP 协议打交道。

HTTP请求过程

HTTP 协议采取的是请求响应模型，HTTP 协议永远都是客户端发起请求，服务器响应。

HTTP请求响应模型

HTTP状态码

浏览器向网页所在服务器发出请求时，在浏览器接收并显示网页之前，此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求。
HTTP 状态码主要是是为了标识此次 HTTP 请求的运行状态。
常见的HTTP状态码:

200——请求成功。
301——资源(网页等)被永久转移到其他URL。
404——请求的资源(网页等)不存在。
500——内部服务器错误。

HTTP头部信息

HTTP头部信息由众多的头域（键值对）组成，每一个头域由域名：域值组成。

HTTP 消息报头主要包括普通报头、请求报头、响应报头、实体报头：
	1)在普通报头中，有少数报头域用于所有的请求和响应消息，但并不用于被传输的实体只用于传输的消息。
	2) 请求报头允许客户端向服务器端传递请求的附加信息以及客户端自身的信息。
	3)响应报头允许服务器传递不能放在状态行中的附加响应信息，以及关于服务器的信息和对Request-URL所标识的资源进行下一步访问的信息。
	4)请求和响应消息都可以传送一个实体。
	一个实体由实体报头域和实体正文组成，但并不是说实体报头域和实体正文要在一起发送，可以只发送实体报头域。实体报头定义了关于实体正文和请求所标识的资源的元信息。

Cookie状态管理

Cookie 和 Session 都用来保存状态信息，都是保存客户端状态的机制，主要用于解决 HTTP 无状态的问题。
对于爬虫来说，我们更加关注的是Cookie，因为Cookie将状态保存在客户端，Session 将状态保存在服务器端。
Cookie 是服务器在本地机器上存储的小段文本并随每一个请求发送至同一个服务器。网络服务器用HTTP头向客户端发送 Cookie,浏览器则会解析这些Cookie并将它们保存为一个本地文件，它会自动将同一服务器的任何请求绑定上这些 Cookie。
Cookie 的工作方式:服务器给每个Session分配一个唯一的JSESSIONID，并通过Cookie发送给客户端。当客户端发起新的请求的时候，将在Cookie头中携带这个JSESSIONID。这样服务器能够找到这个客户端对应的 Session。

Cookie工作流程

HTTP请求方式

常用的HTTP请求方式是GET和POST。

GET请求：
以实体的方式得到由请求 URL 所指定资源的信息，如果请求 URL 只是一个数据产生过程，那么最终要在响应实体中返回的是处理过程的结果所指向的资源，而不是处理过程的描述。
POST请求：
向目标服务器发出请求，要求它接受被附在请求后的实体，并把它当作请求队列中请求URL所指定资源的附加新子项。
GET与POST请求的区别:
GET请求通过 URL 提交数据，数据在 URL 中可以看到；POST请求，数据放置在实体区内提交，URL中不可见。
GET请求提交的数据最多只能有1024 字节；POST请求则没有限制。
GET请求参数会显示在地址栏上；POST请求参数不会显示在地址栏。
综上，如果数据是非敏感数据，使用GET请求；如果数据包含敏感数据，使用 POST请求。