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/)