文章目录

网页初探
- HTML简介
- HTML标签
- - head标签
  - h1标签
  - p标签
  - a标签
  - button标签
  - img标签
  - input标签
  - table标签
  - ul标签
  - ol标签
  - form标签
- HTML属性
- HTML块
- HTML布局
- HTML布局
- - 传统网页布局方式
  - 布局本质
  - css盒子模型
  - - 边框(border)
    - 内边距(padding)
    - 外边距(margin)
  - 浮动(float)
  - - 清除浮动
  - 定位
  - - 绝对定位
    - 固定定位
爬虫基础培训
- 1、Requests库
- - 1.1 Robots协议
  - 1.2 requests.request()
  - 1.3 Requests库的常见异常
  - 1.4 requests.get()
  - 1.5 其它方法
- 2、Beautiful Soup库
- - 2.1 解析HTML信息
  - 2.2 find_all和find方法
- 3、Re库
- - 3.1 正则表达式
  - 3.2 Re库
- 简单的实战（Requests库）

网页初探

HTML简介

HTML是用来描述网页的一种语言
HTML是一种超文本标记语言
HTML不是一种编程语言，而是一种标记语言
HTML使用标签来描述网页
HTML文档包含了标签及文本

HTML标签

标签是成对存在的，有开始标签和结束标签之分。这些标签能够被浏览器解析，浏览器将解析后的内容展示给用户

head标签

head标签用来定义文档的头部，它是所以头部元素的容器。在该标签中，我们可以引用脚本、样式文件、提供元信息。

h1标签

该标签常用来定义标题,h1表示最大号，h6表示最小号。该标签为块级标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页入门</title>
</head>
<body><h1>我是h1定义的标签</h1><h2>我是h2定义的标签</h2>
</body>
</html>

效果

p标签

该标签常用来定义文本段落。该标签为块级标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页入门</title>
</head>
<body><p>我是p标签，我常来定义一段文本内容</p>
</body>
</html>

效果

a标签

a标签用来定义超链接，用于从一个页面跳转到另一个页面。标签中的href属性为要跳转的页面链接。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页入门</title>
</head>
<body><a href="https://www.baidu.com/">点击我，我是百度链接</a>
</body>
</html>

效果

button标签

button标签用来定义一个按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页入门</title>
</head>
<body><button>按钮</button>
</body>
</html>

效果

img标签

该标签用来向网页中嵌入一幅图像

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页入门</title>
</head>
<body><img src="./photo.jpg" alt="">
</body>
</html>

效果

input标签

用户可以在该标签中输入信息，可以用来接收用户信息。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页入门</title>
</head>
<body><input type="text">
</body>
</html>

效果

table标签

table用来定义表格，每个表格中的行用tr标签定义，每行中的单元格用td来定义（其中表头用th定义）。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页入门</title>
</head>
<body><table><tr><th>第一列</th><th>第二列</th></tr><tr><td>(1,1)</td><td>(1,2)</td></tr><tr><td>(2,1)</td><td>(2,2)</td></tr></table>
</body>
</html>

效果

ul标签

ul标签用来定义无序列表，列表中的小项用li标签定义


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页入门</title>
</head>
<body><ul><li>one</li><li>two</li><li>three</li></ul>
</body>
</html>

效果

ol标签

ol标签用来定义有序列表，其中的小项也是用li标签定义


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页入门</title>
</head>
<body>
<ol><li>one</li><li>two</li><li>three</li>
</ol>
</body>
</html>

效果

form标签

form表单元素用于收集用户输入，表单中的input标签时最重要的元素

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head><meta charset="UTF-8"><title>网页入门</title>
</head>
<body><form action="#">用户名：<input type="text"></br>密  码：<input type="text"></br><input type="button" value="提交"></form>
</body>
</html>

效果

HTML属性

HTML元素可以设置属性值，属性可以在元素中添加附加信息，属性是以属性名=“属性值” 形式定义。HTML元素本身带有很多的属性，开发者自己最常添加的属性为id,class

