萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1427.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , ⚙️JavaScript , ⚛️React】
JSX 常常被使用在 ⚛️ React 中，React 官方文件給了一段原始碼... (原始碼，看內文吧XD) ...官方說它既不是字串也不是 HTML，而是 JavaScript 的語法擴展...
#React初嘗試二 #React #初嘗試 #初嘗試二 #利用Babel_CDN讓瀏覽器直接跑JSX #Babel_CDN #Babel #JSX #HTML #JavaScript #網站技術 #UI #瀏覽器內的Babel編譯器 #僅限開發使用 #產品請一定要使用預處理器

萌芽綜合天地

React 初嘗試(二)：利用 Babel CDN 讓瀏覽器直接跑 JSX – 萌芽綜合天地

JSX 常常被使用在 ⚛️ React 中，React 官方文件給了一段原始碼：官方說它既不是字串也不是 HTML，而是 JavaScript 的語法擴展，它用來與 React 一起來描述 UI（使用者介面）應該長成什麼樣子，也就是說 JSX 可以更方便開發者用 JavaScript 撰寫與 React 有關係的 UI，看了很舒服，JSX 是很棒的輔助工具，但 JSX 並不是必須的，

34 views10:35

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1428.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , ⚙️JavaScript , ⚙️jQuery】
人總是遇上困難才知道如何去解決它，這次我碰上了！本站使用長時間的 jQuery CDN 「code.jquery.com」竟然無預警掛點，我的天呀！一下子網站一堆東西都失效了...
#jQuery_CDN #jQuery #CDN #掛點解決方案 #掛點 #解決方案 #JavaScript #JS #本地替代方案 #網站技術 #HTML

萌芽綜合天地

jQuery CDN 掛點解決方案？簡單的 JavaScript 讓您有本地替代方案！ – 萌芽綜合天地

人總是遇上困難才知道如何去解決它，這次我碰上了！本站使用長時間的 jQuery CDN 「code.jquery.com」竟然無預警掛點，我的天呀！一下子網站一堆東西都失效了！導覽列、黑暗模式切換等全部停擺，緊急找了新的 CDN 修補，這次換上 Google 提供的 CDN，有大神相助應該穩定很多吧 …！誰說的！因此為了確保這種事件不再發生！

42 views13:46

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1453.html
【✨精選文章；作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 📃瀏覽器 , 🌐網站技術 , 📄HTML , ⌨️架站程式 , 📝WordPress , 🔘Google Chrome】
隨著瀏覽器不斷的進步，新技術可以讓網頁工程師更輕鬆的開發出更符合現代需求的網站，圖片與嵌入網頁一直都是最拖累網站載入速度的元素，過去為了加速載入網站...
#Native_Lazyload #NativeLazyload #HTML_loading #loading #HTML新屬性 #HTML屬性 #新屬性 #屬性 #原生延遲載入功能 #原生延遲載入 #原生 #延遲載入 #純HTML #HTML #Google_Chrome #GoogleChrome #Chrome #軟體應用 #瀏覽器 #網站技術 #架站程式 #WordPress #WP

萌芽綜合天地

Native Lazyload：原生延遲載入功能登場！純 HTML 就能做到！ – 萌芽綜合天地

隨著瀏覽器不斷的進步，新技術可以讓網頁工程師更輕鬆的開發出更符合現代需求的網站，圖片與嵌入網頁一直都是最拖累網站載入速度的元素，過去為了加速載入網站，我們運用 JavaScript 延遲載入（圖片）或（嵌入網頁），舉例來說有 Intersection Observer API 可以做到，還有 scroll、

38 views19:13

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1488.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📝HTML , ⚙️JavaScript】
這次要教學的是寫一個短短的 JavaScript 原始碼就可以做到「點擊任一按鈕使其他按鈕無法點擊」，同場加映 3 秒後恢復原狀！會使用到 getElementById 取得按鈕 ID...
#JavaScript #點擊任一按鈕使其他按鈕無法點擊 #網站技術 #HTML #按鈕 #button

