Introduction to Python Applications 2025 - Selenium
===
###### tags: `Python` `Python and Its Application 2025`
## 網頁的構成
1. **HTML (HyperText Markup Language - 超文本標記語言)：房子的結構**
* **用途：** HTML 是網頁的骨架，負責定義網頁的內容和結構。它會告訴瀏覽器網頁上有哪些元素，例如標題、段落、圖片、連結、列表等等。
* **比喻：** 就像蓋房子時的鋼筋水泥、樑柱和牆壁，HTML 搭建起網頁的基本框架。它決定了「這裡是一個標題」、「那裡是一段文字」、「這是一張圖片」。
* **範例：**
```html
<!DOCTYPE html>
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是一個介紹 HTML、CSS 和 JavaScript 的段落。</p>
<img src="image.jpg" alt="示意圖">
<a href="#">點擊這裡</a>
</body>
</html>
```
2. **CSS (Cascading Style Sheets - 層疊樣式表)：房子的裝潢和外觀**
* **用途：** CSS 負責網頁的視覺呈現和排版。它用來控制 HTML 元素的樣式，例如顏色、字體、大小、間距、背景、位置等等。
* **比喻：** 如果 HTML 是房子的結構，那麼 CSS 就是油漆、壁紙、家具、燈飾和室內設計。它讓網頁看起來更美觀、更易於閱讀。
* **範例 (通常寫在 `<style>` 標籤內或獨立的 `.css` 檔案)：**
```css
body {
font-family: Arial, sans-serif; /* 設定字體 */
background-color: #f0f0f0; /* 設定背景顏色 */
}
h1 {
color: navy; /* 設定標題顏色 */
text-align: center; /* 設定標題置中 */
}
p {
font-size: 16px; /* 設定段落文字大小 */
line-height: 1.6; /* 設定行高 */
}
img {
display: block; /* 讓圖片獨占一行 */
margin: 0 auto; /* 讓圖片水平置中 */
width: 50%; /* 設定圖片寬度 */
}
```
3. **JavaScript (JS)：房子的互動功能和動態效果**
* **用途：** JavaScript 為網頁添加互動性和動態功能。它可以讓網頁對使用者的操作做出反應，例如點擊按鈕、提交表單、播放動畫、更新內容等等。
* **比喻：** JavaScript 就像房子裡的電器、門鈴、自動門、電燈開關等等。它讓網頁「活」起來，不再只是靜態的展示。
* **範例 (通常寫在 `<script>` 標籤內或獨立的 `.js` 檔案)：**
```javascript
// 假設 HTML 中有一個按鈕 <button id="myButton">點我</button>
// 和一個段落 <p id="myParagraph"></p>
let button = document.getElementById("myButton");
let paragraph = document.getElementById("myParagraph");
button.addEventListener("click", function() {
paragraph.textContent = "按鈕被點擊了！"; // 點擊按鈕後改變段落文字
});
```
**它們如何協同工作？**
想像一下瀏覽器載入一個網頁的過程：
1. **瀏覽器首先讀取 HTML 檔案。** 這就像建築工人先看設計藍圖，了解房子的基本結構，知道哪裡是客廳、哪裡是臥室。
2. **接著，瀏覽器根據 HTML 結構，套用 CSS 樣式。** 這就像裝潢工人開始粉刷牆壁、鋪設地板、擺放家具，讓房子有了美觀的外觀。
3. **最後，瀏覽器執行 JavaScript 程式碼。** 這就像接通電源，讓房子裡的電器和互動裝置開始運作。使用者可以開燈、按門鈴，網頁也可以根據使用者的操作產生變化。
**總結來說：**
* **HTML** 提供**內容**和**結構**。
* **CSS** 提供**樣式**和**外觀**。
* **JavaScript** 提供**互動性**和**功能**。
這三者相輔相成，缺一不可，共同構成了我們每天在網路上看到的豐富多彩、功能強大的網頁。學習網頁開發，通常也是從這三門技術開始入手。
## HTML
**HTML（HyperText Markup Language）** 是用來建立網頁的**標記語言**，用來描述**網頁的結構與內容**，例如標題、段落、圖片、表單等等。
* HTML 不是程式語言，而是一種**結構標記語言**
* 瀏覽器負責「解譯」HTML 並顯示給使用者
## 為何需要 Selenium
`requests` 可以取得網頁原始碼，即 html 的部分，也可以利用 BeautifulSoup 等工具進行分析，但是 `requests` 本體並沒有提供 JavaScript 執行的環境，因此能夠直接使用真正的瀏覽器來開啟網頁的 Selenium，才能夠做到執行 JavaScript 並在正確顯示的網頁上取得資料。
## HTML5 基礎結構
HTML5 是最新版本，支援更多語義化標籤與多媒體功能。
### 一個完整的 HTML5 範例：
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>這是一個用 HTML5 撰寫的網頁。</p>
</body>
</html>
```
### 📌 各部分說明：
| 區塊 | 說明 |
| ------------------------ | -------------------------- |
| `<!DOCTYPE html>` | 宣告這是 HTML5 文件 |
| `<html lang="zh-Hant">` | 整個 HTML 文件開始，`lang` 屬性定義語言 |
| `<head>` | 頭部區塊（放網頁資訊、CSS、Meta、標題等） |
| `<meta charset="UTF-8">` | 定義編碼，支援繁體中文 |
| `<title>` | 網頁標題（會顯示在瀏覽器分頁） |
| `<body>` | 內容區塊，顯示在網頁畫面上的部分 |
### 語法相關名詞
- Tag: 通常有**開始與結束** `<p>內容</p>`，但部分標籤是**單標籤（自閉合）**：如 `<img />`、`<br />`。
- Type: `<p>這是一個用 HTML5 撰寫的網頁。</p>` 的 `p` 就是 Type。
- Attribute: `<html lang="zh-Hant">` 中的 `lang` 就是 Attribute。
- Text: `<p>這是一個用 HTML5 撰寫的網頁。</p>` 中的「這是一個用 HTML5 撰寫的網頁。」就是 Text。
## 常用 HTML 標籤與範例
### 標題與段落
```html
<h1>主標題</h1>
<h2>副標題</h2>
<p>這是一段文字。</p>
```
* `<h1>`\~`<h6>`：標題，數字越小越重要
* `<p>`：段落
### 連結與圖片
```html
<a href="https://www.google.com">前往 Google</a>
<img src="https://via.placeholder.com/150" alt="範例圖片">
```
* `<a href="URL">文字</a>`：超連結
* `<img src="圖片網址" alt="替代文字">`：圖片（`alt` 是無法顯示時的替代描述）
### 清單
```html
<ul>
<li>無序項目 1</li>
<li>無序項目 2</li>
</ul>
<ol>
<li>有序項目 1</li>
<li>有序項目 2</li>
</ol>
```
* `<ul>`：無序清單（圓點）
* `<ol>`：有序清單（數字）
* `<li>`：清單項目
### 表格
```html
<table border="1">
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
</table>
```
* `<table>`：表格
* `<tr>`：列
* `<td>`：儲存格（資料格）
* `<th>`：標題格（加粗置中）
### 表單元件（輸入）
```html
<form>
姓名：<input type="text" name="name"><br>
信箱：<input type="email" name="email"><br>
<button type="submit">送出</button>
</form>
```
* `<form>`：表單區塊
* `<input>`：輸入欄位（`type` 決定型態）
* `<button>`：按鈕
## CSS 基礎
* CSS 是什麼？
* Cascading Style Sheets
* 設計、美化、排版 HTML 元素的工具
* CSS 導入方式
* inline style: `<p style="color:red">`（不推薦）
* internal: `<style>` 安裝在 `<head>`
* external: 外部 CSS 檔案
### 常用 CSS 選擇器
選擇器（Selector）用來「選取」HTML 中的元素，然後套用樣式。以下是常見的類型：
| 選擇器 | 說明 | 範例 |
| -------------- | ------------------- | ------------------------------------ |
| 標籤選擇器 | 選取所有該 HTML 標籤元素 | `h1 { color: red; }` |
| 類別選擇器 `.class` | 選取 class 屬性為指定名稱的元素 | `.title { font-size: 24px; }` |
| ID 選擇器 `#id` | 選取具有特定 id 的元素 | `#header { background: gray; }` |
| 群組選擇器 | 一次選取多個元素 | `h1, h2, p { margin-bottom: 10px; }` |
| 後代選擇器 | 選取某元素內的某種子元素 | `ul li { list-style: square; }` |
_ 還有更多選擇器，但我們先跳過。
### 基礎樣式屬性
* `color`, `background-color`
* `font-family`, `font-size`
* `padding`, `margin`, `border`
* `text-align`, `display`, `flex`
## 練習範例檔案
檔案組合:
```
lesson-demo/
├── index.html
├── style.css
└── script.js
```
**index.html**
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的個人網頁</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>我是學習者</h1>
<p>我喜歡網頁開發。</p>
<img src="https://via.placeholder.com/150" alt="avatar">
<p><a href="https://www.google.com">Google 網址</a></p>
<button id="countBtn">點我！</button>
<p>點擊次數：<span id="counter">0</span></p>
<script src="script.js"></script>
</body>
</html>
```
**style.css**
```css
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}
h1 {
color: #2c3e50;
}
img {
border-radius: 50%;
margin: 10px 0;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
}
```
**script.js**
```javascript
let count = 0;
document.querySelector('#countBtn').addEventListener('click', () => {
count++;
document.querySelector('#counter').textContent = count;
});
```
## [Selenium with Python](https://selenium-python.readthedocs.io/)
Sign in with Wallet
Connect another wallet