属性	描述
class	为HTML元素定义类名,多个类名用空格分隔，方便对多个元素进行操作
id	定义元素的id，在同一个HTML文件中，id是唯一的，不能够重复
style	规定元素的行内信息
title	描述元素的额外信息

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head><meta charset="UTF-8"><title>网页入门</title>
</head>
<body><!--给form标签添加action、method、name，id、class属性--><form action="#" method="post" name="" id="" class="">用户名：<input type="text"></br>密  码：<input type="text"></br><input type="button" value="提交"></form>
</body>
</html>

HTML块

绝大多数HTML元素被定义为块级元素和内联元素

块级元素：独占一行，可设置width，height，margin，padding属性，对应的display=block
- h,p,ul,li,table等标签
内联元素：相邻的元素紧挨着排列，设置width，height无效，边距只有margin-left,margin-right,padding-left,padding-right有效
- td,a,img等标签
div元素

网页中布局最常见的标签。可用于组合其他HTML元素，将网页进行分区。一个div和其中包含的元素为一个区。div为块级元素。与css一起使用，用于对一块区域的内容设置样式

span元素

用做为本的容器，行内元素，与css使用，可以为其包含的文本设置属性。

HTML布局

简单的讲，就是如何将网页进行划分，将整个网页划分成不同块，每块是相互独立的。通过HTML布局，方便开发人员进行css样式处理，和网页后期的修改甚至局部替换。

传统网页布局方式

标准流
浮动
定位

布局本质

造盒子
放盒子
填盒子

css盒子模型

所有HTML元素可以看作是盒子，在CSS中，“box model”这一术语用来设计和布局时使用。css盒子模型本质上是一个盒子，它包括：外边距(margin)、边框(border)、内边距(padding)、实际内容(content)。

**注意：**当我们通过css指定一个元素的高度和宽度时，只是设置内容区域的高度和宽度。这个元素真正的宽高还包括边距和边框。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框(border)

border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

border:border-width || border-style || border-color

内边距(padding)

padding属性用于设置内边距，即边框与内容之间的距离

padding:padding-top padding-right padding-bottom padding-left

外边距(margin)

margin属性用于设置外边距，即盒子与盒子之间的距离

margin:margin-top margin-right margin-bottom margin-left

浮动(float)

float属性用于创建浮动框。浮动的框可以向左或右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

语法：

float:none || left || right

浮动元素的特性：
- 脱离标准普通流的控制移动到指定位置
- 浮动的盒子不在保留原来的位置
- 浮动元素具有行内块元素的特性。任何元素都可以浮动，添加浮动后都具有行内块元素的特性
  - 如果浮动后的盒子高宽没有设置，它的大小根据内容来决定。
  - 浮动的元素中间是没有间隙的，紧挨着排布。
浮动元素通常和标准流一起使用。

由于浮动只有左右两种形式，在实际布局中难以约束其位置，所以一般的方法是：先用标准流的父元排列上下位置，然后在内部采取浮动排序左右。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前的标准流。

清除浮动

当子元素很多或者高度不确定的情况下，开发者不方便直接给父元素设置高度。但是浮动的元素脱离了普通标准流，不占原有位置，这会导致父级元素高度为零，从而影响下面标准流的盒子排布。

方法

额外标签法
父元素加overflow法
after伪元素法
双伪元素法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.left{height: 50px;width: 50px;float: left;background-color: red;margin: 2px 2px;}#father{border: 2px solid green;/*overflow方法*//*overflow: hidden;*/}/*额外标签法*//*.clearfix{*//*clear: both;*//*}*//*after伪元素方法*/#father:after{display: block;clear: both;content: "";}</style>
</head>
<body><div id="father"><div class="left">浮动1</div><div class="left">浮动2</div><div class="left">浮动3</div><div class="left">浮动4</div><div class="clearfix"></div></div>
</body>
</html>

定位

安照定位的方式，将盒子定在某一个位置。定位 = 定位模式 + 偏移量
1. 行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
2. 块级元素添加绝对定位或者相对定位，如果不给宽度和高度，默认大小是内容的大小

定位模式	是否脱标	移动位置
static静态定位	否	不能使用偏移量
relative相对定位	否	相对于自身位置移动
absolute绝对定位	是	带有定位的父级
fixed固定定位	是	浏览器可视区

偏移量

top:10px||bottom:10px||left:10px||right:10px

绝对定位

绝对定位是元素在移动的时候，相对于它祖先元素来说。

position:absolute

