一、关于HTML语言
1. 关于HTML语言学习的三个层次
【读懂】：只有读懂了HTML，我们才能看得懂网页结构，才有可能运用Python的其他模块去解析数据和提取数据。所以想写爬虫程序的话，一定要先学好HTML基础。
【修改】：在读懂HTML文档的基础上，学会修改HTML代码。
【编写】：如果达到了这个水平，那就可以去应聘前端工程师了，这是专业的程序员水平了。
2. 什么是HTML语言呢？
HTML（Hyper Text Markup Language）是用来描述网页的一种语言，叫超文本标记语言 。
打个比方就更好理解了，HTML之于网页就好比建筑图纸之于建筑：
建筑图纸是建筑师设计房子时使用的语言，工匠会根据图纸内容，修建出它所描述的房子。
而HTML文档就是前端工程师设计网页时使用的语言，浏览器会根据HTML文档的描述，解析出它所描述的网页。
二、读懂HTML语言
1. 如何查看网页的源代码？
1）在网页任意地方点击鼠标右键，然后点击“显示网页源代码”。（Windows系统的电脑还可以使用快捷键ctrl+u来查看网页源代码）
2） 在网页的空白处点击右键，然后选择“检查”（或“审查元素”）（快捷方式是ctrl+shift+i）
3）HTML的组成：标签、元素、结构（网页头和网页体）、属性。
2. HTML的层级关系：
HTML源代码中有一些小三角形，每一个三角形都可以展开或合上。尖角向下代表展开，向右代表合上了，这就是HTML的层级关系。
每一个可以展开和合上的小三角形里包含的内容，都是一个层级，它很像电脑中一层一层的文件夹。
3. HTML的标签：
在HTML文档中，可以看到很多夹在尖括号<>中间的字母，它们叫做【标签】。
标签通常是成对出现的：前面的是【开始标签】；后面的是【结束标签】。
比如：<body> </body>
不过，也有标签是形单影只地出现，比如HTML代码的第四行（定义网页编码格式为 utf-8）。
注意一下：HTML标签是可以嵌套标签的，而且可以多层嵌套；这就像是在电脑中，一个硬盘可以包含数个文件夹，文件夹中还可以嵌套文件夹。
4. HTML元素：开始标签+结束标签+中间的所有内容，它们在一起就组成了【元素】
5. HTML的基本结构：HTML文档的最外层标签一定是<html>，里面嵌套着<head>元素与<body>元素。<head>元素代表了【网页头】，<body>元素代表了【网页体】，这是最基本的网页结构。
1）<head>和我</head>之间是网页头，即窗口标题栏显示的内容。
<head> #网页头
<metacharset="utf-8"># 定义了网页的字符编码方式
<title>我是网页的名字</title># 网页的标题
</head>
2）<body>和</body>之间是网页体，就是那些你能看到的显示在网页中的内容。
6. 属性：HTML标签可以通过设置【属性】来为HTML元素描述更多的信息。例如：
#下面这行代码给<h1>元素添加了一个style属性，属性中的内容规定了这行文字的颜色。
<h1style="color:#20b2aa;">扬航机器人</h1>
1）style属性可以用来定义网页文本的样式，比如字体大小、颜色、间距、对齐方式等等。
<style>
.book{
/*以下是.book的具体样式规定*/
float:left;/*控制元素浮动*/
margin:5px;/*外边距为5像素*/
padding:15px;/*内边距为15像素*/
width:350px;/*宽度为350像素*/
height:240px;/*高度为240像素*/
border:3px solid #20b2aa;/*边框为3像素*/
}
</style>
2）href属性的用法——添加链接。
<a href="https://wordpress-edu-3autumn.localprod.oc.forchange.cn/">我是一个链接，点我试试</a>
3) class属性：
<html>
<head>
<meta charset="utf-8">
<title>这个书苑不太冷3.0</title>
<style>
#在网页头里面，定义了class属性，属性值为"book"，然后下面一长串代码是对这个class属性的描述；
.book {
float: left;
margin: 5px;
padding: 15px;
width: 350px;
height: 240px;
border: 3px solid #20b2aa;
}
</style>
</head>
<body>
<h1 style="color:#20b2aa;">这个书苑不太冷</h1>
<h3>吴枫喜欢的书:</h3>
<a href="https://wordpress-edu-3autumn.localprod.oc.forchange.cn/">点这里看看</a>
<div class="book"> # 在网页体中调用，所以看到了<div class="book">
<h2>《奇点遗民》</h2>
<p>本书精选收录了刘宇昆的科幻佳作共22篇。《奇点遗民》融入了科幻艺术吸引人的几大元素：数字化生命、影像化记忆、人工智能、外星访客……刘宇昆的独特之处在于，他写的不是科幻探险或英雄奇幻，而是数据时代里每个人的生活和情感变化。透过这本书，我们看到的不仅是未来还有当下。
</p>
</div>
</body>
</html>
网页头的<style>元素中定义了.book的样式，因此，凡是class="book"的元素都会继承它的样式。
假如你看到<div class="book"> 在源代码中出现了三次，与此对应，网页中也有三个一样的块。
4) 定义id属性：id属性和class属性的用法类似，给元素定义id和class的目的都是为了查找、定位元素，或者为元素设置样式。
但id属性用于标识唯一的元素，而class用于标识一系列的元素。
id就像是学生的学生证号码，每个人都是唯一的；而学生们可以属于同一个班级，班级就像class。
三、HTML的网页结构
1. 网页结构：
一般网页体有三大部分，<div id="header">元素的部分，<div id="article">元素的部分，和<div id="footer">元素的部分。
2. 修改网页：
你做的修改只是在你本地的修改，而服务器上的源文件你是修改不了的，所以，这些改动仅供你自娱自乐。而程序员们会使用这个方法，在开发者工具这里，调试HTML代码。
3. 用Python获取网页源代码：
import requests #调用requests库
res=requests.get('https://localprod.pandateacher.com/python-manuscript/crawler-html/spider-men5.0.html') #获取网页源代码，得到的res是Response对象
html=res.text #把res的内容以字符串的形式返回
print('响应状态码:',res.status_code) #检查请求是否正确响应
print(html) #打印网页源代码
四、本节回顾
1） 什么是HTML语言？
2） 区分HTML语言中的标签、元素和属性？
3）如何查看网页的HTML语言？
4） 是否能够读懂HTML语言，并做一些修改？
