前幾天在老闆 來點寇汀吧。 Boss,CODING please.製作台灣天氣地圖
看到使用正規化抓取href=".*?“裡面的值

在此學會新的正規化抓取href裡面值

Google找到相關文件
在此記錄筆記

Markdown 因其簡潔的語法和良好的可讀性，已成為技術寫作、筆記記錄和部落格寫作的主流格式。以下整理幾個常用且好用的 Markdown 編輯器。 桌面應用程式 Typora 平台：Windows、macOS、Linux 特色：所見即所得（WYSIWYG）的編輯方式，輸入 Markdown 語法後立即渲染，不會顯示原始語法 適合：喜歡乾淨寫作介面的使用者 費用：付費軟體（有試用期） Obsidian 平台：Windows、macOS、Linux、iOS、Android 特色：以「知識圖譜」為核心，支援雙向連結（[[頁面名稱]]），適合建立個人知識庫 適合：需要管理大量筆記、建立知識連結的使用者 費用：個人使用免費 Mark Text 平台：Windows、macOS、Linux 特色：開源免費，介面簡潔，支援即時預覽 費用：完全免費開源 線上編輯器 HackMD 網址：https://hackmd.io 特色：支援即時協作編輯，類似 Google Docs 的多人同步功能，適合團隊共同撰寫技術文件 費用：基本功能免費 StackEdit 網址：https://stackedit.io 特色：支援直接同步到 Google Drive、Dropbox、GitHub，左右分割預覽，可離線使用 費用：免費 Dillinger 網址：https://dillinger.io 特色：簡單易用的線上編輯器，支援匯出為 HTML、PDF，可連結 GitHub/Dropbox 費用：免費 選擇建議 使用情境 推薦工具 個人知識管理 Obsidian 專注寫作 Typora 團隊協作 HackMD 快速線上編輯 StackEdit / Dillinger 開源免費桌面 Mark Text 無論選擇哪個編輯器，核心的 Markdown 語法都是相同的，學會一個就能快速上手其他工具。

前幾天在hahow上 動畫互動網頁程式入門 (HTML/CSS/JS)
這沒有要打廣告，不過老師真的教得不錯
看到講師上到實作購物車時候
其中某一個function利用多個(json)物件組出list清單
而新增、刪除都是對物件操作，再透過function把list清單清空再繪製

！！！！這看起來有問題，講師怎麼這樣做，這項目很多時，捲軸會有問題，這一定有bug

什麼是 CSS Checkbox Hack？ CSS Checkbox Hack 是一種純 CSS 技巧，利用 <input type="checkbox"> 的 :checked 偽類選擇器，搭配 CSS 的兄弟選擇器（~），在不使用任何 JavaScript 的情況下實現 toggle（切換顯示/隱藏）效果。 基本原理 核心概念是： 一個隱藏的 checkbox 輸入框 一個 <label> 標籤綁定到該 checkbox（點擊 label 等同於點擊 checkbox） 利用 :checked 選擇器搭配 ~ 兄弟選擇器控制其他元素的樣式 模擬網頁開視窗（Modal）範例 以下是用 CSS Checkbox Hack 製作彈出視窗的完整範例： 1 2 3 4 5 6 7 8 9 10 11 <!-- HTML 結構 --> <input type="checkbox" id="modal-toggle" class="modal-checkbox"> <label for="modal-toggle" class="open-btn">開啟視窗</label> <div class="modal-overlay"> <div class="modal-content"> <h2>這是彈出視窗</h2> <p>這裡是視窗內容。</p> <label for="modal-toggle" class="close-btn">關閉</label> </div> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 /* 隱藏 checkbox 本身 */ .

最近在公司發現排版有問題，出現不該出現的捲軸 CSS原本以為是width:100%，應該調一下box-sizing :border-sizing 結果還是一樣有問題…. 後來發現auto，就不會有問題 不過當然要思考這兩個屬性差異 之後我認為width 沒設就是100% 但後來Google一下，發現我錯了，預設是auto (我也以為auto也是100%) ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/ 身為英文苦手不知道寫什麼意思，後來有爬到中文文章 内容的寬度=‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ 如果’margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’比較大，就減小width的值，如果比較小呢，就增大width的值，使其滿足上面的表達式。 http://m.studyofnet.com/news/965.html 總結一下，上面意思就是width:auto後，寬度算法會'margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right' >width，就會自動縮減width寬度；'margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right' <width，就會自動增加width寬度

在撰寫跨瀏覽器的 JavaScript 時，事件綁定是最常遇到相容性問題的地方之一。IE 早期版本使用自己的 attachEvent，而其他符合 W3C 標準的瀏覽器則使用 addEventListener，兩者在語法與行為上有明顯差異。 事件名稱差異 W3C 標準使用不帶 on 前綴的事件名稱，而 IE 的 attachEvent 需要加上 on： 1 2 3 4 5 // W3C 標準 element.addEventListener('click', handler, false); // IE 舊版 element.attachEvent('onclick', handler); this 的指向差異 這是最常造成 bug 的地方。使用 addEventListener 時，回呼函式內的 this 指向綁定事件的元素本身；但使用 attachEvent 時，this 指向的是全域物件 window。 1 2 3 4 5 6 7 element.addEventListener('click', function() { console.log(this); // 指向 element }); element.attachEvent('onclick', function() { console.log(this); // 指向 window，不是 element！ }); 事件傳遞方向 addEventListener 第三個參數可以控制事件傳遞方向（捕獲或冒泡），attachEvent 則只支援冒泡階段。

在除錯一個版面問題時花了將近一整天，最後發現是在 <dd> 標籤內部又嵌套了另一個 <dd> 標籤，這是 HTML 規範不允許的寫法。記錄一下正確用法，避免再踩同樣的雷。 <dl>、<dt>、<dd> 的正確結構 <dl>（Description List）是 HTML 的定義列表元素，結構規則如下： <dl>：定義列表的容器 <dt>：定義術語（Definition Term） <dd>：定義描述（Definition Description），緊跟在 <dt> 之後 1 2 3 4 5 6 7 8 <!-- 正確寫法 --> <dl> <dt>HTML</dt> <dd>HyperText Markup Language，超文字標記語言</dd> <dt>CSS</dt> <dd>Cascading Style Sheets，層疊樣式表</dd> </dl> <dd> 不能包含 <dd> 根據 HTML 規範，<dd> 的內容模型（Content Model）是 Flow Content，不包含 <dt> 或 <dd> 本身。以下是錯誤的寫法： 1 2 3 4 5 6 7 8 <!-- 錯誤寫法：dd 裡面嵌套 dd --> <dl> <dt>程式語言</dt> <dd> <dd>Python</dd> <!