如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准
如果祖先元素由定位（相对，绝对，固定），则以最近一级的有定位祖先为基准
绝对定位不占原先的位置，即脱离文档流
子绝父相口诀：

子元素使用绝对定位，父元素要使用相对定位。

由于子元素为绝对定位，所以父元素需要定位来限制子元素在父元素内移动。
父盒子布局时，需要占用原来的位置，如果不占用原来的位置，可能会影响其他元素的分布，所以需要使用占文档流的相对定位。

固定定位

固定元素在浏览器可视区的位置。

 position:fixed

以浏览器的可视区窗口为参照
与父元素无任何关系
不随滚动条移动
不占有原来位置

爬虫基础培训

1、Requests库

1.1 Robots协议

Robots Exclusion Standard 网络爬虫排除标准
作用：网站告知网络爬虫哪些页面可以抓取，哪些不行
形式：在网站根目录下的robots.txt文件（网页url后加/robots.txt即可查看）

1.2 requests.request()

requests.request(method,url,**kwargs):构造一个请求,返回一个Response对象。

参数讲解：
method：7种请求方式:‘GET’,‘HEAD’,‘POST’,‘PUT’,‘PATCH’,‘DELETE’,‘OPTIONS’
**kwargs:13个控制访问的参数，均为可选项：
1、params：字典或字节序列；作为参数增加到url中
2、data：字典、字节或文件对象；作为Request的内容
3、headers：字典；HTTP定制头
4、timeout：数值；设定超时时间，单位为秒
5、verify：True/False，默认为True；认证SSL证书开关

Response对象的属性:
1、status_code：获取状态码；正常为200，404或其他为出错
2、encoding:从HTTP的header中猜测的响应内容编码格式，若header中不存在charset，则认为编码是ISO-8859-1
3、apparent_encoding：从内容中分析出的响应内容编码方式（备选编码方式），该方式一般更准确
4、text：将HTTP响应内容以字符串形式返回，会自动根据响应头部的字符编码进行解码
5、content：HTTP响应内容的二进制形式

1.3 Requests库的常见异常

1、requests.ConnectionError：网络连接异常
2、requests.HTTPError：HTTP错误异常
3、requests.URLRequired：URL缺失异常
4、requests.TooManyRedirects：请求超过了设定的最大重定向次数
5、requests.ConnectTimeout：连接远程服务器超时
6、requests.Timeout：请求URL超时

Response对象检查状态码是否正常的方法：
r.raise_for_status():若状态码不是200，产生HTTPError异常。

1.4 requests.get()

requests.get(url,params=None,**kwargs):获取HTML网页；返回一个Response对象

实践部分：
1、迫害百度1（爬取网页的通用代码框架）
“http://www.baidu.com”

2、向京东提交关键字
“https://search.jd.com/Search”

3、Amazon商品爬取
“https://www.amazon.cn/dp/B079BG11X2/ref=sr_1_9?__mk_zh_CN=%E4%BA%9A%E9%A9%AC%E9%80%8A%E7%BD%91%E7%AB%99&keywords=Python&qid=1574924345&sr=8-9”

4、网络图片的爬取
“http://www.005.tv/uploads/allimg/161203/2004152519-2.jpg”

1.5 其它方法

requests.head(url,**kwargs)：获取HTML网页头的信息方法
requests.post(url,data=None,json=None,**kwargs)：向HTML网页提交POST请求方法
requests.put(url,data=None,**kwargs)：向HTML网页提交PUT请求的方法
requests.patch(url,data=None,**kwargs)：向HTML网页提交局部修改请求
requests.delete(url,**kwargs)：向HTML页面提交删除请求

2、Beautiful Soup库

2.1 解析HTML信息

用BeautifulSoup库解析html信息：

from bs4 import BeautifulSoup
soup=BeautifulSoup('<p>data</p>','html.parser')

实践部分：迫害百度2
“https://www.baidu.com/”

BeautifulSoup类的基本元素：
.tag：标签，最基本的信息组织单元
.name：标签的名字
.attrs：标签的属性；字典形式
.string：标签内非属性字符串(只适用tag包含单个子节点)
.text：标签内非属性字符串（tag包含多个子节点）

实践部分：“http://python123.io/ws/demo.html”

2.2 find_all和find方法

