Python爬虫笔记 | HTML基础
使用python版本：3.7.0 64-bit
如果把HTML的学习依序分为三个层次的话，应该是读懂、修改、编写。
读懂： 只有读懂了HTML，我们才能看得懂网页结构，才有可能运用Python的其他模块去解析数据和提取数据。所以想写爬虫程序的话，一定要先学好HTML基础。
修改： 在读懂HTML文档的基础上，学会修改HTML代码，是可以做些有趣的事情的。
编写： 如果达到了这个水平，那就可以去应聘前端工程师了，这是专业的程序员水平了。
HTML 基础
HTML称为超文本标记语言，是一种用来描述网页信息的标识性语言。
查看网页的HTML代码
用谷歌浏览器（Chrome）进行演示。
在网页任意地方点击鼠标右键，然后点击“显示网页源代码”。（Windows系统的电脑还可以使用快捷键ctrl+u来查看网页源代码），你会看到，浏览器弹出了一个新的标签页：
如图显示的就是HTML源代码。
这样查看的好处是，整个网页的源代码都完整地呈现在你面前。坏处是，在大部分情况下，它都会经过压缩，导致结构不够清晰，你不太容易懂每行代码的含义。而且，源代码和网页分开在两个页面展示。
所以更多时候，我们会用这样一种方法：
在网页的空白处点击右键，然后选择“检查”（快捷方式是ctrl+shift+i）。
这个即是 开发者工具栏：
上图中标亮的部分就是网页的HTML代码。
将鼠标放在HTML源代码上，你会发现，左边网页上有一些内容会被标亮。这其实就是这行代码所描述的网页内容，它们一左一右，相互对应。
HTML的层级
通过开发者工具栏，可以看出HTML会有鲜明的层级结构，以及互相对应的关系。
HTML的组成
标签和元素
最简单的HTML文档：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<p>我是一个段落啦。一级标题、二级标题和我，我们三个一起组成了body。
</p>
</body>
</html>
标签： 夹在尖括号<> 中间的字母。
标签通常是成对出现的：前面的是 开始标签，比如< body >；后面的是结束标签，如 < /body >。
元素： 开始标签+结束标签+中间的所有内容。如下：
<html>
<body>
<h1>我是一级标题</h1>
</body>
</html>
常见的HTML元素：
| 开始标签 | 元素内容 | 结束标签 | 用法 |
|---|---|---|---|
| < h1 > | 一级标题 | < /h1 > | 一级标题 |
| < h2 > | 二级标题 | < /h2 > | 二级标题 |
| < p > | 段落文本 | < /p > | 段落 |
| < a > | 描述链接的文本 | < /a > | 超链接 |
| < div > | 其它元素或文本 | < /div > | 块 |
HTML标签是可以嵌套标签的，而且可以多层嵌套。
网页头和网页体
HTML文档的基本是由 网页头 和 网页体 组成的：
<html>
<head>
网页头的具体内容
</head>
<body>
网页体的具体内容
</body>
</html>
HTML文档的最外层标签一定是< html >，里面嵌套着< head >元素与< body >元素。< head >元素代表了网页头，< body >元素代表了 网页体 ，这是最基本的网页结构。
HTML文档和网页的内容一定是一一对应的。只是网页头的内容不会被直接呈现在浏览器里的网页正文中，而网页体的内容是会直接显示在网页正文中的。
网页头：< head >元素
<head>
<meta charset="utf-8"> # 定义了HTML文档的字符编码
<title>我是网页的名字</title> # 定义网页的标题，这个标题就是显示在浏览器的标签页中的内容
</head>
网页体： < body >元素
<html>
<head>
<meta charset="utf-8">
<title>我要学python</title>
</head>
<body>
<h1>我要学python</h1>
<h3>百度百科解释</h3>
<h2>python是什么:</h2>
<p>Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。
</p>
</body>
</html>
HTML文档是由网页头和网页体组成的，网页头不显示在网页中。
而网页体中依次有四个内容：
< h1 >元素 代表一级标题，对应网页中的“我要学python”；
< h3 >元素 代表三级标题，对应网页中的“百度百科解释”；
< h2 >元素 代表二级标题，对应网页中的“python是什么:”；
< p >元素 对应网页中“Python是一种跨平台…的开发。”这一整段文本。
属性
HTML标签可以通过设置 属性 来为HTML元素描述更多的信息。如：文字颜色等。
style属性：规定元素的内行样式(inline style)
<h1 style="color:#20b2aa;">我要学python</h1>
属性通常都是在HTML元素的 开始标签 中设置的。
给< h1 >元素添加了一个style属性，属性中的内容规定了这行文字的颜色。
style属性 可以用来定义网页文本的样式，比如字体大小、颜色、间距、对齐方式等。
href属性：用来定义链接
<a href="https://blog.csdn.net/Microgoblins">我是一个链接，点我试试</a>
href属性用来在网页中 添加链接。
在HTML中，链接一般都由< a >标签定义，href属性用于规定指向页面的URL。
class属性：为html元素定义一个或多个类名(classname)
<html>
<head>
<meta charset="utf-8">
<title>我要学python</title>
<style>
.book {
float: left;
margin: 5px;
padding: 15px;
width: 350px;
height: 240px;
border: 3px solid #20b2aa;
}
</style>
</head>
<body>
<h1 style="color:#20b2aa;">我要学python</h1>
<h3>百度百科解释</h3>
<a href="https://blog.csdn.net/Microgoblins">点这里看看</a>
<div class="book">
<h2>python是什么:</h2>
<p>Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。
</p>
</div>
</body>
</html>
网页头中多了一个很长的
<style>
.book {
/*以下是.book的具体样式规定*/
float: left; /*控制元素浮动*/
margin: 5px; /*外边距为5像素*/
padding: 15px; /*内边距为15像素*/
width: 350px; /*宽度为350像素*/
height: 240px; /*高度为240像素*/
border: 3px solid #20b2aa; /*边框为3像素*/
}
</style>
< style >元素的内容，是对.book的具体描述，比如float: left;，而/* 控制元素浮动 */ 是对代码的注释。
其实这是一段对网页布局的描述。
在大括号内部写的就是一条条的样式规定。代码的注释中有每个具体样式的意思，如下图：
一个是网页头里的.book；一个是网页体里的< div class=“book”>。
其实 . 对应class，所以.book代表class book。因此，网页头中的 .book 和网页体中的class="book"是有联系的。
在网页头里面，定义了class属性，属性值为"book"，然后下面一长串代码是对这个class属性的描述；接着再在网页体中调用，所以看到了< div class=“book”>。
id属性：定义元素的唯一id
id属性 和 class属性 的用法类似，给元素定义id和class的目的都是为了查找、定位元素，或者为元素设置样式。
但 id属性用于标识唯一的元素，而class用于标识一系列的元素。
id就像是学生的学生证号码，每个人都是唯一的；而学生们可以属于同一个班级，班级就像class。
HTML的组成： 标签、元素、结构（网页头和网页体）、属性。
掌握这些知识后，可以通过阅读HTML文档，来对照理解网页。
熟能生巧，百战成神。