看懂 HTML，会用开发者工具

前言

前两章，咱们已经能把网页取回来，也知道怎么判断取得对不对了。可打印 response.text 一看，满屏都是尖括号，书名和价格就夹在里面，眼睛都找花了。

怎么从这一大段文字里，把想要的数据挑出来呢？这就是爬虫的第二步：解析。要从网页里挑出数据，先得看懂网页是怎么写的。

网页是用 HTML 写的。各位童鞋不用把 HTML 学成网页设计师，只要能看懂它的结构，知道「书名在哪个标签里、价格在哪个标签里」，就够写爬虫了。

那么，怎么看清网页的结构呢？最好的帮手，是浏览器自带的开发者工具。它能把网页拆成一层一层的标签，鼠标指到哪儿，就告诉你那块内容对应的是哪段 HTML。

结构看懂了，还得动手把数据取出来。这一章会先用最笨的办法，拿字符串的 find() 和切片，从网页里抠出一个书名。抠完你就会明白，为什么下一章要请出专门的解析工具。

学这一章之前，需要先学完爬虫课第 2 章，会取回网页、检查状态码；还要熟悉基础课第 3 章讲的切片。用到的 find() 、split() 这两个字符串方法，第五节会边用边讲。

这一章会学到：

一、HTML 长什么样——标签、属性和文字

二、标签套标签——一棵树

三、浏览器的开发者工具——鼠标指到哪儿，就看到哪段 HTML

四、用 CSS 选择器描述位置——给每块内容一个「地址」

五、用字符串方法硬抠一个书名——体会一下有多麻烦

六、常见坑

七、自己查一次文档——详情页的表格是怎么写的

八、小结与回看

学完这一章，你能看懂网页的结构，用开发者工具找到数据所在的位置，并用选择器把位置描述出来。

一、HTML 长什么样

要看懂网页，先得看看它到底长什么样。整个网页太长，咱们先从两点书店的列表页里，截出一本书的 HTML 来看看：

import requests

html = requests.get('https://learn-py.org/lab/bookstore/').text
start = html.find('<article')
end = html.find('</article>') + len('</article>')
print(html[start:end])

输出的结果：

<article class="book-card" data-id="1">
  <h3 class="title"><a href="/lab/bookstore/books/1/">轻松玩转自动化</a></h3>
  <p class="author">陈星河</p>
  <p class="category">编程</p>
  <p class="price">¥104.40</p>
  <p class="rating">★★★★★</p>
  <p class="stock">有货</p>
</article>

截取用的是字符串的 find() ：先找到开头和结尾的位置，再用切片截出来。这个办法第五节会细说，这里先看截出来的结果。

这就是一本书在网页里的样子。乍一看有点乱，其实 HTML 只由三样东西组成：

标签：尖括号括起来的部分，比如 <p> 和 </p> 。大多数标签成对出现，<p> 是开始，</p> 是结束，中间夹着的就是这个标签的内容。标签的名字说明它是什么：p 是段落，h3 是三级标题，a 是链接，article 是一块独立的内容。
属性：写在开始标签里的 名字="值" ，比如 class="price" 、href="/lab/bookstore/books/1/" 。class 给标签分类，网页靠它决定样子；href 是链接指向的地址；data-id 是网站自己加的，记着这本书的编号。
文字：夹在标签中间的内容，比如 轻松玩转自动化 、¥104.40 。咱们要的数据，大多就在这里。

这三样东西里，对写爬虫最有用的，是属性里的 class 。为什么这么说呢？因为网站为了让每本书的价格都显示成红色，会给它们加上同一个 class="price" 。对爬虫来说，这就像一个现成的路标：找到所有 class="price" 的标签，就找到了所有的价格。

下面先做一道练习，借着这样的路标，数一数一页里有几本书、其中几本缺货。

看懂 HTML，会用开发者工具

前言

目录

一、HTML 长什么样

学习目录