R爬虫必备基础——HTML和CSS初识

网页是构成网站的基本元素，网页又是由一些更基本的元素构成。想要网络爬虫或多或少还是需要一点简单的html网页基础，尤其是网页布局，因为我们一般需要逐步定位我们需要内容所属标签，最终获得所需要的内容。点击打开目标网页（建议用Google Chrome浏览器）->右键->查看网页源代码，如下图右侧，我们可以看到HTML文件就是各种标签、属性等构成而成的文件。

image

HTML的定义
功能——搭建出网页的基本框架，如房子的基本框架
HTML本身不是编程语言，而是一种描述内容并定义其表征（显示效果）的标记语言，全称为超文本标记语言 (Hyper Text Markup Language)，且该语言不区分大小写。它存在明显的树形结构，所有元素之间严格嵌套，即一对元素必须完全包含于另一对元素中。如下图，可以发现明显的树形结构，且具体很严谨的配对对称性。

image

不难发现，网页其实就是由各种标签、属性、内容等构成。HTML 标签是由尖括号包围的关键词，比如 。HTML 标签通常是成对出现的，比如 和 。成对标签中的第一个标签是开始标签（其中有时包含属性），第二个标签是结束标签，如

...

，开始标签

，属性id="header"，结束标签

。

image

HTML各种标签汇总图

image

举例说明：

• ：其中为终止标签，first HTML为内容，三者结合起来叫元素。
• href="http://www.r-datacollection.com/">Link to Homepage：其中="http://www.r-datacollection.com/">为起始标签，****为终止标签，由于标签主要是存放链接地址的，因此又叫链接标签。href为一种属性参数，这里属性取值为一个链接。
• <img src="w3school.jpg" width="104" height="142"><img />** ：**属性总是位于标签的内部，标签名的右侧；一个标签可以有多个属性，属性间用空格分开。src, width, height均为标签img的属性，使用空格隔开即可。
  备注：****了解HTML，有助于R爬虫过程中信息的抓取。当然不了解，其实也可以借助浏览器的查看功能，可直接帮助我们定位到想抓取的信息位置，如想要定位感兴趣的电影信息位置，在感兴趣信息的位置，右击--检查，然后弹出的源码会直接定位到相应信息。

image

CSS的定义
功能——搭建出网页的显示样式，如房子的装修
CSS 指的是层叠样式表 (Cascading Style Sheets)，定义如何显示 HTML 元素，如下图，右侧几位网页中某个字体的CSS样式，定义了字体的显示形式。

image

在爬虫过程中比较关注class这个属性，也叫做类属性。通过这个属性，我们能够根据一个标签的CSS样式很快的访问到这个标签。这属于CSS选择器的一部分，有兴趣的可以进一步了解，网址：https://www.w3school.com.cn/css/css_selector_type.asp

This heading is very important.



This paragraph is very important.

这个时候，p.important (.代表class)指的是匹配 class 属性包含 important 的所有 p 元素。这个用法在R爬虫中抓取信息时特别好用。在实际R爬虫中常用的就是这个类选择器。

最后，以上内容主要针对R爬虫所需要基础，想深入理解还是需要自行学习教程：https://www.w3school.com.cn/h.asp，写的非常详细。对于简单爬虫来说，初步了解HTML和CSS即可，HTML为主，CSS为辅。

image

往期回顾
R爬虫在工作中的一点妙用