1. 爬蟲基本概念 slides

爬蟲基本概念¶

Da-Wei Chiang¶

大綱¶

網頁的種類
HTML標籤與屬性
HTML結構
熟悉HTML各類標籤
JSON文件
XML文件
何謂爬蟲
爬蟲的資料形式
為什麼需要網路爬蟲
爬蟲所需相關技術
爬蟲步驟總覽

網頁的種類¶

靜態網頁
動態網頁

靜態網頁¶

僅顯示資料的網頁，資料部分為前端開發者事先寫好的資訊
使用技術
- HTML
- CSS
- Javascript

各項技術扮演的角色¶

HTML：就像房子的根基，HTML扮演著網頁介面中鋼筋水泥的角色
CSS：房子的裝潢，CSS將既有的HTML架構加以修飾，使得網頁變漂亮
JavaScript：房子的互動，Javascript替既有的網頁增加互動性

動態網頁¶

將靜態網頁增加資料庫連結，網頁顯示的資料從資料庫取得
使用的技術
- C#
- Java
- PHP
- Python
- ....

簡易系統開發圖¶

爬蟲技巧需要對`HTML`及`CSS`有一定程度的瞭解¶

`HTML`標籤與屬性¶

何謂`HTML`?¶

HTML?
標記式語言

`HTML`標籤與屬性¶

<標籤名稱 屬性設定>標籤內容</標籤名稱>

<p align='center'>內容</p>

html的基本結構¶

<html>
    <head>
    </head>
    <body>
    </body>
</html>

範例¶

<html>
    <head>
        <title>這是一個測試網頁</title>
    </head>
    <body>
        <h1>html測試</h1>
        <p>這是聯成電腦</p>
        <p>爬蟲課程</p>
    </body>
</html>

練習¶

請建立一個有html基礎結構的網頁

熟悉`HTML`各類標籤¶

文字標籤
連結
圖像
表格

文字標籤¶

標題
段落
粗/斜體
上/下標
換行
空白
水平線
縮寫
作者
底線與刪除
清單

標題¶

<h1>主標題</h1>
<h2>次標題</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

h1~h6表面上只有大小差異，但背後的意義有階層關係

範例¶

<h1>國際新聞報導</h1>
<h2>台灣新聞</h2>
<h3>台北市</h3>
<h3>桃園市</h3>
<h3>新竹市</h3>
...

段落¶

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

範例¶

<h1>國際新聞報導</h1>
    <p>lorem</p>

    <h2>台灣新聞</h2>
        <p>lorem</p>
        <h3>台北市</h3>
            <p>.....</p>
        <h3>桃園市</h3>
            <p>.....</p>
        <h3>新竹市</h3>
            <p>.....</p>
...

粗/斜體¶

<b>粗體</b>
<i>斜體</i>
<strong>加強</strong>
<em>強調</em>

範例¶

<h1>國際新聞報導</h1>
    <p>這是國際新聞</p>

    <h2>台灣新聞</h2>
        <p>這是台灣新聞</p>
        <h3>台北市</h3>
            <p>台北地區放<strong>颱風假</strong></p>
        <h3>桃園市</h3>
            <p>.....</p>
        <h3>新竹市</h3>
            <p>.....</p>
...

練習¶

建構一個網頁
練習標題、段落、粗體/斜體標籤

上/下標¶

<sup>上標</sup>
<sub>下標</sub>

範例¶

<p>E=MC<sup>2</sup><p>
<p>CO<sub>2</sub><p>

換行¶

在html中單純的enter換行在網頁上不會有任何改變
html只吃換行標籤來認定是否換行
```
換行<br/>
```

範例¶

<p>Dear sir:</p><br/>
<p>以下是這次開會的內容：</p><br/>
<p>.....</p>

空白¶

html中多個空白多個空白會被當成一個空白執行

＆nbsp   不換行空白
＆ensp   半形空白
＆emsp   全形空白

範例¶

