Intro to Web Scraping

網路爬蟲：利用程式自動網站收集數據資料的方法，可以利用Python抓取網頁的HTML代碼並從中找出所需的資料。 Python 並不是唯一一種進行網路爬蟲的編程語言，也可以使用 Java 或 JavaScript 來編寫。 但是Python語法是最容易學習和最快編寫的，所以 Python 是最流行的網絡爬蟲語言！

網路爬蟲須知： 1.進行資料抓取時要獲得網頁的許可 2.太過頻繁或太多次的請求可能會導致IP地址被封鎖 3.有些網站會有阻擋爬蟲的方式 4.每個網站都有不同的HTML代碼，所以想對不同網站進行爬蟲都需要編寫專屬的代碼 5,當網站有改版的時候如果HTML代碼有變更這時需要對Python代碼進行變更

HTTP HTTPS

HTTP(Hypertext Transfer Protocol) 代表超文本(字)傳輸協議，這是規範了在Internet 上傳輸數據(客戶端請求 及 伺服器回應)的標準。

HTTPS(Hypertext Transfer Protocol Secure)代表超文本傳輸安全協議，其中的S代表安全(Secure)，所有數據均採用RSA算法加密； 因此，您的私人信息，例如銀行帳號，在數據傳輸過程中不會被黑客入侵。

當我們訪問 URL https://www.youtube.com 時，我們會向 YouTube 的服務器發送一個 HTTP 請求。 YouTube 的服務器收到我們的 HTTP 請求，它會發送一個 HTTP 響應，其中包括 HTML 代碼。 我們的瀏覽器接收 HTTP 響應，解析來自 YouTube 的 HTML 代碼，並將其很好地顯示在我們的屏幕上。

python_143-1.jpg

python_143-2.jpg

python_143-3.jpg

HTML Basics

HTML（Hypertext Markup Language超文本標記語言）是 Web 最基本的構建塊，用來定義了網頁內容的含義和結構，使用“標記”來註釋文本、圖像和其他內容。 每個 HTML 頁面由兩部分組成——頭部和主體； 這稱為 HTML 骨架。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>	
</body>
</html>

可以看到HTML 骨架基本上是： <!DOCTYPE html> <html> <head></head> <body></body> </html>

<!DOCTYPE html> 代表文檔類型，聲明這是一個html文檔

<html> </html>標籤代表 HTML 文檔的根，整個網頁的資訊會包在這裏面。

<head> </head>標籤代表頭部，包含網頁相關的訊息如標題、數據設定、樣式和等，常見的有： <meta> 表示 HTML 文件的 metadata，通常用於指定字符集 (character set)、網頁描述 (page description)、關鍵字 (keywords)、文件作者以及設定可視區 (viewport)等 <title> 文件的標題，會出現在瀏覽器的標題欄或加入我的最愛時的名稱 <style> 在 <style> 內書寫 CSS 樣式，CSS 樣式會套用在 HTML 標籤 <link> 定義了這份文件與外部資源的關係，常用於引入外部 CSS 文件檔案 <script> 在 <script> 內直接書寫 JavaScript 程式碼，或是通過 src 屬性載入外部 JavaScript 檔案。

<body> </body>標籤代表主體，網頁中所以看的到的內容都在這邊。

HTML中常用的標籤(tag)有： 標題：<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 段落：<p> 無序列表：<ul> 有序列表：<ol> 列表：<li>，在 <ul>、<ol> 內部使用 表格：<table> 表格行(table row)：<tr> 表格標題(table heading)：<th> 表格內容(table data)：<td>

標籤樣式： 1.<起始標籤(starting tag)>文字內容<結束標籤(closing tag)>，大多是標籤都是這樣的 ex. <p>這是段落</p> 起始標籤(starting tag)為：<p> 文字內容為：這是段落 結束標籤(closing tag)為：</p> 2.自閉合標籤(self-closing tags)：只有起始標籤沒有結束標籤 ex.<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" >

在使用一些標籤時可以給標籤屬性，屬性只能出現在起始標籤(opening tag)或自閉合標籤(self-closing tags)中

<a href=“...”> 標籤定義了一個超鏈接，用於從一個頁面鏈接到另一個頁面。 <a> 代表錨點。 <img src="..."> 定義頁面上的圖像。src 代表來源。 <input type=“…”> 定義一個區域來接受用戶輸入。 不同類型的輸入在網頁中看起來非常不同。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>h1標籤_這是H1標題標籤</h1>
	<h2>h2標籤_這是H2標題標籤</h2>
	<h3>h3標籤_這是H3標題標籤</h3>
	<h4>h4標籤_這是H4標題標籤</h4>
	<h5>h5標籤_這是H5標題標籤</h5>
	<h6>h6標籤_這是H6標題標籤</h6>

	<p>p標籤_這是段落標籤</p>

	<div>div標籤_這是一個獨立區塊</div>

	<span>span標籤_這是一個獨立區塊(可用在段落內)</span>

	<p >ol,li標籤_以下是有序列表</p>
	<ol>
		<li>有序列表中第一行li</li>
		<li>有序列表中第二行li</li>
	</ol>

	<p>ul,li標籤_以下是無序列表</p>
	<ul>
		<li>無序列表中第一行li</li>
		<li>無序列表中第二行li</li>
	</ul>

	<p>table,tr,th,td標籤_以下是表格</p>
	<table>
		<tr>
			<th>姓名</th>
			<th>年齡</th>
		</tr>
		<tr>
			<td>小明</td>
			<td>13</td>
		</tr>
	</table>

	<p>type標籤_輸入文字</p><input type="text">
	<p>type標籤_輸入數字</p><input type="number">
	<p>type標籤_輸入密碼</p><input type="password">

	<p>a標籤_超連結</p>
	<a href="<https://www.google.com.tw/>">這是Google首頁</a>

	<p>image標籤_圖片標籤</p>
	<img src="panda.jpg">

</body>
</html>

CSS and Soup.select

CSS 代表層疊樣式表。 它描述了 HTML 元素如何在屏幕、紙張或其他媒體中顯示 在 CSS 中，有 CSS Selector 語法來選擇特定的 HTML 元素，並在這些元素上應用樣式。 這裡有一些規則： #someId – 將選擇所有 id=“someId” 的 HTML 元素 .someClass – 將選擇所有帶有 class=“someClass” 的 HTML 元素 p.someClass - 將選擇所有帶有 class=“someClass” 的 p 標籤