章节二：HTML基础
章节二：HTML基础
目录- 章节二：HTML基础
- 1. 爬虫，从网页开始
- 1.1 为什么要学习HTML？
- 1.2 什么是HTML
- 1.3 查看网页源码
- 2. HTML的组成
- 2.1 层级结构
- 2.2 标签
- 2.3 属性
- 2.4 属性：class&id
- 3. HTML分析
- 3.1 开发者工具
- 3.2 开发者彩蛋
- 3.3 修改网页
- 4. 实操一下
- 获取数据
- 5. 习题练习
- 1. 爬虫，从网页开始
1. 爬虫，从网页开始
1.1 为什么要学习HTML？
按道理来说，下面该学习爬虫的第1步： 数据解析了吧？
别急别急，心急爬不了热豆腐。在此之前，先来道送分题，我们要的数据藏哪里来着？
藏在网页当中，对吧。上一节课，老师提到，当我们在Chrome浏览器上，拿着url向服务器发出请求的时候，服务返回的是一个带有HTML文档的数据包，经过浏览器解析，网页才能在窗口上正常呈现。
哎？发现问题没，python可没有内置Chrome浏览器啊。
也就是说，我们在用python请求了远程服务器之后，拿到的内容，最常见的，会是一份原汁原味的HTML文档。
如果把HTML的学习依序分为三个层次的话，应该是读懂、修改、编写。
【读懂】：可以说，HTML是踏入爬虫世界的第一步，在这个的基础上，我们才有可能运用Python模块解析数据和提取数据。这一步，你会解锁打开网页的新姿势。比如找到B站首页的logo彩蛋。
【修改】：在读懂的基础上，学会修改HTML代码，可以做些有趣的事情的，比如修改我偶像在社交网站上的简介：
【编写】：如果技术达到了这个水平，那就可以去应聘初级前端工程师了。
当我们使用python拿到一份html文档后，毫无疑问，只有看懂且能对其进行简单分析，才能从中获取我们想要的信息。
所以，我们这一关的学习目标只要达到前两者，能够读懂、修改我们的学习网站这个书苑不太冷即可。
好，那马上开始今天的学习吧！
1.2 什么是HTML
HTML是用来描述网页的一种语言，英文全称是Hyper Text Markup Language，也叫超文本标记语言。
等等，你问什么是标记语言？
标记语言就是把文本和文本以外的相关信息（例如大小，高度，颜色，位置等）组合在一起的语言。
嗯...组合什么？怎么组合？
这几个问题会在接下来的课程中得到解答，现在请你带着这些疑惑，跟我到网页上一探究竟，上车！
1.3 查看网页源码
Talk is cheap,Show you the code. 话不多说，先验货。来看看漂亮的网页背后的HTML文档，请一步一步跟着我操作。
【注：下面我们的示范，会用谷歌浏览器（Chrome）进行演示】
随机打开一个网站，老师课堂上会用教学网站来演示，你也可以打开其他网站，诸如知乎、百度、淘宝等。
这个书苑不太冷：https://localprod.pandateacher.com/python-manuscript/crawler-html/spider-men5.0.html
在网页任意地方点击鼠标右键，然后点击“显示网页源代码”。（Windows系统的电脑还可以使用快捷键ctrl+u来查看网页源代码）
如果浏览器弹出了一个新的标签页，内容形式如下，那错不了，该网页是用HTML文档写的！
2. HTML的组成
看起来有点复杂？不怕，事实上，HTML文档在编程界是有名的软萌可推。不信？来看一份基础的HTML文档。
风变一下，你就学到
对，这个看上去很简单的程序就是整个HTML的基本架势，我们先熟悉一下它的格式，不用纠结代码具体的意思。
HTML文档主要由元素组成。
第一行是一个全局声明，目的是告诉浏览器，你现在处理的这个文档是HTML文档。
声明过后，迎来了HTML代码的主战场，一共有三组基本元素，分别是html元素（），head头元素（），和body主体元素（）。
它们成对出现，都带有尖括号（<>&），分别代表着元素的起点和终点。
最外层是(文档起点)（文档终点），它的作用是标记文档的起始位置和终止位置，从层级上来看，显然是老大，将（头部）和（主题）包裹了起来。
看到这里，你会发现，HTML文档就好像一个勾勒好头部和身体位置的人体。
当然，人生在世，只有简单的“轮廓”是不够的，需再勾画些“器官”，穿些漂亮衣服，学习一些行为动作，才不虚此行。html亦是如此，下面，让它展露下自己的一鳞半甲。
前面我们说，HTML文档可以容纳更加丰富的信息，于是，老师在原来的基础上撒点料，变成了这样（体验一下，不必细究具体某块代码的意思）：
风变一下，就能学到
事情似乎变得有趣起来了，粗略地阅读代码框架，大致能得到如下信息：
2.1 层级结构
HTML和python一样，【有缩进】，这缩进将文档之间的那点结构层级安排地明明白白。
以我们人体为例，每颗头，都有眼睛、耳朵、鼻子，嘴唇、头发（好像不一定？）。而每双眼睛，又由眼睫毛、眼皮、眼球等结构组成。
生活如斯，在数据的世界中，分层级的组织规则和作用会更加明显。
譬如，头部元素（）内，一般会被用来设置网页的编码，添加网页标签的小logo，小标题，外部文件引用（就好像python会用import引用别的模块）等。
其次，HTML文档的主体元素（）负责定义网页窗口内的所有内容，同时也是今后我们重点关注的对象。
在这里，主体元素（）的腹中只有一个div元素（），而div元素（）手下有两个“关节”：图片元素（），表单元素（）也有两节“骨头”，分别是input元素()和按钮元素()。
以上便是这份HTML文档的层级结构。
除了尖括号的英文外，似乎还暗藏着许多"赋值语句"（如width='200px'）。这和尖括号的英文字符或字母(
要捋清楚它们其实很容易，总结起来就两类东西：标签和属性，接下来我们会挨个讲解。
2.2 标签
标签用于标记文本信息，指用尖括号（<>和）括起来的字母和英文，形式有两种：闭合标签和空标签。
闭合标签，它们绝大多数成对出现（有开始标签<>,也有结束标签），如：是表单标签。
空标签，顾名思义，指那些“孤苦伶仃”的单标签，它们“形影单只”只有一个尖括号<>（斜杠/可省略），标签开始即结束，比如上面的，是链接标签，是input标签。
值得注意的是，不要把标签与我们前文讲的元素混淆了哦，前面我们说的元素，其实是包含了开始标签与结束标签内的所有代码。如html元素是指包括标签内的所有代码。
通过标签的英文名，我们大致能猜测出它的作用：给浏览器介绍文本的结构。你看里面我塞的是一张表单。
HTML文档含有许多标签，我们不必记住它们，了解几个常用的，混个脸熟即可，有兴趣的同学可以课后翻阅相关的文档（HTML标签）。
用标签给文本标记好了之后，浏览器开始发问了，年轻的程序员哟，你要的是这个金色的标题，还是这个银色的标题，还是这个五颜六色的标题？
想更加详细生动地描述乏味的标签，需要向标签注入点“形容词”，大的还是小的？长的还是高的？什么颜色？
总而言之，是要刻画元素的属性，给html的骨架增添点漂亮的“衣服”。（注意：HTML的属性和Python中的属性不是一个东西）。
2.3 属性
正式介绍属性之前，来玩一个“找茬”游戏吧！请你尝试寻找body元素（）内三条图片标签
提示：作用相当于python中的#，是HTML的注释方式。
来找茬
三个熊猫头大小各异，这其实是赋值语句width='xx'和height='xx'的功劳，width属性可以描述图片的宽。height属性能控制图片的高度，两相结合，图片的大小任人摆布。
除此之外，还有设置图片链接的src属性（src='xx'），alt属性可编辑当图片无法显示时的替代文本，它们的独有的特征是：都由赋值语句构成。
现在，相信你对属性和标签有了一定的认识，来检验一下学习成果吧~
这个书苑不太冷
吴枫喜欢的书:
属性的书写方式（赋值）让人一目了然，却也有一个致命的问题，若一个的元素具有多个属性（如大小、颜色、间距、对齐方式），结构就会变得十分冗杂，严重影响阅读体验，像这样：
这个书苑不太冷
倒是有个通用的style属性能把所有的样式以键值对的形式收集起来，像这样：
这个书苑不太冷
可是，这样“长篇累牍”的代码还是不够优雅。于是，集勤劳与智慧于一身的程序员一不做二不休，干脆将style属性样式全部抽离出来。
这个书苑不太冷
如此，分工明确，各司其职。标签只管增添文本内容，文本样式的控制权交给head元素的
h1 {}的内容，是h1元素样式的具体描述，比如text-align: center;，而/*控制元素对齐方式*/是对代码的注释。
好景不长，很快就有人就提出了质疑：这不是一刀切么，所有的h1元素都一个模样，倘若第二个h1元素想保持原有的样式可不就尴尬了？
为了解决这个问题，HTML文档诞生了两个最为特殊的元素：class和id。
2.4 属性：class&id
讲解它们的作用之前，我们再来思考一个场景：如果网页需要排版多张大小不同的图片，它们的属性应该怎么设置？
譬如上面这几张图片的排版，每行第一张图片宽度为100像素（width=100px），其余的图片的宽度为50像素（width=50px）。
直接设置img元素的样式，似乎有些不妥。那给每个logo的
怎么办？如果我们用的是python代码，遇到类似的事情会怎么做？
还记得类吗？在python中，可将相同的属性和方法的对象抽象成类，关键词是class。
在HTML文档中，我们也有一个关键词为class的属性，class属性值相同的元素可复用同一套样式。
经观察发现，上面的六张图片，可根据它们的宽度进行简单分类，宽度是100像素（width=100px）为一类，宽度为50像素（width=50px）是另一类。
