day19 爬虫和前端

最新推荐文章于 2024-01-13 11:17:06 发布

洋洋酒仙

最新推荐文章于 2024-01-13 11:17:06 发布

阅读量302

点赞数

文章标签：爬虫前端

本文链接：https://blog.csdn.net/qq_59778168/article/details/126291299

版权

九爬虫

9.1 认识爬虫

1.什么是爬虫 - 获取网络数据（公开的网络）

网络数据来源：网站对应的网页、手机APP

2.爬虫的基本流程

第一步：获取网络数据（requests、selenium）

第二步：解析数据-从获取的网络数据中提取有效的数据（正则、bs4、lxml）

第三步：保存数据（csv、excel、数据等）

3.requests - 获取网络数据的第三方库（基于http或者https协议的网络请求）

爬虫使用requests的两个常景：直接请求网页地址、对提供网页数据的数据接口发送请求

1)对目标网页直接发送请求

requests.get（网页地址） - 获取指定网页的数据返回一个响应对象

import requests

response= requests.get('https://cd.zu.ke.com/zufang')
print(response) #<Response [200]> 200-请求成功

获取响应的状态码 status_code

print(response.status_code)
if response.status_code!=200:
    pass

获取响应头

print(response.headers)

请求内容（返回的真正有用的数据）

response.content - 二进制类型的数据（图片、视频、音频等，例如图片下载）

response.text - 字符串类型的数据（网页）

response.json() - 对请求内容做完json解析后的数据（json数据接口）

print(response.content)

4.html是以标签为单位来给网页提供内容的。

不同的标签可以提供不同的内容。

标签的语法结构(重要！)：

1）双标签：<标签名属性名1=属性值1 属性名2=属性值2 …>标签内容</标签名>

2）单标签：<标签名属性名1=属性值1 属性名2=属性值2 …> 或者 <标签名属性名1=属性值1 属性名2=属性值2 …/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>YuTing的网站</title>
		<link rel="icon"  href="img/长城.png">
	</head>
	
	<body>
		
		<h1>学生信息录入</h1>
		<img src="https://img1.baidu.com/it/u=3002324397,2878731521&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427" alt="">
		<p>请同学们完善以下数据：</p>
		
		<img src="img/三峡.png" alt="">
		<span>基本信息</span>
		
		<a href="https://www.baidu.com">百度</a>
		<br>
		<br>
		姓名：<input type="text" value="张三">
		密码：<input type="password" name="" id="">
		<br><br>
		性别：
		<input type="radio" name="gender" id="g1"><label for="g1">男</label>		
		<input type="radio" name="gender" id="g2"><label for="g2">女</label>
		
		<br><br>
		兴趣：
		<input type="checkbox">篮球  
		<input type="checkbox">乒乓球
		<input type="checkbox">爬山
		<input type="checkbox">玩儿游戏
		<input type="checkbox">看动漫
		
		<br><br>
		籍贯：
		<select name="" id="">
			<option value="北京">北京</option>
			<option value="成都">成都</option>
			<option value="重庆">重庆</option>
			<option value="上海">上海</option>
		</select>
		
	</body>
</html>

5.css选择器

css负责网页内容样式（让网页可以变得更好看）

css语法：

选择器（属性1：属性值1；属性2：属性值2…）

选择器：选中需要添加样式的标签

2.css选择器

独立存在的选择器有三个

1）元素选择器（标签选择器） - 将标签名作为选择器，选中所有指定的标签

p{} - 选中所有的p标签

2）id选择器 - 在id属性值前面加#号作为一个选择器，选中id属性值为指定值的标签

每一个可见的标签都可以设置id属性，并且一个页面中，同一个id值只有一个标签。

#id值{}

#p1 - 选中id属性值为p1的标签

3）class选择器 - 在class属性值前加.作为一个选择器，选中class属性值为指定值的标签

不同的标签可以有相同的class值，同一个标签可以有不同的class值（在class值后面空格加上class值，可以有多个class值）

.class值{}

.c1 - 获取class值为c1的所有标签

p.c1 - 获取class值为c1的p标签

.c1.c2 - 获取class值同时为c1和c2的标签

4）群组选择器 - 将多个选择器用逗号隔开作为一个选择器

p,a{} - 选中所有的p标签和所有的a标签

#p1,.c1,p{} - 所有id为p1的标签和class值为c1的标签以及所有的p标签

5）子代选择器 - 多个选择器用>号隔开作为一个选择器（只能有儿子）

div>p{} - 9

6）后代选择器 - 多个选择器用空格隔开作为一个选择器（儿子孙子都可以）

div p{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- style标签中可以写css代码 -->
		
	</head>
	<body>
		<!-- ------------1. 元素选择器案例 -------- -->
		<style>
			p{
				color: red;
				font-size: 30px;
			}
		</style>
		<p>我是段落1</p>
		<a href="">我是超链接1</a>
		<div>我是div1</div>
		<a href="">我是超链接2</a>
		<p>我是段落2</p>
		
		<!-- ------------2. id选择器案例 -------- -->
		<style>
			#p2{
				color: green;
				background-color: yellow;
			}
		</style>
		<p>我是段落1</p>
		<a href="">我是超链接1</a>
		<div>我是div1</div>
		<a href="">我是超链接2</a>
		<p id="p2">我是段落2</p> -->
		
		
		<!-- ------------3. class选择器案例 -------- -->
		<!-- <style>
			.c1{
				color: red;
				font-size: 30px;
			}
			
			.c2{
				background-color: yellow;
			}
			
			p.c1{
				text-decoration: line-through;
			}
			
			.c1.c2{
				border: 1px solid blue;
			}
		</style>
		<p class="c1 c2">我是段落1</p>
		<a class="c2" href="">我是超链接1</a>
		<div>我是div1</div>
		<a class="c1" href="">我是超链接2</a>
		<p id="p2">我是段落2</p>
		<p class="c1">我是段落3</p>
		
		
		<!-- ------------4. 群组选择器案例 -------- -->
		<style>
			a,p{
				color: red;
				font-size: 30px;
			}
			.c1,a{
				background-color: yellow;
			}
		</style>
		<p class="c1">我是段落1</p>
		<a href="">我是超链接1</a>
		<div>我是div1</div>
		<a href="">我是超链接2</a>
		<p>我是段落2</p>
		
		
		<style>
			p{
				color: red;
			}
			
			div>p{
				font-size: 30px;
			}
			
			div p{
				background-color: yellow;
			}
			
			#box1>div p{
				
			}
		</style>
		
		<p>我是段落1</p>
		
		<div>
			<p>我是段落2</p>
			<span>
				<p>我是段落5</p>
			</span>
		</div>
		
		<div id="box1">
			<p>我是段落3</p>
			<div>
				<span>
					<div>
						<p>我是段落4</p>
					</div>
				</span>
			</div>
		</div>	
	</body>
</html>