萌芽綜合天地

JavaScript：點擊任一按鈕使其他按鈕無法點擊 – 萌芽綜合天地

這次要教學的是寫一個短短的 JavaScript 原始碼就可以做到「點擊任一按鈕使其他按鈕無法點擊」，同場加映 3 秒後恢復原狀！會使用到取得按鈕 ID，接著運用（點擊）事件改變另外兩顆按鈕，為他們加上屬性與其值，這樣就停用這兩顆按鈕啦！三顆按鈕都做好後最後就是加映場，一樣也是做三個按鈕，不過這次用的是（添加事件監聽）的（點擊）事件，這是用來監聽點擊事件用的原始碼，

36 views02:35

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1504.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS , ⚙️JavaScript】
開場我就先說，純 CSS 無法做到，因為 CSS 無法由子元素的 hover（游標碰觸）來變更父元素的樣式，所以就要用到萬能的 JavaScript！運用 DOM 的控制來做到 CSS...
#JavaScript #游標碰觸子元素使父元素樣式變更 #子元素 #父元素 #樣式變更 #HTML #CSS #hover #游標碰觸 #mouseover #mouseout #事件 #addEventListener #監聽

萌芽綜合天地

JavaScript：游標碰觸子元素使父元素樣式變更 – 萌芽綜合天地

開場我就先說，純 CSS 無法做到，因為 CSS 無法由子元素的 hover（游標碰觸）來變更父元素的樣式，所以就要用到萬能的 JavaScript！運用 DOM 的控制來做到 CSS 目前做不到的事情！這次主題為「游標碰觸子元素使父元素樣式變更」。需要用到的 JavaScript 事件有兩個：mouseover 與 mouseout，前者代表游標碰觸到元素，後者代表游標沒有碰觸到元素。

58 views10:43

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1537.html
【✨精選文章；作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📝HTML , ⚙️JavaScript , ⚙️jQuery , ⌨️架站程式 , 📝WordPress】
我在《WordPress 外掛推薦列表（2016、2017舊版）》這篇文章就有推薦 WordPress 外掛「WordPress Popular Posts」，這款外掛可以幫助網站主記錄每篇文章的流量...
#取得WordPress_Popular_Posts_REST_API_熱門文章資訊至任何網頁 #WordPress_Popular_Posts #WPP #REST_API #API #熱門文章 #AJAX取得JSON #AJAX #JSON #取得資料 #網站技術 #HTML #JavaScript #JS #jQuery #架站程式 #WordPress #WP

萌芽綜合天地

65 views04:32

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1543.html
【作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 🌐網站技術 , 📄HTML , ⚙️Visual Studio Code】
之前開發 JavaScript 就有找到一款擴充功能（參考：Bracket Pair Colorizer）可以將上下括弧的區域標示出來，使程式撰寫更加容易，但 HTML 標籤同樣是有區域的...
#Highlight_Matching_Tag #Visual_Studio_Code #VSCode #擴充功能 #HTML開始與結束標籤強調與標示 #開始標籤 #結束標籤 #強調與標記 #延伸模組 #軟體應用 #網站技術 #HTML #IDE #開發工具

萌芽綜合天地

Highlight Matching Tag（Visual Studio Code 擴充功能）：HTML 開始與結束標籤強調與標示 – 萌芽綜合天地

Visual Studio Code」是由微軟（Microsoft）開發的開放原始碼程式編輯器。之前開發 JavaScript 就有找到一款擴充功能（參考：Bracket Pair Colorizer）可以將上下括弧的區域標示出來，使程式撰寫更加容易，但 HTML 標籤同樣是有區域的，就是由開始標籤 <標籤名稱> 與結束標籤 </標籤名稱> 所框住的指定區域，但預設卻沒有標示，覺得有些不便！

