python 19 爬虫+认识前端开发
一 、爬虫介绍
1. 什么是爬虫 ？
爬虫就是获取网络数据（公开的数据）网络数据来源：网站对应的网页、手机APP(直接找到接口)
2. 爬虫的基本流程
-
第一步：获取网络数据（requests、selenium)
-
第二步：解析数据-从获取到的网络数据中提取有数据（正则：最快但是难，bs4基于第三方工具，lxml会前端的相关知识）
-
第三步：保存数据：保存数据（csv、excel、数据库）
2.1 requests
python获取网络数据的第三方库（基于http或者https协议的网络请求）
爬虫使用requests的两个场景：直接请求网页地址、对提供网页数据接口发送请 求。
2.2 requests基本用法
-
对目标网页直接发送请求：
-
语法：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数据接口)
-
里面不提供数据，只是一个json数据的接口
print(response.text)
-
-
使用ctrl+f就可以对控制台的内容进行检索 , 检验得到的内容是否正确。
-
二 、认识前端开发
1. html 基础
html是以标签为单位的，不同的表标签提供不同的内容
1）文本标签的语法结构
-
双标签：
-
<标签名 属性名1=属性值1 属性名2=属性值2···>标签内容 </标签名>
-
<标签名（父标签） 属性名1=属性值1 属性名2=属性值2···>标签内容（子标签）</标签名>
<标签名 属性1=属性值1 属性2=属性值2 ......>标签和内容</标签名>
-
-
单标签：两种写法
-
<标签名 属性名1=属性值1 属性名2=属性值2···>
-
<标签名 属性名1=属性值1 属性名2=属性值2···/>
<标签名 属性名1=属性值1 属性名2=属性值2···> <标签名 属性名1=属性值1 属性名2=属性值2···/>
-
-
标题标签 < h1 >、 < h2 >、 < h3 >、 < h4 >、 < h5 >、 < h6 >
-
标题标签最多只能写到h6
<h1>好好学习<h1> <h2>好好学习<h2> <h3>好好学习<h3> <h4>好好学习<h4> <h5>好好学习<h5> <h6>好好学习<h6> -
结果显示
-
-
段落标签 < p >
标题标签和段落标签会自动换行（一个标签代表一行或者一段，写下一个标签时自动另起一行）
-
文字倾斜标签 < i >、< em >
-
文字加粗标签 < b> 、 < strong >
-
文字标签可以混合使用
<i> <b>文字倾斜又加粗</b> </i> <b> <i>文字倾斜又加粗</i> </b> <em>文字倾斜</em> <strong>文字加粗</strong>
-
-
换行标签 < br >
-
水平线标签 < hr >
-
行内文本标签 < span >
-
关于空格
- html页面敲任意多个空格恒等于一个空格
- html中一个空格可以用下列两种方式表示：
或者 (要加分号) - & nbsp;表示一个像素（px）单位的空格
& emsp;表示一个汉字的宽度，一个 =16
<span>一 二</span> <br> <span>一 二</span>
2)超链接和图片
- 图片标签
<img src="" alt="" title="">
区别：src： 1.可以写入链接。2.可以写入本地路径，
title：鼠标放到图片上可以提示文字，
alt : 当图片不显示时，显示文字
width、height：能够修改图片、标签盒子等的显示 宽度和高度。
```html
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度" title="点击一下，了解更多" width="100px" height="250px">
```
-
超链接标签 < a >
<a href="" target=""></a>-
href
-
入在线链接
-
可以引入本地文件（必须是html文件）
-
可以引入id选择器
-
-
target
-
_ self : 当前标签页跳转（默认）
-
_ blank : 新的标签页跳转
<a href="https://www.baidu.com" target="_blank">百度一下</a>
-
-
-
如何将图片变为可点击的超链接？
-
以某图片为例
<a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pc" target="_blank"> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" width="270px" height="129px" class="a1"> </a> -
input 标签
-
input:默认是一个文本框，但是通过修改type属性的值可以将input构造成不同的形式
-
placeholder：输入框中的提示性文字
-
maxlength : 限制输入内容的长度
<input type="text" placeholder="" maxlength=""> <input type="password" placeholder="请输入密码" maxlength="5"> <!-- value：当input为按钮时，在按钮上显示文字 --> <input type="submit" value="登录" ><br> <input type="color"> <input type="file"> <input type="date"> <input type="time"> <input type="datetime-local">
-
-
radio和 checkbox
-
radio：单选框
-
name:告诉系统两个单选框属于同一类
-
将单选框中的id属性值设置为和lable标签中的for属性值相同，表示相关联
<input type="radio" name="gender" id="gender1"><label for="gender1">男</label> <input type="radio" name="gender" id="gender2"><label for="gender2">女</label>
-
-
checkbox:复选框
喜欢玩的英雄类型： <input type="checkbox">法师 <input type="checkbox">射手 <input type="checkbox">辅助 <input type="checkbox">打野 <input type="checkbox">都OK
-
-
select 下拉列表
王者喜欢几排： <select name="" id=""> <option value="单排">单排</option> <option value="双排">双排</option> <option value="五排">五排</option> <option value="随便几排">随便几排</option> </select>- 不是标签内容就是标签属性，分清楚所需要的内容是标签内容还是属性。
- div标签是用来规范格式的，就像是正则里面的分组一样
2 . css 基础
- 前端开发 - 写各种互联网产品页面（电脑）
（cocos2dx苹果游戏开发），unity3d三d游戏开发。 - 微信小程序是前端写的，支付宝小程序。
- 前端相关技术：html 、css、js(原生js、jQuery、Vue、React)
- html - 负责网页内容【要知道网页原理】、
- css - 负责前端布局
- js - 负责网页内容的变化
css负责网页内容样式（让网页变得更美观）
2.1 css语法
- 选择器{属性值1：属性值；属性2：属性值2；···}
- 选择器：选中需要添加样式的标签。
2.2 css选择器
独立存在的选择器只有三个，通常是复杂的选择器
1）【***】 元素选择（标签选择） ----- 将标签作为选择器，选择所有指定标签
- p{ } - 选中所有的p标签
- a{ } - 选择所有的a标签
2 ) 【***】 id标签 ----- 在id属性值前加#作为一个选择器，选择id属性值为指定值的标签
每一个可见的标签都可以设置id属性，并且同一个页面中，同一个id值只有一标签
- #p1 - 选择id 属性值为p1的标签
- #a - 选择id 属性值为a的标签
3 ) 【***】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>{ }
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>
今日作业：
1、回顾今日内容
2、租房信息 用正则表达式取出一页中房屋名字和价格
4606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
