爬蟲第一課：熟悉網(wǎng)頁！
1.認(rèn)識(shí)網(wǎng)頁
簡(jiǎn)單來說，網(wǎng)頁由三種元素組成：一是html結(jié)構(gòu)：即哪個(gè)區(qū)域放置哪些內(nèi)容；二是css樣式：即每個(gè)區(qū)域顯示成什么樣子；三是script語句(這部分可能和網(wǎng)頁內(nèi)的內(nèi)容調(diào)度有關(guān)，暫時(shí)不太熟悉)。
要做爬蟲，熟悉網(wǎng)頁的html結(jié)構(gòu)是十分必要的。
作業(yè).png
上圖中的<div></div>,<li></li>等部分即是html中的區(qū)域、列表等結(jié)構(gòu)。
2.模仿寫一個(gè)網(wǎng)頁
模仿目標(biāo)如下圖：
目標(biāo)作業(yè).png
由于主體直接引用了老師提供的css樣式，此部分只需把html結(jié)構(gòu)、填充的內(nèi)容寫清楚即可，完成代碼如下：
<!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>
最終效果與目標(biāo)網(wǎng)頁一致：
作業(yè)結(jié)果.png
3.總結(jié)
寫網(wǎng)頁和寫爬蟲是兩個(gè)互逆的過程：寫一個(gè)簡(jiǎn)單的網(wǎng)頁有助于理解網(wǎng)頁的結(jié)構(gòu)分布，理解我們平時(shí)所見的網(wǎng)頁是如何生成的，也就知道我們想要爬取的內(nèi)容處于網(wǎng)頁中的什么位置。