.find_all(name,attrs,recursive,string,**kwargs)：返回一个列表，存储查找的结果
参数讲解：
name:对标签名称的检索字符串
attrs：对标签属性值的检索字符串，可标注属性检索
recursive：是否对子孙所有节点搜索，默认为True
string：对标签内非属性字符串区域的检索字符串

.find()：搜索且只返回一个结果，类型为字符串（参数同find_all方法）

3、Re库

3.1 正则表达式

正则表达式：其语法由字符和操作符构成

常用操作符：
1、".“表示任何单个字符
2、”[]“表示字符集，对单个字符给出取值范围；如[abc]表示a、b、c
3、”*“前一个字符0次或无限次扩展；abc*表示ab，abc，abcc，…
4、”\d"表示数字，等价于[0-9]
5、"\w"表示单词字符，等价于[A-Za-z0-9_]

实践部分：“https://www.osgeo.cn/app/sb207”

3.2 Re库

re库采用raw string类型（指不包含转义符的字符串）表示正则表达式，表示为r’text’。

常用函数：
1、re.search:在一个字符串中搜索匹配正则表达式的第一个位置，返回match对象
2、re.match：从一个字符串的开始位置起匹配正则表达式，返回match对象；若开始位置不匹配，返回空match对象
3、re.findall：搜索字符串，以列表类型返回全部能匹配的字符串

Re库的match对象：
常用属性：
.string:待匹配文本
.re:匹配使用的正则表达式
常用方法:
.group(0):获得匹配后的字符串
.start():匹配字符串在原始字符串的开始位置
.end():匹配字符串在原始字符串的结束位置

实践部分：梨视频爬取
“https://www.pearvideo.com/video_1625572”

简单的实战（Requests库）

LOL官网全英雄皮肤图片爬取（仿照《20行Python代码爬取王者荣耀全英雄皮肤》）

import requests
import osdef getHerolist():url="https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js"#获取英雄列表的json文件herolist=requests.get(url)#解析序列化为json格式的数据herolist_json=herolist.json()#提取英雄的名字hero_name=list(map(lambda x:x['name'],herolist_json['hero']))#提取英雄的编号hero_number=list(map(lambda x:x['heroId'],herolist_json['hero']))return hero_name,hero_numberdef downloadPic():#获取英雄列表的信息hero_name,hero_number=getHerolist()i=0for j in hero_number:#创建文件夹os.mkdir("D:\\LOL_skin\\"+hero_name[i])#进入创建好的文件夹os.chdir("D:\\LOL_skin\\"+hero_name[i])for k in range(30):#拼接urlif k<10:onehero_link="https://game.gtimg.cn/images/lol/act/img/skin/big"+str(j)+'00'+str(k)+'.jpg'else:onehero_link="https://game.gtimg.cn/images/lol/act/img/skin/big"+str(j)+'0'+str(k)+'.jpg'#请求urlim=requests.get(onehero_link)if im.status_code==200:#写入文件with open(str(k)+'.jpg','wb') as f:f.write(im.content)print(hero_name[i]+"的图片已下载完毕")i+=1downloadPic()

参考链接：https://blog.csdn.net/qq_42453117/article/details/103190981

计算机项目部第四次培训——网页与爬虫初探

文章目录

网页初探

HTML简介

HTML标签

head标签

h1标签

p标签

a标签

button标签

img标签

input标签

table标签

ul标签

ol标签

form标签

HTML属性

HTML块

HTML布局

HTML布局

传统网页布局方式

布局本质

css盒子模型

边框(border)

内边距(padding)

外边距(margin)

浮动(float)

清除浮动

定位

绝对定位

固定定位

爬虫基础培训

1、Requests库

1.1 Robots协议

1.2 requests.request()

1.3 Requests库的常见异常

1.4 requests.get()

1.5 其它方法

2、Beautiful Soup库

2.1 解析HTML信息

2.2 find_all和find方法

3、Re库

3.1 正则表达式

3.2 Re库

简单的实战（Requests库）

高德地图 步行路线规划 Walking

2022年元宵节放假吗，2022年元宵节放假安排

最新文章

对齐接口也能用，苹果 M4 iPad Pro 可兼容旧款妙控键盘

赞助商推荐

标签

关注我们 么么哒！

关注我们的公众号

高德地图步行路线规划 Walking

关注我们么么哒！