多朋友都听说过Python的大名，而Python也拥有众多的爬虫框架，其中最简单的莫过于requests-html了。它和著名的网络请求库requests是同一个作者，着重于XML数据提取，可以说是最简单的爬虫框架了。

安装requests-html

安装这个类库非常简单，直接通过pip就可以安装了。

pip install requests-html

开始使用

requests-html用起来也十分简单，下面是一个简单例子。照例说明一下，第一段引入了HTMLSession用于创建连接，获取网页数据。第二段创建连接，获取了我的简书用户页面。第三段用xpath语法获取了网页上的用户名，最后打印出来。

from requests_html import HTMLSession

session = HTMLSession()
response = session.get(
    'https://www.jianshu.com/u/7753478e1554')

username = response.html.xpath(
    '//a[@class="name"]/text()', first=True)


print(username)

看起来是不是很简单？没错，确实很简单，接下来还有一些更加有趣的功能。

分析网页

编写爬虫之前还要做一件事情，就是分析网页的结构。这个工作其实也很简单，打开你要访问的网页，按F12打开开发人员工具，可以看到最左边有这么一个按钮。点击这个按钮，然后点击网页上你想要查看的网页元素，然后你就可以发现这个元素对应的相关源代码已经为你定位完毕了。

通过这个功能，我们就可以轻松的分析网页，然后通过它的结构来编写爬虫了。

提取数据

上面的response.html即是网页的根节点HTML节点，在节点对象上可以调用一些方法来检索数据。最常用的方法是find方法，它通过CSS选择器来定位数据。对于上面的例子，可以用find方法改写第三段。

因为所有查找方法返回的结果都是列表，所以如果你确定只需要查找一个，就将first参数设为真来只返回第一个结果。find方法返回的仍然是一个节点，如果只需要节点的内容，调用其text属性即可。

用户名对应的HTML结构如图所示。

代码如下。

username = response.html.find('a.name', first=True).text

除了find方法之外，还可以使用xpath方法用xpath语法来查找节点，正如第一个例子那样。我个人比较喜欢xpath语法，CSS选择器虽然更加流行一些，但是写出来的效果有点怪，不如xpath工整。

同样是这个页面，看看如何获取我的简书的个人简介。网页代码如图所示。

代码如下。

description = response.html.xpath(
    '//div[@class="description"]/div[@class="js-intro"]/text()', first=True)

CSS选择器和XPATH语法都不是本篇的主要内容，如果你这方面不太熟悉，最好去看一下相关的教程。当然如果大家有什么疑问的话，也可以提出来。假如大家想看的话，我也可以专门写一篇文章介绍一下这些语法知识。

渲染网页

有些网页利用了前后端分离技术开发的，需要浏览器渲染才能完整显示。如果用爬虫去看的话，只能显示一部分内容。这时候就需要浏览器渲染页面，才能获取完整的页面。用requests-html的话，这个过程非常简单。

首先先来看看一个需要渲染网页的例子。下面的代码访问了我的简书用户页面，然后尝试获取我的所有文章。但是如果你运行这个例子的话，就会发现只能获取前几项。因为简书的页面正是一个典型的需要浏览器渲染的页面，爬虫获取到的网页是不完整的。

from requests_html import HTMLSession

session = HTMLSession()
headers = {
    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.119 Safari/537.36'
}

url = 'https://www.jianshu.com/u/7753478e1554'
r = session.get(url, headers=headers)

for a in r.html.xpath('//ul[@class="note-list"]/li/div[@class="content"]/a[@class="title"]'):
    title = a.text
    link = f'https://www.jianshu.com{a.attrs["href"]}'
    print(f'《{title}》,{link}')

那么如何渲染网页来获取完整的结果呢？其实非常简单，在查询HTML节点之前，调用render函数即可。

原理也非常简单，第一次调用render的时候，requests-html会在本地下载一个chromium浏览器，用它来渲染网页。如此一来，我们就可以获取到渲染之后的页面了。

但是对于简书这个例子来说还是有些问题，因为如果你在浏览器里打开这个网页的话，会发现一些文章在浏览器下滑页面的时候才开始渲染。不过聪慧的作者早就考虑到这种情况了，render函数支持下滑的参数，设定之后，就会模拟浏览器下滑操作，从而解决了这个问题。

r.html.render(scrolldown=50, sleep=0.2)

节点对象

不论上面的r.html还是find/xpath函数返回的结果，它们都是节点对象。除了上面介绍的几个提取数据的方法以外，节点对象还有以下一些属性，在我们提取数据的时候也有很大作用。

相较于专业的爬虫框架scrapy，或者仅用于解析XML的解析库BeautifulSoup。requests-html可以是说恰到好处，它没有前者那么难学，也不像后者还需要搭配HTTP请求库才能使用。如果你手头需要临时抓取几个网页，那么requests-html就是你最好的选择。

为一名前端工程师，我们会经常使用到CSS去实现一些网页样式或动画效果。

但是有一些动画效果往往又会比想象中的难实现。比如UI做了一些炫酷的触控动画，看起来很漂亮，但是作为前端开发的我，看到就头大。

上周公司的一个项目要实现一个需求：鼠标移动到按钮上，按钮的颜色自动改变。

我一想，这还不简单？直接使用 :hover 来实现了这个效果，嘿~小小需求，拿捏！

然后产品说，这个效果太硬了！

我寻思着，这动画该咋做呢？我想到了直接用git来实现，但是加载太慢了，会影响性能。

哦对了！CSS好像还可以制作动画呢！

但是具体怎么实现呢？

可能也是自己也对CSS的 transition 属性不够了解，然后我就在GitHub上浏览了很多，其中有一个题目吸引了我，：CSS Animation 。

这上面会不会有我需要的那种效果啊，于是抱着试一试的心态就点进去了。

点开来后就是看到目录，然后我就慢慢的往下滑去寻找自己需要的关于tranform的案例。

滑到下面的时候发现他的目录里面有一个特别符合我需求的案例，这是一个比较复杂的hover效果。

于是我就跟着操作：

1、使用 CSS 中的 transform 来实现上面的显示和隐藏。对 twitter icon 进行绝对定位，设置其 left 和 top

    .icon {      position: absolute;      left: 0.75em;      top: 0.75em;    }

2、鼠标悬停时添加 transform 属性将其移出 button。在外层的容器上添加overflow: hidden 就可以将 twitter icon 隐藏了。

    a:hover .icon {      transform: translateY(3em);    }

3、如果不添加 transition，元素就会突然消失，效果并不好。在这个例子里，button 里的元素都是 span，所以可以写一条 transition 然后应用到所有的 span 上。span 的状态发生变化时都会使用这条 transition。

    span {      transition: transform 0.4s cubic-bezier(0.72, -0.61, 0.25, 1.51);    }

原来如此，这个transform 还能这样使用！

做完这个项目后，我又重新看了好几遍这个CSS animation开源项目，这个CSS动画指南不仅介绍如何制作复杂的动效还有丰富的示例，教会你如何将 CSS 动画应用到你的项目中。在整个过程中，我觉得自己非常轻松的就完成了这个原本让我感到很难的CSS动画。

目前我的项目也完成了，我还是会多去看看，因为它真的很全面，也很详细，我也会跟我一起做前端的同事去分享这款开源项目。

大家有发现相似的产品，也别忘了我，大家一起发现更多能够帮助我们提高工作效率的产品。