[Python爬蟲] 02. HTML 跟 CSS 基礎

本篇文章是針對爬蟲內容編寫，詳細目錄 01.python 爬蟲入門。

HTML 就是一張素顏的臉，而 CSS 就是化妝品，能把原本不怎麼起眼的 HTML 頁面打扮得美美的。

HTML （Hypertext Markup Language，超文字標示語言）是一種用來組織架構並呈現網頁內容的程式語言，主要是描述網頁的結構與內容。
CSS（Cascading Style Sheets，串連樣式表）是描述網頁中的每個 element 的樣式譬如說：字體、大小、顏色、背景色。

HTML

一個完整的 HTML 頁面它所包含的要素：

  <!DOCTYPE html>
  <html>
      <head>
      <meta charset="utf-8">
      <title>My test page</title>
      </head>
      <body>
      <h1>This is a heading</h1>
      <p id="no1" class="ql-syntax ql-divider">主題1</p>
      <img src="images/firefox-icon.png" alt="My test image">
      <a href="http://www.w3school.com.cn">This is a link</a>
      </body>
  </html>

<h1>~<h6> 標題：
```
  <h1>This is a heading</h1>
```

<p> 段落：

  <p id="no1" class="ql-syntax ql-divider">主題1</p>

<a href> 連結：

  <a href="http://www.w3school.com.cn">This is a link</a>連結
  <div> 頁面分割用元素：
  <img> 圖片：
  <img src="images/firefox-icon.png" alt="My test image">
  <form> 表單元素：
  <form>
  <input type="text" name="firstname">
  <input type="radio" name="sex" value="male" checked>Male
  <input type="submit" value="Submit">
  </form>
  <table> 表格元素：
  <table>
      <thead>
          <tr><th></th><th></th></tr>
      </thead>
      <tbody>
          <tr><td></td><td></td></tr>
      </tbody>
  </table>

CSS 1

CSS 可套用樣式的對象

標籤 tag
類別 class

識別代號 id

  <body>
      <h1 class="special-title">等級1的標題</h1><img src="圖片連結" />　<!--標籤是＂h1＂/class是＂special-title＂-->
      <p>段落標籤中的文字<img src="圖片連結" id="point-img" /></p>      <!--標籤是＂p＂/id是＂point-img＂-->
  </body>

Selector 選擇器

選擇器可使用 class 或 id 對象。

選擇器 class & id 範例：

  <input type="text" id="max_loss" name="max_loss" class="input-txt w90 fz-14 fn-rex-money" value="20000000" positiveinteger="true">

class：要在開頭加上句點 .，一個 html 頁面中多個 html 元素會共享一個 class。

  /*範例共用了4個class*/
  .input-txt 
  .w90 
  .fz-14 
  .fn-rex-money  

id：要在前面加上 # 字號，一般一個 html 頁面中每個 html 元素的 id 是不會重複的。
```
  #max_loss
```

Chrome Developer Tool
- 在網頁上按 F12 在元素上按右鍵>Copy>Copy selector ，可複製元素的路徑，＂>＂代表尋找下一階層的元素。
```
  #tbody_query > form > table > tbody > tr.tl > td:nth-child(3) > span:nth-child(1)> .w90
```

Xpath

html 檔案是巢狀結構，就是從最上層到最下層，每一層經過的 tag 名稱串接起來的定位器。

  /*完整Xpath*/
  /html/body/div[2]/div/div/div[3]/table/tbody/tr[7]/td[15] 
  /*簡化過後的Xpath*/
  //*[@id="tbody_lottery"]/tr[7]/td[15] 

Chrome Developer Tool
- 使用 F12 可查詢元素數量。