<h1>國際新聞報導</h1>
    <p>&nbsp;&nbsp;&nbsp;這是國際新聞</p>

    <h2>&emsp;台灣新聞</h2>
        <p>&ensp;這是台灣新聞</p>
        <h3>台北市</h3>
            <p>台北地區放<strong>颱風假</strong></p>
        <h3>桃園市</h3>
            <p>lorem</p>
        <h3>新竹市</h3>
            <p>lorem</p>
...

練習¶

建構一個網頁，練習換行與空白標籤
從執行結果感受各個空白字元的差異

清單¶

有序清單（有1, 2, 3 ...）
無序清單

有序清單(Order list)¶

<ol>
    <li>清單一</li>
    <li>清單二</li>
    ...
<\ol>

範例¶

<ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ol>

無序清單(Unorder list)¶

<ul>
    <li>清單一</li>
    <li>清單二</li>
    ...
<\ul>

範例¶

<ul>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ul>

巢狀清單¶

混搭order list 與 unorder list

範例¶

<ol>
    <li>前端技術</li>
    <ul>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ul>
    <li>後端技術</li>
    <ul>
        <li>C#</li>
        <li>Java</li>
        <li>Python</li>
    </ul>
</ol>

定義清單(define list)¶

<dl>
    <dt>標題</dt>
    <dd>內容</dd>
    ...
</dl>

範例¶

<dl>
    <dt>前端技術</dt>
    <dd>html</dd>
    <dd>css</dd>
    <dd>javascript</dd>
    <dt>後端技術</dt>
    <dd>C#</dd>
    <dd>java</dd>
    <dd>python</dd>
</dl>

練習¶

將國際新聞網頁結構改為定義清單結構

連結¶

基礎連結¶

<a href="網址">名稱</a>

新視窗中開啟網頁¶

<a href='網頁網址' target='_blank'>網頁名稱</a>

練習¶

製作一份清單
這份清單上有yahoo, google, pchome
點選清單上的連結可連到該網頁

圖像¶

新增圖像¶

<img src="圖片路徑" alt="當圖片路徑找不到時顯示的文字">

範例¶

<img src="圖片.jpg" alt="找不到該圖片">

圖片的寬高¶

<img src="圖片路徑" alt="當圖片路徑找不到時顯示的文字" width="給予寬度數字" height="給予高度數字">

範例¶

<img src="圖片.jpg" alt="找不到該圖片" width="600" height="450">

練習¶

建立一個清單
清單中的每個選項都包含圖片及連結

表格¶

什麼是表格？
表格的結構
表格的標題
長表格
合併儲存格

什麼是表格？¶

表格的結構¶

表格由table標籤開始、table中包含數個tr、tr中包含數個td

<table>
    <tr>
        <td></td>
        <td></td>
        ...
    </tr>
    <tr>
        ...
    </tr>
    <tr>
        ...
    </tr>
    ...
</table>

表格的結構¶

<table></table> <!--表示開始撰寫table-->
<tr></tr>       <!--表示行--> 
<td></td>       <!--表示列-->

範例¶

<table>
    <tr>
        <td>姓名</td>
        <td>地址</td>
    </tr>
    <tr>
        <td>Mike</td>
        <td>新竹市ＸＸＸＸＸＸ</td>
    </tr>
    <tr>
        <td>Mary</td>
        <td>台北市ＸＸＸＸＸＸ</td>
    </tr>
</table>

表格的標題¶

通常表格的標題會以th標籤表示

範例¶

<table>
    <tr>
        <th>姓名</th>
        <th>地址</th>
    </tr>
    <tr>
        <td>Mike</td>
        <td>新竹市ＸＸＸＸＸＸ</td>
    </tr>
    <tr>
        <td>Mary</td>
        <td>台北市ＸＸＸＸＸＸ</td>
    </tr>
</table>

練習¶

建立一個電視節目表

長表格¶