90 views13:57

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1545.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS】
很多人都想用最簡單的方式達成網頁元素水平垂直置中、置中央，其實只要純 CSS 就可以做到囉...
#純CSS #網頁元素水平垂直置中 #網頁元素 #水平垂直置中 #置中 #網頁元素置中央 #置中央 #HTML #CSS #網站技術

萌芽綜合天地

純 CSS 做到網頁元素水平垂直置中、置中央 – 萌芽綜合天地

很多人都想用最簡單的方式達成網頁元素水平垂直置中、置中央，其實只要純 CSS 就可以做到囉！這邊直接示範把網頁元素置於整個網頁畫面的中央位置，這樣如果你要做其他的運用也只要簡單修改就可以做到。這邊首先要把、設定為寬高都為 100%，接著建立一個容器設定 display 為 flex，接著設定兩個屬性給這個容器： align-items 是垂直方向對齊；

69 views09:44

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1547.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS , ⚙️JavaScript】
JavaScript 有個內建的事件 DeviceOrientationEvent 可用來獲得裝置陀螺儀的動向/方向資訊，結合 CSS 的 transform 就可以做到翻轉裝置使圖片三維翻轉的效果...
#JavaScript #JS #HTML #CSS #transform #陀螺儀 #陀螺儀使圖片三維翻轉 #圖片三維翻轉 #圖片 #三維翻轉 #翻轉裝置 #網站技術 #DeviceOrientationEvent #事件 #DeviceOrientation #監聽

萌芽綜合天地

JavaScript & CSS 陀螺儀使圖片三維翻轉 – 萌芽綜合天地

JavaScript 有個內建的事件可用來獲得裝置陀螺儀的動向/方向資訊，結合 CSS 的就可以做到翻轉裝置使圖片三維翻轉的效果！當然這只是測試時好玩做出來的效果，實際上若結合指北、指南等，將可以做到更多應用！這邊簡單列出會用到的三個方向值：值為裝置水平放置時的 Z 軸動向，介於 0 ~ 360 度之間，可以想像裝置放在桌面上轉動（？）。值為裝置水平放置時的 X 軸動向，介於 -180 ~…

54 views13:54

Add a comment

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1569.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 📄JavaScript , 📄jQuery】
好久一段時間沒來研究前端，這次的主題是「打造多國語言的靜態網頁」，上網搜尋找到非常多的作法，但這次我想找的是相對最為簡單、技術門檻最低的方式...
#利用自定義HTML屬性打造多國語言的靜態網頁 #自定義HTML屬性 #多國語言靜態網頁 #多國語言 #靜態網頁 #HTML #jQuery #JavaScript #JS #網站技術

萌芽綜合天地

jQuery：利用自定義 HTML 屬性打造多國語言的靜態網頁 – 萌芽綜合天地

好久一段時間沒來研究前端，這次的主題是「打造多國語言的靜態網頁」，上網搜尋找到非常多的作法，但這次我想找的是相對最為簡單、技術門檻最低的方式，因此找了 GitHub 上不少慷慨工程師留下的原始碼，不過很多都有問題無法運作，排除掉複雜且有問題的資料後，最終一位來自伊朗的工程師的原始碼幫我完成了這次的研究，本文的前端開發基於它的靈感 👉 jq-multi-lang 首先，

51 views05:27

👍 2 ❤️

Open Comments

👉 詳細圖文 🌐 網站技術 💻 萌芽綜合天地

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1573.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 📄JavaScript】
這次試試是否能使用 JavaScript 就將 HTML 網頁上的區塊轉換成 JPG 圖檔，類似針對網頁局部截圖的概念，適合運用在將圖表、文字資訊等網頁上的資訊直接擷取...
#將HTML網頁上的區塊轉換成JPG圖檔 #HTML網頁 #網頁區塊 #區塊擷取成影像 #html2canvas #Canvas #JPG圖檔 #JPG #圖檔 #HTML #JavaScript #JS #網站技術

萌芽綜合天地

JavaScript：將 HTML 網頁上的區塊轉換成 JPG 圖檔 – 萌芽綜合天地

