Day1 爬虫和前端

今天开始正式进入爬虫这个板块啦


文章目录

  • Day1 爬虫和前端
  • 1. requests的基本用法
  • 1.1 认识爬虫
  • 1.2 爬虫的基本流程
  • 1.3 requests
  • 1.4 requests基本用法
  • 1.4.1 对目标网页直接发送请求
  • 2. 认识前端
  • 3. css基础
  • 3.1 认识css
  • 3.2 css选择器


1. requests的基本用法

1.1 认识爬虫

获取网络数据(公开的数据)
网络数据来源：网站对应的网页、手机APP

1.2 爬虫的基本流程

第一步：获取网络数据(requests、selenium)
第二步：解析数据-从获取到的网络数据中提取有效数据（正则、bs4、lxml）
第三步：保存数据(csv、excel、数据等)

1.3 requests

Python获取网络数据的第三方库(基于http或者https协议的网络请求)
爬虫使用requests的两个场景：直接请求网页地址、对提供网页数据的数据接口发送请求

1.4 requests基本用法

1.4.1 对目标网页直接发送请求

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

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

获取响应的状态码

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

获取响应头

print(response.headers)

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

  • response.content —— 二进制类型的数据(图片、视频、音频等， 例如：图片下载)
  • response.text —— 字符串类型的数据(网页)
  • response.json() —— 对请求内容做完json解析后的数据（json数据接口）

2. 认识前端

html是以标签为单位来给网页提供内容的。
不同的标签可以提供不同的内容。

  1. 标签的语法结构(重要！)：
    1）双标签：<标签名 属性名1=属性值1 属性名2=属性值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>

python接受前端post python接收前端数据_爬虫

3. css基础

3.1 认识css

css负责网页内容样式（让网页可以变得更好看）
css语法：
选择器（属性1：属性值1；属性2：属性值2…）

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

3.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;
			}
		<yle>
		<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;
			}
		<yle>
		<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;
			}
		<yle>
		<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;
			}
		<yle>
		<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{
				
			}
		<yle>
		
		<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>
<ml>