HTML – Charles Note

Python / 使用 Selenium 撰寫網路爬蟲程式 (chromedriver)

想要用 Python 實作網路爬蟲程式的方法有兩種：使用 requests 套件或 selenium 套件。兩個套件的差異在於 requests 套件是使用最基礎的 GET 和 POST 方法和 server 溝通，好處在於它的速度快、作法單純，壞處是必須處裡來自於網站的一切資料傳輸動作、Cookies Handling、甚至更複雜的 JS 渲染、網頁程式互動等複雜的動作。如果要爬的目標網站內容比較單純，或甚至可以透過 API 取的資料，那可以考慮使用 requests 套件。不過現在的網站設計越來越複雜，本篇使用的 selenium 套件則是透過控制瀏覽器 (本篇使用 chromedriver)，讓瀏覽器為我們處裡上面提到的複雜動作，例如登入帳號之後的 cookies handling、表單填寫並送出 POST request 或是 JS 渲染後的網站動作，讓我們模擬實際操作網站的方式進行網站爬蟲。本篇目前不是完整的爬蟲程式教學，只是筆記一些關於使用 Selenium 套件撰寫爬蟲程式的方法。目錄如何取得 HTML 的 attribute (how to get attribute of element) 實作捲動畫面 (Scrolling) ▍如何取得 HTML 的 attribute (how to...

CSSFront-end 網頁前端ProgrammingTech 科技

CSS / margin 邊界重疊

如果你對你的網站有複雜的 CSS 設定時，你可能會發現一種狀況，就是前後兩個 block 元件的邊界會有重疊的狀況。前一個元件的下邊界 (margin-bottom) 會和後一個元件的上邊界 (margin-top) 重疊，只會保留兩個之中較大的那一個，這就稱之為邊界重疊 (margin collapsing)。不過有兩種例外狀況，當元件有設定 float 或 position: absolute 屬性，就不會產生邊界重疊的現象。會產生邊界重疊的狀況 ▍ 同一層的元件相鄰兩個位在同一層的 block 元件相鄰就會產生邊界重疊，margin 只會取其中最大的一邊。就像下面的範例，前後兩個段落之間的邊界最後只會有 40px。 First element Second element ▍ 父元素的邊界與第一個/最後一個子元素的邊界重疊當子元素的邊界與父元素的邊界重疊時，依然只會取最大的邊界。下面的範例當中，段落 (p) 是區塊 (div) 的子元素，父子元素間的上下邊界都有邊界重疊的情況。最終上邊界取子元素的 20px、下邊界取父元素的 80px。 <div style="margin-top: 15px; margin-bottom: 80px;"> this parameter...

Computer 電腦CSSFront-end 網頁前端ProgrammingTech 科技

CSS / 變更選取文字的背景顏色

在 CSS 當中有定義一些偽元素選擇器 (pseudo element selector)，他是用兩個冒號 :: 表示指定元素的特定的狀態。例如下面這個 code 就表示所有段落 (p) 的第一行 (first-line)。那麼要怎麼改變被選取文字的背景色呢？只需要使用 ::selection 這個偽元素就可以囉！假設我們要改變所有段落中被選取的文字的背景色：下面這段文字就應用了上面這段 CSS 屬性，被選取的文字背景色會是 #0ABAB5 這個顏色 (tiffany blue)： Our deepest fear A Return to Love: Reflections on the Principles of “A Course in Miracles” — Marianne Williamson (1992) Our deepest fear is not that we are inadequate. Our...

Computer 電腦CSSFront-end 網頁前端ProgrammingTech 科技

CSS / 幫表格加入橫向捲軸，讓超出螢幕寬度的表格不會擠成一團

我們在網頁當中加入表格的時候常常會遇上一個問題，就是當表格的寬度已經超過螢幕的寬度要怎麼辦？尤其是手機版的頁面更是容易遇上這樣的問題。還記得 CSS 有一個 overflow 的屬性，但只設定這個屬性是不夠的，還需要對表格的加入以下屬性：首先要先讓 table 這個物件變成 block 物件，然後在水平方向的 overflow 讓它自動判斷是否有超出寬度的內容，自動加入水平捲軸。最後是 white-space: nowrap 這個屬性，讓文字不會因為寬度自動斷行，除非內容真的有斷行 存在。這是另一篇文章 Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表有用到表格捲軸的範例： ▍ 關於上面三個 CSS 屬性的詳細說明可以參考 W3School 的說明： display: CSS display Propertyonferflow: CSS overflow Propertywhite-space: CSS white-space Property Copyright announcement:the featured image: Photo by The Journal Garden | Vera Bitterer on Unsplash

Front-end 網頁前端HTMLProgrammingTech 科技

HTML / 網頁當中的六種空白字元   &ensp; &emsp;   &zwnj; &zwj; 的差別

在HTML當中，空格 (space) 不僅僅就是空格這麼簡單的事，它其實有六種不同樣的空格。如果你有編輯網頁或在網路上寫文章的經驗，肯定會發現當你連續輸入好幾個空格的時候，它永遠都只會有一個空格，甚至是被當作”無內容”來解析。這是因為瀏覽器在遇到空格的時候，如果它認為這是一串字串，那麼空格就會被當作空格但不會累計，不管你輸入再多個空格它還是只會有一個。空格在 HTML 當中被視為是特殊符號的一種，在網頁當中如果想要正確的加入空格，就必須用 HTML 的語法輸入。HTML 提供了六種不同種類的空格，其中最大的差異在於寬度上的不同。 1.   不換行空格 No-Break Space，不換行空格。這是最常見的空格，也是一般我們鍵盤按下空白鑑會出現的字元。大部分來說我們只會使用這樣的空白，輸入多次   空格也會累計。  的空格寬度會受字體影響。 2. &ensp; 半形空格 En Space，半形空格。en 是一個半型字元寬度的單位，寬度為 em 的一半。例如當 16px 大小的字體，半形就是 8px 的寬度。就定義上來說，一個 en 就是小寫字母 n 的寬度，大約是半個中文字寬。 3. &emsp; 全形空格 Em Space，全形空格。和半形空格同概念，em 是一個全形字元的寬度，如果字體大小是 16px，一個 em 就是 16px，大約等於一個中文字寬。 4.   窄空格窄空格，顧名思義就是寬度較窄的空格，大約是 1/6 個 em 寬。 5. ‌&zwnj; 全名是...

Tag HTML