這次試試是否能使用 JavaScript 就將 HTML 網頁上的區塊轉換成 JPG 圖檔，類似針對網頁局部截圖的概念，適合運用在將圖表、文字資訊等網頁上的資訊直接擷取下來成圖檔。開發上只需要用到「html2canvas」這款 JavaScript 函式庫，它能將 HTML 元素轉換成 Canvas，接著再直接用瀏覽器幫忙轉換成 JPG 圖檔並給予品質（最差為 0，最佳為 1），最後自動導出並下載，

36 views15:59

👍 1 ❤️

Open Comments

👉 詳細圖文 🌐 網站技術 💻 萌芽綜合天地

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1576.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 📄JavaScript】
現在不管是 Windows、macOS 還是 Android，系統都可以設定色彩主題成深色模式或淺色模式，瀏覽器也會因為系統設定值而獲得參數，這時候透過 JavaScript 就可以...
#偵測系統色彩主題 #系統色彩主題 #深色模式 #淺色模式 #深色 #淺色 #黑暗模式 #明亮模式 #HTML #JavaScript #JS #網站技術 #prefers_color_scheme #dark #light

萌芽綜合天地

JavaScript：偵測系統深色模式/淺色模式 – 萌芽綜合天地

現在不管是 Windows、macOS 還是 Android，系統都可以設定色彩主題成深色模式或淺色模式，瀏覽器也會因為系統設定值而獲得參數，這時候透過 JavaScript 就可以抓取現在的模式，進而做到改變網頁內容／樣式。這在做網頁深色模式與淺色模式（或者說「黑暗模式」和「明亮模式」）上非常有幫助，使用者基本上不用自行切換，直接透過系統的偏好值顯示對於使用者來說最合適的色彩主題。

36 views05:09

👍 1 ❤️

Open Comments

👉 詳細圖文 🌐 網站技術 💻 萌芽綜合天地

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1702.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML】
<datalist> 是 HTML 原生的標籤，目的是用來建立一組資料清單，並與 <input> 輸入欄位做結合，到瀏覽器端顯示時，使用者只要點擊輸入欄位即會跳出下拉選單，可以在開發者定義好的...
#datalist #資料清單 #input #輸入欄位 #可自動補字 #自動補字 #下拉選單 #選單 #HTML #網站技術 #原生標籤

萌芽綜合天地

HTML <datalist> 輸入欄位可自動補字之下拉選單 – 萌芽綜合天地

<datalist> 是 HTML 原生的標籤，目的是用來建立一組資料清單，並與 <input> 輸入欄位做結合，到瀏覽器端顯示時，使用者只要點擊輸入欄位即會跳出下拉選單，可以在開發者定義好的資料清單中做選擇，且在欄位內輸入與資料清單有關之文字，還能有自動補字或自動完成之效果，舉例來說，在做國家、縣市、地區等輸入時就可以用到。 1. 先建立 <input>，並在標籤內塞入 list 屬性並做命名。

20 views04:13

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1713.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML】
在 HTML 中，<button> 並沒辦法直接加上 href 屬性使按鈕作為連結，因此需要靠一些「手段」讓按鈕有像是 <a> 一樣的行為...
#button #將按鈕做成連結 #按鈕 #連結 #a #link #href #HTML #網站技術

萌芽綜合天地

HTML button 將按鈕做成連結 – 萌芽綜合天地

在 HTML 中，<button> 並沒辦法直接加上 href 屬性使按鈕作為連結，因此需要靠一些「手段」讓按鈕有像是 <a> 一樣的行為。首先是方法一，利用一個 <form> 將 <input type="submit"> 包在裡面，而外頭的 <form> 還要給予一個 action 屬性以給予連結，原始碼如下：再來是方法二，利用 JavaScript 來設定，可以做到類似連結的效果，

24 views10:29

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1716.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML】
學過網頁的人都知道 HTML 中的 <a> 標籤是用來做連結的，而我們有時會需要在網頁中導引訪客連結至一個檔案，而該檔案有可能是 DOCX、PPTX 或 PDF 等...
#a #download屬性 #download #屬性 #讓連結可直接執行下載 #連結 #下載 #HTML #網站技術

