动手学爬虫(1)：从熟悉网页结构开始
2016-05-12 本文已影响452人
废柴社
爬虫第一课：熟悉网页！
1.认识网页
简单来说，网页由三种元素组成：一是html结构：即哪个区域放置哪些内容；二是css样式：即每个区域显示成什么样子；三是script语句(这部分可能和网页内的内容调度有关，暂时不太熟悉)。
要做爬虫，熟悉网页的html结构是十分必要的。
作业.png
上图中的<div></div>,<li></li>等部分即是html中的区域、列表等结构。
2.模仿写一个网页
模仿目标如下图：
目标作业.png
由于主体直接引用了老师提供的css样式，此部分只需把html结构、填充的内容写清楚即可，完成代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The blah</title>
<link rel="stylesheet" type = "text/css" href = "homework.css">
</head>
<body>
<div class="header">
<img src= "images/blah.png" >
<ul class="nav">
<li><a href="##">Home</a></li>
<li><a href="www.baidu.com">Site</a></li>
<li><a href="##">Other</a></li>
</ul>
</div>
<div class="main-content">
<h2>The Beach</h2>
<hr />
<ul class="photos">
<li>
<img src="images/0001.jpg" width="150" height="150">
</li>
<li>
<img src="images/0002.jpg" width="150" height="150">
</li>
<li>
<img src="images/0003.jpg" width="150" height="150">
</li>
</ul>
<li>
Donald Trump's tax plan:
1. Cut taxes for the wealthiest Americans
2. Saddle the rest of the country with the debt
</li>
</div>
<div class="footer">
<p>©feichaishe</p>
</div>
</body>
</html>
最终效果与目标网页一致：
作业结果.png
3.总结
写网页和写爬虫是两个互逆的过程：写一个简单的网页有助于理解网页的结构分布，理解我们平时所见的网页是如何生成的，也就知道我们想要爬取的内容处于网页中的什么位置。