將表格中的標題(第一行)、內容、最後一行作區分

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            ...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            ...
        </tr>
        ...
    </tbody>
    <tfoot>
        <tr>
            ...
        </tr>
    </tfoot>
</table>

範例¶

<table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mike</td>
                <td>新竹市ＸＸＸ</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>新竹市ＸＸＸ</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>共兩人</td>
                <td></td>
            </tr>
        </tfoot>
    </table>

練習¶

建立一個名為購物清單的長表格

合併儲存格¶

讓格子擴張地盤

向右擴張¶

向右邊擴張 → 等價於橫跨col
```
<td colspan="2">data</td>
```

範例¶

<table border="2">
    <tr>
        <td>Cell 1.1</td>
        <td>Cell 1.2</td>
    </tr>
    <tr>
        <td colspan="2">Cell 2.1</td>
    </tr>
</table>

向下擴張¶

向下擴張 → 等價於橫跨row
```
<td rowspan="2">data</td>
```

範例¶

<table border="2">
    <tr>
        <td rowspan="2">Cell 1.1</td>
        <td>Cell 1.2</td>
    </tr>
    <tr>
        <td>Cell 2.2</td>
    </tr>
</table>

練習¶

完成以下表格

JSON文件¶

JSON是一種資料交換格式，主要用於local端與server端進行資料交換工作

JSON文件內容¶

{
    "key1":"value1",
    "key2":"value2",
    "key3":"value3"
}

JSON 物件¶

{
    "Company":"聯成電腦",
    "Class":"網路爬蟲",
    "Hours":"32小時"
}

JSON物件陣列¶

{
    "Company":"聯成電腦",
    "Class":[
        { "Title" : "Python基礎課程", "Hours":"32小時" },
        { "Title" : "Python資料分析課程", "Hours":"36小時" },
        { "Title" : "網路爬蟲課程", "Hours":"33小時" },
        { "Title" : "資料視覺化", "Hours":"30小時" },
    ]
}

XML文件¶

何謂網路爬蟲¶

從WEB上自動擷取所需資料，解析所需資料轉換為自定義的資料格式，好進行後續處理。

爬蟲基本概念¶

Da-Wei Chiang¶

大綱¶

網頁的種類¶

靜態網頁¶

各項技術扮演的角色¶

動態網頁¶

簡易系統開發圖¶

爬蟲技巧需要對HTML及CSS有一定程度的瞭解¶

HTML標籤與屬性¶

何謂HTML?¶

HTML標籤與屬性¶

html的基本結構¶

範例¶

練習¶

熟悉HTML各類標籤¶

文字標籤¶

標題¶

範例¶

段落¶

範例¶

粗/斜體¶

範例¶

練習¶

上/下標¶

範例¶

換行¶

範例¶

空白¶

範例¶

練習¶

清單¶

有序清單(Order list)¶

範例¶

無序清單(Unorder list)¶

範例¶

巢狀清單¶

範例¶

定義清單(define list)¶

範例¶

練習¶

連結¶

基礎連結¶

新視窗中開啟網頁¶

練習¶

圖像¶

新增圖像¶

範例¶

圖片的寬高¶

範例¶

練習¶

表格¶

什麼是表格？¶

表格的結構¶

表格的結構¶

範例¶

表格的標題¶

範例¶

練習¶

長表格¶

範例¶

練習¶

合併儲存格¶

向右擴張¶

範例¶

向下擴張¶

範例¶

練習¶

JSON文件¶

JSON文件內容¶

JSON 物件¶

JSON物件陣列¶

XML文件¶

何謂網路爬蟲¶

爬蟲的資料形式¶

為什麼需要網路爬蟲？¶

爬蟲所需相關技術¶

HTTP通訊協定¶

資料定位相關技術¶

資料儲存¶

爬蟲技巧需要對`HTML`及`CSS`有一定程度的瞭解¶

`HTML`標籤與屬性¶

何謂`HTML`?¶

`HTML`標籤與屬性¶

熟悉`HTML`各類標籤¶