萌芽綜合天地

HTML <a> download 屬性讓連結可直接執行下載 – 萌芽綜合天地

學過網頁的人都知道 HTML 中的 <a> 標籤是用來做連結的，而我們有時會需要在網頁中導引訪客連結至一個檔案，而該檔案有可能是 DOCX、PPTX 或 PDF 等，而某些檔案瀏覽器因為無法預覽會直接跳出下載，然而像是 PDF 這種可預覽的格式則會直接給訪客進入預覽，但有時候開發者可能更希望訪客是直接下載這些檔案的，因此就可以透過新增download 屬性讓連結可直接執行下載！

18 views05:14

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1720.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS , 🟪Bootstrap】
近期 Bootstrap 穩定版已經開發到 5.1 了！不過很多人還是用較舊的版本在進行網頁的開發，而我自己在用 Bootstrap 3.4.1 做面板（Panel）時，就發現了其一個很棒的功能...
#Bootstrap_3_4_1 #多彩改良式可折疊面板 #多彩 #改良式 #可折疊面板 #可折疊 #面板 #Panel #HTML #CSS #Bootstrap #網站技術

萌芽綜合天地

Bootstrap 3.4.1：多彩改良式可折疊面板 – 萌芽綜合天地

近期 Bootstrap 穩定版已經開發到 5.1 了！不過很多人還是用較舊的版本在進行網頁的開發，而我自己在用 Bootstrap 3.4.1 做面板（Panel）時，就發現了其一個很棒的功能，就是可折疊面板（Collapsible Panel）！面板本身分為頭（Head）、身（Body）、尾（Footer），前者可以放標題（Title）、中者可以放內容（Content）、

29 views10:23

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1721.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🟪Bootstrap】
在前端領域，最近最常被提到的一定是 Bootstrap，它是一組用於網站和網路應用程式開發的開源前端框架，也是包含了 HTML、CSS 及 JavaScript（簡稱「JS」）的框架，提供...
#介紹 #入門 #Bootstrap_5 #Bootstrap_4 #Bootstrap_3 #差別 #入門模板 #HTML #Bootstrap #網站技術

萌芽綜合天地

Bootstrap 介紹與入門，Bootstrap 5 跟 Bootstrap 3 & 4 的差別 – 萌芽綜合天地

在前端領域，最近最常被提到的一定是 Bootstrap，它是一組用於網站和網路應用程式開發的開源前端框架，也是包含了 HTML、CSS 及 JavaScript（簡稱「JS」）的框架，提供排版、字體、表單、按鈕、導航、選單及其他各種元件及 JavaScript 擴充套件，目的是讓動態網頁和 Web 應用的開發更加容易。目前最新版本為 5.1.0 （2021 年 8 月 4 日發布）。

38 views11:12

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1735.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 🎨CSS , 📄JavaScript , 📄jQuery】
為了方便以後讓任何網站都能快速擁有回頂部按鈕，特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕，輕鬆就能使用！基本上只要在網頁...
#自動隱藏且可直接使用的網頁回頂部按鈕 #自動隱藏 #可直接使用 #網頁回頂部按鈕 #回頂部按鈕 #回頂部 #HTML #CSS #jQuery #JavaScript #JS #網站技術

萌芽綜合天地

自動隱藏且可直接使用的網頁回頂部按鈕 – 萌芽綜合天地

為了方便以後讓任何網站都能快速擁有回頂部按鈕，特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕，輕鬆就能使用！基本上只要在網頁 <head> 到 </head> 中先引入 jQuery 後即可直接使用。通常這種設計是為了方便讓使用者在看完網頁主要內容後，能快速回到最上面查看導覽列，若您的網站本身就設有固定於頂部的導覽列，可能就比較不需要這種設計。

30 views11:20

About

Blog

Apps

Platform